angular.ui引导中的CSS样式选项卡

Question

我正在将网站移动到AngularJS。原始站点使用Bootstrap，我希望使用Angular.ui bootstrap来保留Bootstrap元素。但是，我在使用Angular.ui bootstrap解决如何将CSS样式应用到选项卡时遇到了一些问题。

原始的HTML看起来像这样：

<div class="container-fluid"> 
    <div class="row"> 
    <!-- Nav tabs --> 
    <ul class="nav nav-tabs central"> 
     <li class="active"><a href="#tab-one" data-toggle="tab">Tab One</a></li> 
     <li><a href="#tab-two" data-toggle="tab">Tab Two</a></li> 
    </ul> 
    </div> 
</div> 
<!-- Tab panes --> 
<div class="container"> 
    <div class="row tab-content central"> 
    <div class="tab-pane fade in active col-lg-12" id="tab-one"> 
     <div class="row features animated fadeInLeft"> 
     <div class="col-lg-4 col-md-4 col-sm-4"> 
      <div class="feature-img"><img src="/assets/feature1.png" width="124" height="120"/></div> 
      <h3>Some explanation</h3> 
      <p>Some text.</p> 
     </div> 
     <div class="col-lg-4 col-md-4 col-sm-4"> 
      <div class="feature-img"><img src="/assets/feature2.png" width="131" height="131"/></div> 
      <h3>Some more explanation</h3> 
      <p>Some more text.</p> 
     </div> 
     </div> 
    </div> 
    <div class="tab-pane fade col-lg-12" id="for-contractors"> 
     <div class="row features animated fadeInRight"> 
     <div class="col-lg-4 col-md-4 col-sm-4"> 
      <div class="feature-img"><img src="/assets/feature1.png" width="124" height="120" alt="What we do"/></div> 
      <h3>Some explanation 2</h3> 
      <p>Some text 2.</p> 
      </div> 
      <div class="col-lg-4 col-md-4 col-sm-4"> 
      <div class="feature-img"><img src="/assets/feature2.png" width="131" height="131" alt="Our mission"/></div> 
      <h3>Some more explanation 2</h3> 
      <p>Some more text 2.</p> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

这导致标签窗格中运行整个页面宽度，两个中心的标签，并集中在标签的所有内容。

使用Angular.ui代码使用指令，并且看起来更清晰，但我无法得到它应用与居中有关的CSS样式。

<div class="contained-fluid"> 
    <div class="row central"> 
    <tabset> 
     <tab> 
     <tab-heading>Tab One</tab-heading> 
     <div class="col-lg-4 col-md-4 col-sm-4"> 
      <div class="feature-img"><img src="/assets/feature1.png" width="124" height="120"></div> 
      <h3>Some explanation</h3> 
      <p>Some text.</p> 
     </div> 
     <div class="col-lg-4 col-md-4 col-sm-4"> 
      <div class="feature-img"><img src="/assets/feature2.png" width="131" height="131"/></div> 
      <h3>Some more explanation</h3> 
      <p>Some more text.</p> 
     </div> 
     </tab> 
     <tab heading="Tab Two"> 
      <div class="row tab-content central"> 
      For Contractors 
      </div> 
     </tab> 
     <div class="col-lg-4 col-md-4 col-sm-4"> 
      <div class="feature-img"><img src="/assets/feature1.png" width="124" height="120" alt="What we do"/></div> 
      <h3>Some explanation 2</h3> 
      <p>Some text 2.</p> 
      </div> 
      <div class="col-lg-4 col-md-4 col-sm-4"> 
      <div class="feature-img"><img src="/assets/feature2.png" width="131" height="131" alt="Our mission"/></div> 
      <h3>Some more explanation 2</h3> 
      <p>Some more text 2.</p> 
      </div> 
     </tabset> 
    </div> 
    </div> 

我应该如何将CSS类应用到Angular指令？

Answer 1

您应用CSS以同样的方式应用它们通常：

.nav-tabs { 
    /* custom styling */ 
} 

由于角度事后编译指令，我使用浏览器的检查，看看类： （从http://angular-ui.github.io/bootstrap/#/tabs）

<tabset><tab>编译成：

<ul class="nav nav-tabs" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude=""> 
    <li ng-class="{active: active, disabled: disabled}" heading="Static title" class="ng-isolate-scope active"> 
     <a href="" ng-click="select()" tab-heading-transclude="" class="ng-binding">Static title</a> 
    </li> 
    ... 

标签集也有vertical和justified选项，如果这就是你想要的

Answer 2

如果你使用下面的代码它会为你节省一些时间，它编译为相同的ul> li>格式 并回答有关样式的问题CSS文件中添加 UL李一{字体大小：X-大;}当然 你需要一个选项卡控制器和标题和HTML页面的列表中的标签

<div data-ng-controller="TabCtrl" class="col-md-12"> 
    <tabset id="tabs1"> 
     <tab data-ng-repeat="tab in tabs" heading="{{tab.title}}" > 
      <div data-ng-model="tab" data-ng-click="isSelected($index)" data-ng-change="update()"> 
       <div ng-include="tab.url">      
       </div>        
      </div>       
     </tab> 
    </tabset> 
</div>