twitter-bootstrap angular.ui 引导程序中的 CSS 样式选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27851084/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Styling tabs in angular.ui bootstrap
提问by Sam Stickland
I'm in the process of moving a site to AngularJS. The original site uses Bootstrap and I was hoping to use Angular.ui bootstrap to keep the Bootstrap elements. However, I'm having some problems with working out how to apply CSS styles to tabs using Angular.ui bootstrap.
我正在将网站迁移到 AngularJS。原始站点使用 Bootstrap，我希望使用 Angular.ui bootstrap 来保留 Bootstrap 元素。但是，我在研究如何使用 Angular.ui 引导程序将 CSS 样式应用于选项卡时遇到了一些问题。
The original HTML looks like this:
原始 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>
This results in a tab pane running across the width of the page, with two centred tabs, and all the content in the tabs in centred.
这会导致选项卡窗格横穿整个页面的宽度，带有两个居中的选项卡，并且选项卡中的所有内容都居中。
With Angular.ui the code uses directives, and is much cleaner looking, but I can't get it to apply CSS styles that relate to centring.
使用 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>
How should I be applying the CSS classes to the Angular Directives?
我应该如何将 CSS 类应用于 Angular 指令？
回答by benri
You apply the CSS the same way you apply them normally:
您应用 CSS 的方式与通常应用它们的方式相同：
.nav-tabs {
/* custom styling */
}
Because angular compiles the directives after the fact, I use the browser's Inspector to see the classes: (from http://angular-ui.github.io/bootstrap/#/tabs)
因为 angular 在事后编译指令，所以我使用浏览器的 Inspector 查看类：（来自http://angular-ui.github.io/bootstrap/#/tabs）
<tabset><tab>compiles into:
<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 also has verticaland justifiedoptions, if that's what you're looking for
tabset 也有vertical和justified选项，如果这就是你要找的
回答by add-Naan
if you use the code below it will save you some time, and it compiles to the same ul>li>a format and to answer the question about style in the css file add ul li a {font-size:x-large;} of course you need a tab controller and a list of titles and html pages to include in the tabs
如果您使用下面的代码，它将为您节省一些时间，它会编译为相同的 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>
