Bootstrap 3.3.2 所有样式
这里总结了 Bootstrap
中的所有样式（Class），用于快速查找及索引官方文档。
容器.container.container-fluid行.row列指定宽度及响应断点.col-xs-*
.col-lg-*指定缩进.col-xs-offset-*
.col-sm-offset-*
.col-md-offset-*
.col-lg-offset-*快速重排序（左右对调）# 推到右边
.col-xs-push-*
.col-sm-push-*
.col-md-push-*
.col-lg-push-*
# 拉到左边
.col-xs-pull-*
.col-sm-pull-*
.col-md-pull-*
.col-lg-pull-*重置.clearfix显示.visible-xs-*
.visible-sm-*
.visible-md-*
.visible-lg-** 可以为：Group of classesCSS display.visible-*-blockdisplay:.visible-*-inlinedisplay:.visible-*-inline-blockdisplay: inline-隐藏.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg打印.visible-print-block
.visible-print-inline
.visible-print-inline-block
.hidden-print
标题&h1&h1. Bootstrap heading&/h1&
&h2&h2. Bootstrap heading&/h2&
&h3&h3. Bootstrap heading&/h3&
&h4&h4. Bootstrap heading&/h4&
&h5&h5. Bootstrap heading&/h5&
&h6&h6. Bootstrap heading&/h6&副标题&small&&/small&
.small正文突出段落.lead
# 可以这样用
&p class="lead"&...&/p&标记文本&mark&
# 可以这样用:
You can use the mark tag to &mark&highlight&/mark& text.标记删除&del&
# 可以这样用:
&del&This line of text is meant to be treated as deleted text.&/del&
# 可以这样用:
&s&This line of text is meant to be treated as no longer accurate.&/s&标记插入&ins&
# 可以这样用:
&ins&This line of text is meant to be treated as an addition to the document.&/ins&下划文本&u&
# 可以这样用:
&u&This line of text will render as underlined&/u&弱化文本&small&&/small&# 或者.small强化文本&strong&rendered as bold text&/strong&倾斜文本&em&rendered as italicized text&/em&对齐&p class="text-left"&Left aligned text.&/p&
&p class="text-center"&Center aligned text.&/p&
&p class="text-right"&Right aligned text.&/p&
&p class="text-justify"&Justified text.&/p&
&p class="text-nowrap"&No wrap text.&/p&改变大小写&p class="text-lowercase"&Lowercased text.&/p&
&p class="text-uppercase"&Uppercased text.&/p&
&p class="text-capitalize"&Capitalized text.&/p&引用&blockquote&
&p&Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&/p&
&footer&Someone famous in &cite title="Source Title"&Source Title&/cite&&/footer&
&/blockquote&# 反转
.blockquote-reverse代码内联For example, &code&&section&&/code& should be wrapped as inline.键盘To switch directories, type &kbd&cd&/kbd& followed by the name of the directory.&br&
To edit settings, press &kbd&&kbd&ctrl&/kbd& + &kbd&,&/kbd&&/kbd&基本块&pre&&p&Sample text here...&/p&&/pre&滚动条.pre-scrollable变量&var&y&/var& = &var&m&/var&&var&x&/var& + &var&b&/var&样板&samp&This text is meant to be treated as sample output from a computer program.&/samp&属性颜色&p class="text-muted"&...&/p&
&p class="text-primary"&...&/p&
&p class="text-success"&...&/p&
&p class="text-info"&...&/p&
&p class="text-warning"&...&/p&
&p class="text-danger"&...&/p&纹理背景&p class="bg-primary"&...&/p&
&p class="bg-success"&...&/p&
&p class="bg-info"&...&/p&
&p class="bg-warning"&...&/p&
&p class="bg-danger"&...&/p&
有序、无序、无样式&ul&
&li&...&/li&
&li&...&/li&
&/ol&&ul class="list-unstyled"&
&li&...&/li&
&/ul&inline 显示（显示在一行上）&ul class="list-inline"&
&li&...&/li&
&/ul&介绍，垂直显示&dl&
&dt&...&/dt&
&dd&...&/dd&
&/dl&介绍，水平显示&dl class="dl-horizontal"&
&dt&...&/dt&
&dd&...&/dd&
普通&table class="table"&
&/table&纹理&table class="table table-striped"&
&/table&边框&table class="table table-bordered"&
&/table&鼠标划过&table class="table table-hover"&
&/table&密集&table class="table table-condensed"&
&/table&纹理类.activeApplies the hover color to a particular row or cell.successIndicates a successful or positive action.infoIndicates a neutral informative change or action.warningIndicates a warning that might need attention.dangerIndicates a dangerous or potentially negative action响应式&div class="table-responsive"&
&table class="table"&
普通表格&form role="form"&
&div class="form-group"&
&label for="exampleInputEmail1"&Email address&/label&
&input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"&
&div class="form-group"&
&label for="exampleInputPassword1"&Password&/label&
&input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"&
&div class="form-group"&
&label for="exampleInputFile"&File input&/label&
&input type="file" id="exampleInputFile"&
&p class="help-block"&Example block-level help text here.&/p&
&div class="checkbox"&
&input type="checkbox"& Check me out
&button type="submit" class="btn btn-default"&Submit&/button&
&/form&内联表格.form-inline&form class="form-inline" role="form"&
&div class="form-group"&
&div class="input-group"&
&label class="sr-only" for="exampleInputEmail2"&Email address&/label&
&div class="input-group-addon"&@&/div&
&input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"&
&div class="form-group"&
&label class="sr-only" for="exampleInputPassword2"&Password&/label&
&input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"&
&div class="checkbox"&
&input type="checkbox"& Remember me
&button type="submit" class="btn btn-default"&Sign in&/button&
&/form&水平表格&form class="form-horizontal" role="form"&
&div class="form-group"&
&label for="inputEmail3" class="col-sm-2 control-label"&Email&/label&
&div class="col-sm-10"&
&input type="email" class="form-control" id="inputEmail3" placeholder="Email"&
&div class="form-group"&
&label for="inputPassword3" class="col-sm-2 control-label"&Password&/label&
&div class="col-sm-10"&
&input type="password" class="form-control" id="inputPassword3" placeholder="Password"&
&div class="form-group"&
&div class="col-sm-offset-2 col-sm-10"&
&div class="checkbox"&
&input type="checkbox"& Remember me
&div class="form-group"&
&div class="col-sm-offset-2 col-sm-10"&
&button type="submit" class="btn btn-default"&Sign in&/button&
&/form&输入框类型支持text
datetime-local
color文本框&textarea class="form-control" rows="3"&&/textarea&单选、多选&div class="checkbox"&
&input type="checkbox" value=""&
Option one is this and that&be sure to include why it's great
&div class="checkbox disabled"&
&input type="checkbox" value="" disabled&
Option two is disabled
&div class="radio"&
&input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked&
Option one is this and that&be sure to include why it's great
&div class="radio"&
&input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"&
Option two can be something else and selecting it will deselect option one
&div class="radio disabled"&
&input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled&
Option three is disabled
&/div&内联单选、多选.checkbox-inline.radio-inline&label class="checkbox-inline"&
&input type="checkbox" id="inlineCheckbox1" value="option1"& 1
&label class="checkbox-inline"&
&input type="checkbox" id="inlineCheckbox2" value="option2"& 2
&label class="checkbox-inline"&
&input type="checkbox" id="inlineCheckbox3" value="option3"& 3
&label class="radio-inline"&
&input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"& 1
&label class="radio-inline"&
&input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"& 2
&label class="radio-inline"&
&input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"& 3
&/label&选择下拉框单选&select class="form-control"&
&option&1&/option&
&option&2&/option&
&option&3&/option&
&option&4&/option&
&option&5&/option&
&/select&多选&select multiple class="form-control"&
&option&1&/option&
&option&2&/option&
&option&3&/option&
&option&4&/option&
&option&5&/option&
&/select&静态控件.form-control-static&form class="form-horizontal" role="form"&
&div class="form-group"&
&label class="col-sm-2 control-label"&Email&/label&
&div class="col-sm-10"&
&p class="form-control-static"&&/p&
&div class="form-group"&
&label for="inputPassword" class="col-sm-2 control-label"&Password&/label&
&div class="col-sm-10"&
&input type="password" class="form-control" id="inputPassword" placeholder="Password"&
&/form&聚集状态:focus # js 设置获得焦点失效状态失效单个控件&input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled&失效控件集&form role="form"&
&fieldset disabled&
&div class="form-group"&
&label for="disabledTextInput"&Disabled input&/label&
&input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"&
&div class="form-group"&
&label for="disabledSelect"&Disabled select menu&/label&
&select id="disabledSelect" class="form-control"&
&option&Disabled select&/option&
&div class="checkbox"&
&input type="checkbox"& Can't check this
&button type="submit" class="btn btn-primary"&Submit&/button&
&/fieldset&
&/form&只读状态&input class="form-control" type="text" placeholder="Readonly input here…" readonly&有效性状态.has-warning.has-error.has-success有效性图标.has-feedback控制高度.input-sm
.input-lg控制宽度.form-group-lg.form-group-sm用列属性控制宽度&div class="row"&
&div class="col-xs-2"&
&input type="text" class="form-control" placeholder=".col-xs-2"&
&div class="col-xs-3"&
&input type="text" class="form-control" placeholder=".col-xs-3"&
&div class="col-xs-4"&
&input type="text" class="form-control" placeholder=".col-xs-4"&
&/div&帮助文档&label class="sr-only" for="inputHelpBlock"&Input with help text&/label&
&input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock"&
&span id="helpBlock" class="help-block"&A block of help text that breaks onto a new line and may extend beyond one line.&/span&
选项（影响颜色）.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-link高度.btn-lg.btn-sm.btn-xs宽度.btn-block活跃状态.active # 样式disabled # 属性
响应式.img-responsive&img src="..." class="img-responsive" alt="Responsive image"&形状&img src="..." alt="..." class="img-rounded"&
&img src="..." alt="..." class="img-circle"&
&img src="..." alt="..." class="img-thumbnail"&
关闭按钮&button type="button" class="close"&&span aria-hidden="true"&&&/span&&span class="sr-only"&Close&/span&&/button&下拉按钮&span class="caret"&&/span&快速浮动&div class="pull-left"&...&/div&
&div class="pull-right"&...&/div&居中内容块&div class="center-block"&...&/div&清除浮动属性&!-- Usage as a class --&
&div class="clearfix"&...&/div&隐藏及显示内容&div class="show"&...&/div&
&div class="hidden"&...&/div&屏幕阅读器及键盘导航内容&a class="sr-only sr-only-focusable" href="#content"&Skip to main content&/a&图片占用符&h1 class="text-hide"&Custom heading&/h1&
&span class="glyphicon glyphicon-search" aria-hidden="true"&&/span&Bootstrap3.0学习第十四轮：分页、徽章
本文主要来讲解以下内容：1.分页；2.徽章；3.总结。
为您的网站或应用提供多页的分页组件，或是用更简单的翻页替换。
发出了这个简单的分页，用在应用或搜索结果中超级棒。这个大块容易看见，容易缩放并有大块的点击区域。
激活和禁用状态
链接在不同情况下可以定制。给不能点击的链接用.disabled&并且用.active显示是当前页。
你还可以将active或disabled应用于标签，这样就可以让其保持需要的样式并移除点击功能。
你可以通过点击测试，看是否移除了点击功能。
想要更小或更大的分页？要得到更多尺寸，加上.pagination-lg或.pagination-sm吧。
看过本文的人还看过
最新图文推荐
最新专栏文章
大家感兴趣的内容
&&<a rel="nofollow" class="red" href="" target="_blank" color="red新版网站排行榜
===全新上线===
网友热评的文章Bootstrap（32）
本章将讲解 Bootstrap 徽章（Badges）。徽章与标签相&#20284;，主要的区别在于徽章的边角更加圆滑。
徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把&span class=&badge&&&添加到链接、Bootstrap 导航等这些元素上即可。
下面的实例演示了这点：
&code class=&hljs xml has-numbering& style=&display: padding: 0 color: box-sizing: border- font-family: &#39;Source Code Pro&#39;,font-size: white-space: border-radius: 0 word-wrap: background:&&&span class=&hljs-doctype& style=&color: rgb(102, 0, 102); box-sizing: border-&&&!DOCTYPE html&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&html&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&head&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&title&/span&&&/span&Bootstrap 实例 - 徽章（Badges）&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&title&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&link&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&href&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&/bootstrap/css/bootstrap.min.css&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&rel&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&stylesheet&&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&script&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&src&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&/scripts/jquery.min.js&&/span&&&/span&&span class=&javascript& style=&box-sizing: border-&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&script&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&script&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&src&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&/bootstrap/js/bootstrap.min.js&&/span&&&/span&&span class=&javascript& style=&box-sizing: border-&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&script&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&head&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&body&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&a&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&href&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&#&&/span&&&/span&Mailbox &span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&span&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&badge&&/span&&&/span&50&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&span&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&a&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&body&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&html&/span&&&/span&&/code&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right-width: 1 border-right-style: border-right-color: rgb(221, 221, 221); list-style: text-align: background-color: rgb(238, 238, 238);&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&li style=&box-sizing: border- padding: 0px 5&&4&/li&&li style=&box-sizing: border- padding: 0px 5&&5&/li&&li style=&box-sizing: border- padding: 0px 5&&6&/li&&li style=&box-sizing: border- padding: 0px 5&&7&/li&&li style=&box-sizing: border- padding: 0px 5&&8&/li&&li style=&box-sizing: border- padding: 0px 5&&9&/li&&li style=&box-sizing: border- padding: 0px 5&&10&/li&&li style=&box-sizing: border- padding: 0px 5&&11&/li&&li style=&box-sizing: border- padding: 0px 5&&12&/li&&li style=&box-sizing: border- padding: 0px 5&&13&/li&&li style=&box-sizing: border- padding: 0px 5&&14&/li&&/ul&
结果如下所示：&
当没有新的或未读的项时，通过 CSS 的 :empty 选择器，徽章会折叠起来，表示里边没有内容。
激活导航状态
您可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用&span class=&badge&&&来激活链接，如下面的实例所示：
&code class=&hljs xml has-numbering& style=&display: padding: 0 color: box-sizing: border- font-family: &#39;Source Code Pro&#39;,font-size: white-space: border-radius: 0 word-wrap: background:&&&span class=&hljs-doctype& style=&color: rgb(102, 0, 102); box-sizing: border-&&&!DOCTYPE html&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&html&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&head&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&title&/span&&&/span&Bootstrap 实例 - 激活导航状态&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&title&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&link&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&href&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&/bootstrap/css/bootstrap.min.css&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&rel&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&stylesheet&&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&script&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&src&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&/scripts/jquery.min.js&&/span&&&/span&&span class=&javascript& style=&box-sizing: border-&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&script&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&script&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&src&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&/bootstrap/js/bootstrap.min.js&&/span&&&/span&&span class=&javascript& style=&box-sizing: border-&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&script&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&head&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&body&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&h4&/span&&&/span&胶囊式导航中的激活状态&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&h4&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&ul&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&nav nav-pills&&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&li&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&active&&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&a&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&href&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&#&&/span&&&/span&首页 &span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&span&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&badge&&/span&&&/span&42&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&span&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&a&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&li&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&li&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&a&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&href&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&#&&/span&&&/span&简介&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&a&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&li&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&li&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&a&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&href&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&#&&/span&&&/span&消息 &span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&span&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&badge&&/span&&&/span&3&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&span&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&a&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&li&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&ul&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&br&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&h4&/span&&&/span&列表导航中的激活状态&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&h4&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&ul&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&nav nav-pills nav-stacked&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&style&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&max-width: 260&&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&li&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&active&&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&a&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&href&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&#&&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&span&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&badge pull-right&&/span&&&/span&42&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&span&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&a&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&li&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&li&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&a&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&href&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&#&&/span&&&/span&简介&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&a&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&li&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&li&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&a&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&href&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&#&&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&span&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&badge pull-right&&/span&&&/span&3&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&span&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&a&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&li&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&ul&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&body&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&html&/span&&&/span&&/code&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right-width: 1 border-right-style: border-right-color: rgb(221, 221, 221); list-style: text-align: background-color: rgb(238, 238, 238);&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&li style=&box-sizing: border- padding: 0px 5&&4&/li&&li style=&box-sizing: border- padding: 0px 5&&5&/li&&li style=&box-sizing: border- padding: 0px 5&&6&/li&&li style=&box-sizing: border- padding: 0px 5&&7&/li&&li style=&box-sizing: border- padding: 0px 5&&8&/li&&li style=&box-sizing: border- padding: 0px 5&&9&/li&&li style=&box-sizing: border- padding: 0px 5&&10&/li&&li style=&box-sizing: border- padding: 0px 5&&11&/li&&li style=&box-sizing: border- padding: 0px 5&&12&/li&&li style=&box-sizing: border- padding: 0px 5&&13&/li&&li style=&box-sizing: border- padding: 0px 5&&14&/li&&li style=&box-sizing: border- padding: 0px 5&&15&/li&&li style=&box-sizing: border- padding: 0px 5&&16&/li&&li style=&box-sizing: border- padding: 0px 5&&17&/li&&li style=&box-sizing: border- padding: 0px 5&&18&/li&&li style=&box-sizing: border- padding: 0px 5&&19&/li&&li style=&box-sizing: border- padding: 0px 5&&20&/li&&li style=&box-sizing: border- padding: 0px 5&&21&/li&&li style=&box-sizing: border- padding: 0px 5&&22&/li&&li style=&box-sizing: border- padding: 0px 5&&23&/li&&li style=&box-sizing: border- padding: 0px 5&&24&/li&&li style=&box-sizing: border- padding: 0px 5&&25&/li&&li style=&box-sizing: border- padding: 0px 5&&26&/li&&li style=&box-sizing: border- padding: 0px 5&&27&/li&&li style=&box-sizing: border- padding: 0px 5&&28&/li&&li style=&box-sizing: border- padding: 0px 5&&29&/li&&li style=&box-sizing: border- padding: 0px 5&&30&/li&&li style=&box-sizing: border- padding: 0px 5&&31&/li&&li style=&box-sizing: border- padding: 0px 5&&32&/li&&li style=&box-sizing: border- padding: 0px 5&&33&/li&&li style=&box-sizing: border- padding: 0px 5&&34&/li&&li style=&box-sizing: border- padding: 0px 5&&35&/li&&li style=&box-sizing: border- padding: 0px 5&&36&/li&&/ul&
结果如下所示：&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：198883次
积分：4339
积分：4339
排名：第5330名
原创：153篇
转载：548篇
评论：13条
细节决定成败，
态度决定一切。
文章：32篇
阅读：8663
(1)(3)(6)(2)(24)(32)(31)(1)(6)(108)(7)(25)(232)(65)(12)(2)(2)(6)(2)(4)(21)(120)