CSS angular.ui bootstrap 中的样式选项卡

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 */
}

因为angular是事后编译指令，所以我使用浏览器的Inspector查看类：（来自 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>
    ...

tabset 也有 vertical 和 justified 选项，如果这正是您要找的

Answer 2

如果你使用下面的代码，它会节省你一些时间，而且它会编译成相同的 ul>li>a 格式并在 css 文件中回答有关样式的问题添加 ul li a {font-size:x-large;} 当然，您需要一个选项卡控制器和一个标题列表以及要包含在选项卡中的 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>

CSS angular.ui bootstrap 中的样式选项卡

CSS Styling tabs in angular.ui bootstrap

css

tabs

twitter-bootstrap

angularjs