bootstrap-select怎么用？bootstrap-select使用方法举例介绍
bootstrap-select怎么用?今天小编整理一篇bootstrap-select使用方法举例介绍的文章和大家分享，希望能给大家提供帮助。
文章以bootstrap-select-1.12.1版本举例。
1.下载压缩包，下载地址：
2.解压后找到 bootstrap-select.min.css， bootstrap-select.min.js，i18n文件夹复制到自己的项目中,因为是基于jQuery所有要另外导入Jquery.js。
bootstrap-select使用举例：
&!DOCTYPE&html& &&html& &&head& &&&&title&Bootstrap-select&test&page&/title& &&&&&meta&charset=&utf-8&& &&&&&link&rel=&stylesheet&&href=&/bootstrap/3.3.4/css/bootstrap.min.css&& &&&&link&rel=&stylesheet&&href=&dist/css/bootstrap-select.css&& &&&&&style& &&&&&body&{ &&&&&&&padding-top:&70 &&&&&} &&&&/style& &&&&&script&src=&/ajax/libs/jquery/1.11.3/jquery.min.js&&&/script& &&&&script&src=&/bootstrap/3.3.4/js/bootstrap.min.js&&&/script& &&&&script&src=&dist/js/bootstrap-select.js&&&/script& &&/head& &&body& &&nav&class=&navbar&navbar-default&navbar-fixed-top&&role=&navigation&& &&&&div&class=&container&& &&&&&&div&class=&navbar-header&& &&&&&&&&a&class=&navbar-brand&&href=&#&&Bootstrap-select&usability&tests&/a& &&&&&&/div& &&&&/div& &&/nav& &&&div&class=&container&& &&&&form&class=&form-horizontal&&role=&form&& &&&&&&div&class=&form-group&& &&&&&&&&label&for=&basic&&class=&col-lg-2&control-label&&&Basic&&(liveSearch&disabled)&/label& &&&&&&&&&div&class=&col-lg-10&& &&&&&&&&&&select&id=&basic&&class=&selectpicker&show-tick&form-control&& &&&&&&&&&&&&option&cow&/option& &&&&&&&&&&&&option&data-subtext=&option&subtext&&bull&/option& &&&&&&&&&&&&option&class=&get-class&&disabled&ox&/option& &&&&&&&&&&&&optgroup&label=&test&&data-subtext=&optgroup&subtext&& &&&&&&&&&&&&&&option&ASD&/option& &&&&&&&&&&&&&&option&selected&Bla&/option& &&&&&&&&&&&&&&option&Ble&/option& &&&&&&&&&&&&/optgroup& &&&&&&&&&&/select& &&&&&&&&/div& &&&&&&/div& &&&&/form& &&&&&hr& &&&&&form&class=&form-horizontal&&role=&form&& &&&&&&div&class=&form-group&& &&&&&&&&label&for=&basic&&class=&col-lg-2&control-label&&&Basic&&(liveSearch&enabled)&/label& &&&&&&&&&div&class=&col-lg-10&& &&&&&&&&&&select&id=&basic&&class=&selectpicker&show-tick&form-control&&data-live-search=&true&& &&&&&&&&&&&&option&cow&/option& &&&&&&&&&&&&option&data-subtext=&option&subtext&&bull&/option& &&&&&&&&&&&&option&class=&get-class&&disabled&ox&/option& &&&&&&&&&&&&optgroup&label=&test&&data-subtext=&optgroup&subtext&& &&&&&&&&&&&&&&option&ASD&/option& &&&&&&&&&&&&&&option&selected&Bla&/option& &&&&&&&&&&&&&&option&Ble&/option& &&&&&&&&&&&&/optgroup& &&&&&&&&&&/select& &&&&&&&&/div& &&&&&&/div& &&&&/form& &&&&&hr& &&&&form&class=&form-horizontal&&role=&form&& &&&&&&div&class=&form-group&& &&&&&&&&label&for=&basic2&&class=&col-lg-2&control-label&&&Basic&&(multiple,&maxOptions=1)&/label& &&&&&&&&&div&class=&col-lg-10&& &&&&&&&&&&select&id=&basic2&&class=&show-tick&form-control&&multiple& &&&&&&&&&&&&option&cow&/option& &&&&&&&&&&&&option&bull&/option& &&&&&&&&&&&&option&class=&get-class&&disabled&ox&/option& &&&&&&&&&&&&optgroup&label=&test&&data-subtext=&another&test&& &&&&&&&&&&&&&&option&ASD&/option& &&&&&&&&&&&&&&option&selected&Bla&/option& &&&&&&&&&&&&&&option&Ble&/option& &&&&&&&&&&&&/optgroup& &&&&&&&&&&/select& &&&&&&&&/div& &&&&&&/div& &&&&/form& &&&&&hr& &&&&form&class=&form-horizontal&&role=&form&& &&&&&&div&class=&form-group&& &&&&&&&&label&for=&maxOption2&&class=&col-lg-2&control-label&&multiple,&show-menu-arrow,&maxOptions=2&/label& &&&&&&&&&div&class=&col-lg-10&& &&&&&&&&&&select&id=&maxOption2&&class=&selectpicker&show-menu-arrow&form-control&&multiple&data-max-options=&2&& &&&&&&&&&&&&option&chicken&/option& &&&&&&&&&&&&option&turkey&/option& &&&&&&&&&&&&option&disabled&duck&/option& &&&&&&&&&&&&option&goose&/option& &&&&&&&&&&/select& &&&&&&&&/div& &&&&&&/div& &&&&/form& &&&&&hr& &&&&form&class=&form-inline&& &&&&&&div&class=&form-group&& &&&&&&&&label&class=&col-md-1&control-label&&for=&lunch&&Lunch:&/label& &&&&&&/div& &&&&&&div&class=&form-group&& &&&&&&&&select&id=&lunch&&class=&selectpicker&&data-live-search=&true&&title=&Please&select&a&lunch&...&& &&&&&&&&&&option&Hot&Dog,&Fries&and&a&Soda&/option& &&&&&&&&&&option&Burger,&Shake&and&a&Smile&/option& &&&&&&&&&&option&Sugar,&Spice&and&all&things&nice&/option& &&&&&&&&&&option&Baby&Back&Ribs&/option& &&&&&&&&&&option&A&really&really&long&option&made&to&illustrate&an&issue&with&the&live&search&in&an&inline&form&/option& &&&&&&&&/select& &&&&&&/div& &&&&/form& &&&&&hr& &&&&form&class=&form-horizontal&&role=&form&& &&&&&&div&class=&form-group&form-group-lg&& &&&&&&&&label&for=&error&&class=&col-lg-2&control-label&&error&/label& &&&&&&&&&div&class=&col-lg-10&error&& &&&&&&&&&&select&id=&error&&class=&selectpicker&show-tick&form-control&& &&&&&&&&&&&&option&pen&/option& &&&&&&&&&&&&option&pencil&/option& &&&&&&&&&&&&option&selected&brush&/option& &&&&&&&&&&/select& &&&&&&&&/div& &&&&&&/div& &&&&/form& &&&&&hr& &&&&form&class=&form-horizontal&&role=&form&& &&&&&&div&class=&form-group&has-error&form-group-lg&& &&&&&&&&label&class=&control-label&col-lg-2&&for=&country&&error&type&2&/label& &&&&&&&&&div&class=&col-lg-10&& &&&&&&&&&&select&id=&country&&name=&country&&class=&form-control&selectpicker&& &&&&&&&&&&&&option&Argentina&/option& &&&&&&&&&&&&option&United&State&/option& &&&&&&&&&&&&option&Mexico&/option& &&&&&&&&&&/select& &&&&&&&&&&&p&class=&help-block&&No&service&available&in&the&selected&country&/p& &&&&&&&&/div& &&&&&&/div& &&&&/form& &&&&&hr& &&&&nav&class=&navbar&navbar-default&&role=&navigation&& &&&&&&div&class=&container-fluid&& &&&&&&&&div&class=&navbar-header&& &&&&&&&&&&a&class=&navbar-brand&&href=&#&&Navbar&/a& &&&&&&&&/div& &&&&&&&&&form&class=&navbar-form&navbar-left&&role=&search&& &&&&&&&&&&div&class=&form-group&& &&&&&&&&&&&&select&class=&selectpicker&&multiple&data-live-search=&true&&data-live-search-placeholder=&Search&&data-actions-box=&true&& &&&&&&&&&&&&&&optgroup&label=&filter1&& &&&&&&&&&&&&&&&&option&option1&/option& &&&&&&&&&&&&&&&&option&option2&/option& &&&&&&&&&&&&&&&&option&option3&/option& &&&&&&&&&&&&&&&&option&option4&/option& &&&&&&&&&&&&&&/optgroup& &&&&&&&&&&&&&&optgroup&label=&filter2&& &&&&&&&&&&&&&&&&option&option1&/option& &&&&&&&&&&&&&&&&option&option2&/option& &&&&&&&&&&&&&&&&option&option3&/option& &&&&&&&&&&&&&&&&option&option4&/option& &&&&&&&&&&&&&&/optgroup& &&&&&&&&&&&&&&optgroup&label=&filter3&& &&&&&&&&&&&&&&&&option&option1&/option& &&&&&&&&&&&&&&&&option&option2&/option& &&&&&&&&&&&&&&&&option&option3&/option& &&&&&&&&&&&&&&&&option&option4&/option& &&&&&&&&&&&&&&/optgroup& &&&&&&&&&&&&/select& &&&&&&&&&&/div& &&&&&&&&&&&div&class=&input-group&& &&&&&&&&&&&&input&type=&text&&class=&form-control&&placeholder=&Search&&name=&q&& &&&&&&&&&&&&&div&class=&input-group-btn&& &&&&&&&&&&&&&&button&class=&btn&btn-default&&type=&submit&&&i&class=&glyphicon&glyphicon-search&&&/i&&/button& &&&&&&&&&&&&/div& &&&&&&&&&&/div& &&&&&&&&&&button&type=&submit&&class=&btn&btn-default&&Search&/button& &&&&&&&&/form& &&&&&&&/div& &&&&&&!--&.container-fluid&--& &&&&/nav& &&&&&hr& &&&&select&id=&first-disabled&&class=&selectpicker&&data-hide-disabled=&true&&data-live-search=&true&& &&&&&&optgroup&disabled=&disabled&&label=&disabled&& &&&&&&&&option&Hidden&/option& &&&&&&/optgroup& &&&&&&optgroup&label=&Fruit&& &&&&&&&&option&Apple&/option& &&&&&&&&option&Orange&/option& &&&&&&/optgroup& &&&&&&optgroup&label=&Vegetable&& &&&&&&&&option&Corn&/option& &&&&&&&&option&Carrot&/option& &&&&&&/optgroup& &&&&/select& &&&&&hr& &&&&select&id=&first-disabled2&&class=&selectpicker&&multiple&data-hide-disabled=&true&&data-size=&5&& &&&&&&option&Apple&/option& &&&&&&option&Banana&/option& &&&&&&option&Orange&/option& &&&&&&option&Pineapple&/option& &&&&&&option&Apple2&/option& &&&&&&option&Banana2&/option& &&&&&&option&Orange2&/option& &&&&&&option&Pineapple2&/option& &&&&&&option&Apple2&/option& &&&&&&option&Banana2&/option& &&&&&&option&Orange2&/option& &&&&&&option&Pineapple2&/option& &&&&/select& &&&&button&id=&special&&class=&btn&btn-default&&Hide&selected&by&disabling&/button& &&&&button&id=&special2&&class=&btn&btn-default&&Reset&/button& &&&&p&Just&select&1st&element,&click&button&and&check&list&again&/p& &&&&&hr& &&&&div&class=&input-group&& &&&&&&span&class=&input-group-addon&&@&/span& &&&&&&select&class=&form-control&selectpicker&& &&&&&&&&option&One&/option& &&&&&&&&option&Two&/option& &&&&&&&&option&Three&/option& &&&&&&/select& &&&&/div& &&&&&hr& &&&&div&class=&input-group&& &&&&&&span&class=&input-group-addon&&@&/span& &&&&&&select&class=&form-control&selectpicker&&data-mobile=&true&& &&&&&&&&option&One&/option& &&&&&&&&option&Two&/option& &&&&&&&&option&Three&/option& &&&&&&/select& &&&&/div& &&&&p&With&&code&data-mobile=&true&&/code&&option.&/p& &&&&&hr& &&&&select&id=&done&&class=&selectpicker&&multiple&data-done-button=&true&& &&&&&&option&Apple&/option& &&&&&&option&Banana&/option& &&&&&&option&Orange&/option& &&&&&&option&Pineapple&/option& &&&&&&option&Apple2&/option& &&&&&&option&Banana2&/option& &&&&&&option&Orange2&/option& &&&&&&option&Pineapple2&/option& &&&&&&option&Apple2&/option& &&&&&&option&Banana2&/option& &&&&&&option&Orange2&/option& &&&&&&option&Pineapple2&/option& &&&&/select& &&&&&hr& &&&&select&id=&tokens&&class=&selectpicker&&multiple&data-live-search=&true&& &&&&&&option&data-tokens=&first&&I&actually&am&called&&first&&/option& &&&&&&option&data-tokens=&second&&And&me&&second&&/option& &&&&&&option&data-tokens=&last&&I&am&&last&&/option& &&&&/select& &&&&&hr& &&&&form&class=&form-inline&& &&&&&&div&class=&form-group&& &&&&&&&&label&class=&col-md-1&control-label&&for=&lunchBegins&&Lunch&(Begins&search):&/label& &&&&&&/div& &&&&&&div&class=&form-group&& &&&&&&&&select&id=&lunchBegins&&class=&selectpicker&&data-live-search=&true&&data-live-search-style=&begins&&title=&Please&select&a&lunch&...&& &&&&&&&&&&option&Hot&Dog,&Fries&and&a&Soda&/option& &&&&&&&&&&option&Burger,&Shake&and&a&Smile&/option& &&&&&&&&&&option&Sugar,&Spice&and&all&things&nice&/option& &&&&&&&&&&option&Baby&Back&Ribs&/option& &&&&&&&&&&option&A&really&really&long&option&made&to&illustrate&an&issue&with&the&live&search&in&an&inline&form&/option& &&&&&&&&/select& &&&&&&/div& &&&&/form& &&/div& &&&script& &&&$(document).ready(function&()&{ &&&&&var&mySelect&=&$('#first-disabled2'); &&&&&&$('#special').on('click',&function&()&{ &&&&&&&mySelect.find('option:selected').prop('disabled',&true); &&&&&&&mySelect.selectpicker('refresh'); &&&&&}); &&&&&&$('#special2').on('click',&function&()&{ &&&&&&&mySelect.find('option:disabled').prop('disabled',&false); &&&&&&&mySelect.selectpicker('refresh'); &&&&&}); &&&&&&$('#basic2').selectpicker({ &&&&&&&liveSearch:&true, &&&&&&&maxOptions:&1 &&&&&}); &&&}); &&/script& &&/body& &&/html& &
bootstrap-select使用方法举例介绍的文章和大家分享完毕，感谢阅读!
(责任编辑：大卫)
------分隔线----------------------------
本站所有软件和资料均为软件作者提供和网友推荐收集整理而来，仅供学习和研究使用。如有侵权，请联系站长QQ:
Copyright (C) g下载网().All Rights Reserved
黔ICP备号-2bootstrap&常用类名
一、 常用类
1、container
居中的内容展示
2、row& 行内容显示
3、col 列内容显示， 列必须在row 中
xs 宽度小于768 ，sm宽度小于990 大于768 ,md 宽度大于990，小于1200，
lg宽度大于1200
col-xs-4 代表 小屏下显示为4列，
col-xs-4 col-md-2& 代表小屏下占4列，大屏下占2列
&&/span&div class="container"&
&&/span&h1&Hello, world!&/&/span&h1&
&&/span&div class="row"&
&&/span&div class="col-xs-4"&
&&/span&h2 class="page-header"&区域一&/&/span&h2&
&&/span&p&Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.&/&/span&p&
&/&/span&div&
&&/span&div class="col-xs-4"&
&&/span&h2 class="page-header"&区域二&/&/span&h2&
&&/span&p&If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.&/&/span&p&
&/&/span&div&
&&/span&div class="col-xs-4"&
&&/span&h2 class="page-header"&区域三&/&/span&h2&
&&/span&p&Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.&/&/span&p&
&/&/span&div&
&/&/span&div&
&/&/span&div&\
4、h1-H6& 排版
5、pageHeader
6、small 小一号的深灰色 ，用作副标题。
7、lead& 处理一个段落的文字，让其显示效果显著。
8、文字class
&&/span&h1&强调Class&/&/span&h1&
&&/span&p class="text-muted"&Maecenas sed diam eget risus varius blandit sit amet non magna.&/&/span&p&
&&/span&p class="text-primary"&Maecenas sed diam eget risus varius blandit sit amet non magna.&/&/span&p&
&&/span&p class="text-success"&.Maecenas sed diam eget risus varius blandit sit amet non magna.&/&/span&p&
&&/span&p class="text-info"&Maecenas sed diam eget risus varius blandit sit amet non magna..&/&/span&p&
&&/span&p class="text-warning"&Maecenas sed diam eget risus varius blandit sit amet non magna..&/&/span&p&
&&/span&p class="text-danger"&.Maecenas sed diam eget risus varius blandit sit amet non magna.&/&/span&p&
&&/span&h1&&/&/span&h1&
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/f55fca74e.png" STYLE="max-width:690" NAME="image_operate_8035" HEIGHT="268" WIDTH="622"
ALT="bootstrap&常用类名"
TITLE="bootstrap&常用类名" />
9、list-unstyled& 无样式的列表
10、list-inline 横向水平列表
11、table 基本使用一致。table-hover 某行鼠标变色；table-condensed 表格紧缩，实际padding减半。
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/b918e4f2004bef951bd887bf938203.png" STYLE="max-width:690" NAME="image_operate_84193" HEIGHT="205" WIDTH="462"
ALT="bootstrap&常用类名"
TITLE="bootstrap&常用类名" />
.table包裹在.table-responsive中即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失。
&&/span&form role="form"&
&&/span&div class="form-group"&
&&/span&label for="exampleInputEmail1"&Email address&/&/span&label&
&&/span&input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"&
&/&/span&div&
&&/span&div class="form-group"&
&&/span&label for="exampleInputPassword1"&Password&/&/span&label&
&&/span&input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"&
&/&/span&div&
&&/span&div class="form-group"&
&&/span&label for="exampleInputFile"&File input&/&/span&label&
&&/span&input type="file" id="exampleInputFile"&
&&/span&p class="help-block"&Example block-level help text here.&/&/span&p&
&/&/span&div&
&&/span&div class="checkbox"&
&&/span&label&
&&/span&input type="checkbox"& Check me out
&/&/span&label&
&/&/span&div&
&&/span&button type="submit" class="btn btn-default"&Submit&/&/span&button&
&/&/span&form&
class="form-inline"&& 将表单内容横向紧缩排列 。
input& class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled&& 设为不可用。
Bootstrap对表单控件的校验状态，如error、warning和success状态，都定义了样式。使用时，添加.has-warning、.has-error或.has-success到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control和.help-block都将接受这些校验状态的样式。
div class="form-group has-success"&
class="control-label" for="inputSuccess"&Input with success
"text" class="form-control" id="inputSuccess"&
class="form-group
has-warning"&
class="control-label"
for="inputWarning"&Input
with warning "text"
class="form-control"
id="inputWarning"&
class="form-group
has-error"&
class="control-label"
for="inputError"&Input
with error "text"
class="form-control"
id="inputError"&
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/af7d8d21246aea057165cde8d6f08.png" STYLE="max-width:690" NAME="image_operate_30856" HEIGHT="243" WIDTH="648"
ALT="bootstrap&常用类名"
TITLE="bootstrap&常用类名" />
btn-lg、.btn-sm、.btn-xs&& 大中小三种按钮尺寸
active& 激活状态
disabled="disabled"& 不可用状态button type="button" class="close" aria-hidden="true"&&span class="caret"&
class="center-block"&& 居中并 display:block
class="clearfix" & 清除浮动
14 img <img STYLE="color: #800000;"
ALT="bootstrap&常用类名"
TITLE="bootstrap&常用类名" />"http://placehold.it/150x150" alt="..." class="img-rounded"&
<img STYLE="color: #800000;"
ALT="bootstrap&常用类名"
TITLE="bootstrap&常用类名" />"http://placehold.it/150x150" alt="..." class="img-circle"&
<img STYLE="color: #800000;"
ALT="bootstrap&常用类名"
TITLE="bootstrap&常用类名" />"http://placehold.it/150x150" alt="..." class="img-thumbnail
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/-bea6510fecb24d73a13f94dc243474fe.png" STYLE="max-width:690" NAME="image_operate_89801" HEIGHT="164" WIDTH="480"
ALT="bootstrap&常用类名"
TITLE="bootstrap&常用类名" />
img src="..." class="img-responsive" alt="Responsive image"为图片赋予了max-width: 100%;和height:属性，可以让图片按比例缩放，不超过其父元素的尺寸
通过单独或联合使用以下列出的class，可以针对不同屏幕尺寸隐藏或显示页面内容。
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/ced947ecc705f1283906.png" STYLE="max-width:690" NAME="image_operate_14464" HEIGHT="286" WIDTH="690"
ALT="bootstrap&常用类名"
TITLE="bootstrap&常用类名" />
和常规的响应式class一样，使用下面的class可以针对打印机隐藏或显示某些内容。
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/e6bac6fcd.png" ALT="" NAME="image_operate_21384"
TITLE="bootstrap&常用类名" />
15& 下拉菜单& dropdown
class="dropdown"& class="btn
dropdown-toggle"
type="button" id="dropdownMenu1" data-toggle="dropdown"& Dropdown class="caret"&
class="dropdown-menu" role="menu"
aria-labelledby="dropdownMenu1"&
"presentation"&"menuitem" tabindex="-1"
href="#"&Action
"presentation"&"menuitem" tabindex="-1"
href="#"&Another action
"presentation"&"menuitem" tabindex="-1"
href="#"&Something else here
"presentation" class="divider"&
"presentation"&"menuitem" tabindex="-1"
href="#"&Separated link
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/-bd245bb2fa57bc8cf6c237.png" STYLE="max-width:690" HEIGHT="224" WIDTH="513"
ALT="bootstrap&常用类名"
TITLE="bootstrap&常用类名" />
改为右对齐
class="dropdown-menu text-right" role="menu"
aria-labelledby="dropdownMenu1"&
class="dropdown"& class="btn
dropdown-toggle"
type="button" id="dropdownMenu1" data-toggle="dropdown"& Dropdown class="caret"&
class="dropdown-menu text-right" role="menu"
aria-labelledby="dropdownMenu1"&
"presentation" class="dropdown-header"&Dropdown header
"presentation"&"menuitem" tabindex="-1"
href="#"&Action
"presentation"&"menuitem" tabindex="-1"
href="#"&Another action
"presentation"&"menuitem" tabindex="-1"
href="#"&Something else here
"presentation" class="divider"&
"presentation" class="dropdown-header"&Dropdown header
"presentation"&"menuitem" tabindex="-1"
href="#"&Separated link
主要是添加了
Dropdown header
里面有个.dropdown-header的样式类。
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/b7798aaaffc.png" ALT=""
TITLE="bootstrap&常用类名" />
16 、& 导航& nav
Bootstrap中可用的导航有相似的标记，用基类.nav开头，这是相似的部分。改变修饰类可以改变样式。
注意.nav-tabs类需要.nav基类。
class="nav
nav-tabs"&
class="active"&
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/cacae574ba.png" ALT=""
TITLE="bootstrap&常用类名" />
在这里暂时只进行探讨简单的样式。
2、胶囊式标签页
用相同的 HTML
标记，但要用.nav-pills代替。
class="nav
nav-pills"&
class="active"&
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/57c90e72b7aa1e2aab3.png" ALT=""
TITLE="bootstrap&常用类名" />
可以竖直堆叠。只要加上.nav-stacked。
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/ece1b72f005fbc657.png" ALT="" HEIGHT="154" WIDTH="972"
TITLE="bootstrap&常用类名" />
使用下拉菜单
class="nav
nav-tabs"&
class="dropdown"& class="dropdown-toggle" data-toggle="dropdown" href="#"& Dropdown class="caret"&
class="dropdown-menu"&
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/4c8ac324a848e8ae349.png" ALT=""
TITLE="bootstrap&常用类名" />
6、带下拉菜单的胶囊式标签页
class="nav
nav-pills"&
class="dropdown
class="dropdown-toggle" data-toggle="dropdown" href="#"& Dropdown class="caret"&
class="dropdown-menu"&
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/afe6c70b2cd.png" ALT=""
TITLE="bootstrap&常用类名" />
Example heading class="label
label-default"&New
Example heading class="label
label-default"&New
Example heading class="label
label-default"&New
Example heading class="label
label-default"&New
Example heading class="label
label-default"&New
Example heading class="label
label-default"&New
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/370c0caec493e83e54.png" ALT=""
TITLE="bootstrap&常用类名" />
可用的变体
用下面的任何一个class即可改变标签的外观。
class="label label-default"&Default
class="label label-primary"&Primary
class="label label-success"&Success
class="label label-info"&Info
class="label label-warning"&Warning
class="label label-danger"&Danger
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/e656ab108a.png" ALT=""
TITLE="bootstrap&常用类名" />
面包屑导航
&用一个带方向的层次表明当前页面的位置。
分割符自动地通过CSS的:before和content添加上了。
class="breadcrumb"&
class="active"&Data
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/-abdcad1c216e30f1a97b.png" ALT=""
TITLE="bootstrap&常用类名" />
17 、分页&& pagination
class="pagination"&
class="disabled"&
class="active"&1 class="sr-only"&(current)
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/37c02fddd11e42e1b.png" ALT=""
TITLE="bootstrap&常用类名" />
class="pager"&
class="previous"&
class="next"&
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/c14a9cbd5f24f097b4178.png" ALT=""
TITLE="bootstrap&常用类名" />
可关闭的警告框
可以用一个可选的.alert-dismissable和关闭按钮。
class="alert
alert-warning alert-dismissable"& "button" class="close" data-dismiss="alert" aria-hidden="true"&& Warning! Best
check yo self, you're not
looking too good.
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/-cfb879e4ef93c.png" ALT="" HEIGHT="89" WIDTH="1064"
TITLE="bootstrap&常用类名" />
确定在所有设备上的正确行为
一定要给data-dismiss="alert"属性用上。
警告框中的链接
用.alert-link工具类，可以快速提供在任何警告框中相符的颜色。
class="alert
alert-success"&Well
class="alert
alert-info"&Well
class="alert
alert-warning"&Well
class="alert
alert-danger"&Well
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/-de48dd3a220.png" ALT=""
TITLE="bootstrap&常用类名" />
19、进度条
class="progress"&
class="progress-bar" role="progressbar" aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 60%;"& class="sr-only"&60% Complete
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/fd401bfb7f.png" ALT=""
TITLE="bootstrap&常用类名" />
20、列表组加入徽章，它会自动地放在右面。
class="list-group"&
class="list-group-item"&class="badge"&14Cras justo odio
class="list-group-item"&class="badge"&33Dapibus ac facilisis in
class="list-group-item"&class="badge"&11Morbi leo risus
class="list-group-item"&class="badge"&41Porta ac consectetur ac
class="list-group-item"&class="badge"&21Vestibulum at eros
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/deecad7d28.png" ALT=""
TITLE="bootstrap&常用类名" />
标签而不是
标签（也就是说父元素是
）。没必要给每个元素都加一个父元素。
class="list-group"&
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/cae1b25e.png" ALT=""
TITLE="bootstrap&常用类名" />
在里面可以加几乎任何HTML，甚至是像下面的带链接的列表组。
class="list-group"&
class="list-group-item-heading"&List group item heading
class="list-group-item-text"&Cras sit amet nibh libero,
in gravida nulla. n vulputate
at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
fringilla. Donec lacinia congue felis in faucibus.
class="list-group-item-heading"&List group item heading
class="list-group-item-text"&Cras sit amet nibh libero,
in gravida nulla. n vulputate
at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
fringilla. Donec lacinia congue felis in faucibus.
class="list-group-item-heading"&List group item heading
class="list-group-item-text"&Cras sit amet nibh libero,
in gravida nulla. n vulputate
at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
fringilla. Donec lacinia congue felis in faucibus.
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/d11ac63a.png" ALT=""
TITLE="bootstrap&常用类名" />
带表格的面版
为了无缝的设计，在面版中加入.table。如果有.panel-body，就在表格的上方加上一个用于分割的边界。
class="panel
panel-default"&
class="panel-heading"&Panel heading
class="panel-body"&
Some default panel content
here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia
bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque
ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id
nibh ultricies vehicula ut id elit.
class="table"&
First Name
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/d39d1f5bae3e6d2e89.png" ALT=""
TITLE="bootstrap&常用类名" />
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/c76502fdbbf4fdadcc59b66.gif" ALT=""
TITLE="bootstrap&常用类名" />
主要实现了按钮的上下左右的ToolTip，然后是文本框和链接的ToolTip。
&&/span&div class="container" style="margin-top:40"&
&&/span&div class="bs-example tooltip-demo"&
&&/span&div class="bs-example-tooltips"&
&&/span&button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left"&左侧Tooltip&/&/span&button&
&&/span&button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top"&上方Tooltip&/&/span&button&
&&/span&button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"&下方Tooltip&/&/span&button&
&&/span&button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right"&右侧Tooltip&/&/span&button&
&/&/span&div&
&/&/span&div&
&&/span&input type="text" id="testt" rel="tooltip" title="123456" /&
&&/span&a href="#" data-toggle="tooltip" title="Default tooltip" &dsafsdfasdfasdfasd&/&/span&a&
&/&/span&div&
23、弹出框
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/blog/311/c8a4b333f591eb153.png" ALT=""
TITLE="bootstrap&常用类名" />
"margin-left:200margin-top:100margin-bottom:200"
class="bs-example
tooltip-demo"&
class="bs-example-tooltips"& "button" class="btn
btn-default"
data-container="body"
data-toggle="popover" data-placement="left"
data-content="Vivamus sagittis lacus vel augue laoreet rutrum
faucibus."&
左侧弹框 "button" class="btn
btn-default"
data-container="body"
data-toggle="popover" data-placement="top"
data-content="Vivamus sagittis lacus vel augue laoreet rutrum
faucibus."&
上方弹框 "button" class="btn
btn-default"
data-container="body"
data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum
faucibus."&
下方弹框 "button" class="btn
btn-default"
data-container="body"
data-toggle="popover" data-placement="right" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum
faucibus."&
然后用JavaScript来激活
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。