Привязать заголовок и данные на навигационной панели

Использование Bootstrap v3.3.6 для создания макета, который в конечном итоге будет использовать Angular JS для обработки данных. Мне интересно отображать заголовок вместе с данными в панели навигации, как показано ниже (в 2-х строках). панель не сделала правосудия, и любая помощь по дизайну/стилю была бы высоко оценена.Привязать заголовок и данные на навигационной панели

HTML-синтаксис я использовал до сих пор, как указано ниже,

<div class="well"> 
    <nav class="navbar navbar-default"> 
     <div class="status-bar"> 
      <div class="col-sm-3"> 
       <h5><a href="#" title="Name Element">Name</a></h5> 
        <h6> {Ford Company}</h6> 
      </div>     
     </div>       
    </nav> 
</div>

источник

2016-01-13 Mad-D

Я не уверен, разобравшись. Однако вот пример:

var app = angular.module('app', ['ui.bootstrap']); 
 

 
app.controller('MyCtrl', function ($scope, $rootScope) { 
 
    
 
    $scope.fields =  [{ 
 
     label: "Name", 
 
     value: "Ford Company" 
 
    },{ 
 
     label: "Status", 
 
     value: "Not approved" 
 
    },{ 
 
     label: "City", 
 
     value: "Dallas, Texas" 
 
    }]; 
 

 
    
 
});

.margin-10 { 
 
    margin: 10px; 
 
}

<html ng-app="app"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script> 
 
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div class="well" ng-controller="MyCtrl"> 
 
    <nav class="navbar navbar-default2"> 
 
     <div class="status-bar"> 
 
     <div class="row"> 
 
      <div class="col-sm-3 thumbnail text-center margin-10" ng-repeat="field in fields"> 
 
      <h5><a href="#" title="Name Element">{{field.label}}</a></h5> 
 
      <h6>{{field.value}}</h6> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </nav> 
 
    </div> 
 

 
</body> 
 

 
</html>

источник

2016-01-14 11:28:08 beaver

Если мы используем bootstrap.min.css, то какова цель импорта ui.bootstrap модуля? –

Вы правы, нет необходимости в модуле ui.bootstrap, если вы используете только CSS и никакой другой компонент JS на основе начальной загрузки. – beaver

Спасибо, Angualr выглядит весело. –

Привязать заголовок и данные на навигационной панели

ответ

Смежные вопросы