Bootstrap内置组件

1、下拉菜单例子可切换的链接列表. 互动式的下拉菜单需要dropdown JavaScript 插件.· 行为· 其它行为· 特别行为·· 分割链接1. <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">2. <li><a tabindex="-1" href="#">行为</a></li>3. <

2、li><a tabindex="-1" href="#">其它行为</a></li>4. <li><a tabindex="-1" href="#">特别行为</a></li>5. <li class="divider"></li>6. <li><a tabindex="-1" href="#">分割链接</a&g

3、t;</li>7. </ul>用法以下是下拉菜单所需的HTML. 下拉菜单的触发和下拉菜单都需要包含在.dropdown里, 或者声明 position: relative; 其他元素. 然后, 只需创建菜单.1. <div class="dropdown">2. <!- Link or button to toggle dropdown ->3. <ul class="dropdown-menu" role="menu" aria-labelledby="dL

4、abel">4. <li><a tabindex="-1" href="#">行为</a></li>5. <li><a tabindex="-1" href="#">其它行为</a></li>6. <li><a tabindex="-1" href="#">特别行为</a></li>7. <li class=&q

5、uot;divider"></li>8. <li><a tabindex="-1" href="#">分割链接</a></li>9. </ul>10. </div>选项列表右对齐, 和包括一个多级的下拉菜单.对齐在 .dropdown-menu 添加 .pull-right , 让下拉列表右对齐.1. <ul class="dropdown-menu pull-right" role=&qu

6、ot;menu" aria-labelledby="dLabel">2. .3. </ul>禁用菜单选项在下拉菜单<li>添加.disabled来禁用链接.· 注册· 修改· 退出1. <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">2. <li><a tabindex="-1" href="#&q

7、uot;>注册</a></li>3. <li class="disabled"><a tabindex="-1" href="#">修改</a></li>4. <li><a tabindex="-1" href="#">退出</a></li>5. </ul>下拉菜单的子列表添加一些简单的标记, 让下拉菜单拥有一个二级菜单, 停选效果类似OS X. 在任意的 l

8、i 添加 .dropdown-submenu 就会自动获得一个额外的菜单.默认· 行为· 其它行为· 特别行为·· 更多选项向上显示· 行为· 其它行为· 特别行为·· 更多选项左边显示· 行为· 其它行为· 特别行为·· 更多选项1. <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&

9、gt;2. .3. <li class="dropdown-submenu">4. <a tabindex="-1" href="#">More options</a>5. <ul class="dropdown-menu">6. .7. </ul>8. </li>9. </ul>按钮组例子两个基本选项, 带有两个更明确的变化.单一按钮组带有 .btn 的按钮, 都放在 .btn-group 

10、里面.左 中 右1. <div class="btn-group">2. <button class="btn">左</button>3. <button class="btn">中</button>4. <button class="btn">右</button>5. </div>多个按钮组组合成工具条集合几组 <div class="btn-group">

11、 ，再用 <div class="btn-toolbar"> 包装就可以合成工具条组件。1 2 3 4 5 6 7 81. <div class="btn-toolbar">2. <div class="btn-group">3. .4. </div>5. </div>垂直按钮组让一组按钮垂直摆放1. <div class="btn-group btn-grou

12、p-vertical">2. .3. </div>复选框和单选框形式按钮组也可实现单选和复选功能。前者只有一个按钮被按下，后者可以按下多个按钮。详见JavaScript插件 。在按钮组的下拉菜单注意! 为了渲染正常，带下拉项的按钮应该被 .btn-group 嵌套，然后再放入 .btn-toolbar 内。按钮式下拉菜单简介和例子通过将其放在 .btn-group 并添加一些下拉菜单的标记, 让点击按钮生产一个下拉菜单.行为  行为  危险

13、0; 警告  成功  信息  反向 1. <div class="btn-group">2. <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">3. Action4. <span class="caret"></span>5. </a>6. <ul class="dr

14、opdown-menu">7. <!- dropdown menu links ->8. </ul>9. </div>适应所有按钮的尺寸下拉按钮适应任何尺寸，可以是 .btn-large, .btn-small, 或 .btn-mini 。大号按钮  小号按钮  迷你按钮 需要Javascript下拉按钮需要 Bootstrap 下拉插件 实现功能。在某些情况下（诸如使用手机浏览），下拉菜单会超出可视区域。这时要么手动对齐，要么使用定

15、制的javascript。带间隔的下拉按钮在按钮组的样式和标记的基础上，我们可以很方便的创建带间隔的下拉按钮。间隔左侧是按钮，右侧是下拉链接。动作  动作  危险  警告  成功  信息  反向 1. <div class="btn-group">2. <button class="btn">Action</button>3. <button class="btn dropd

16、own-toggle" data-toggle="dropdown">4. <span class="caret"></span>5. </button>6. <ul class="dropdown-menu">7. <!- dropdown menu links ->8. </ul>9. </div>尺寸使用 .btn-mini, .btn-small, 或 .btn-large 指定大小。大号

17、按钮 小号按钮 迷你按钮 1. <div class="btn-group">2. <button class="btn btn-mini">Action</button>3. <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">4. <span class="caret"></span>5. </butt

18、on>6. <ul class="dropdown-menu">7. <!- dropdown menu links ->8. </ul>9. </div>上弹菜单下拉菜单也可以变成上弹菜单，只要在 .dropdown-menu 最近的父标签上应用 .dropup 即可。它会改变 .caret 的箭头方向，并将菜单底部与按钮顶部对齐。上弹按钮  上弹按钮(右对齐) 1. <div class="btn-group d

19、ropup">2. <button class="btn">Dropup</button>3. <button class="btn dropdown-toggle" data-toggle="dropdown">4. <span class="caret"></span>5. </button>6. <ul class="dropdown-menu">7. <!- dropdown men

20、u links ->8. </ul>9. </div>导航: 标签, 圆角, 和 列表轻巧的默认项 同样的标记，不同的类所有的导航组件都在这里, 包括标签, 圆角, 列表, 通过.nav属性共享相同的标记和样式.基本的标签页对存放链接的 <ul> 应用 .nav-tabs ：· 首页· 简介· 信息1. <ul class="nav nav-tabs">2. <li class="active">3. <

21、a href="#">首页</a>4. </li>5. <li><a href="#">.</a></li>6. <li><a href="#">.</a></li>7. </ul>基本圆角标签页HTML不变，使用 .nav-pills ：· 首页· 简介· 信息1. <ul class="nav nav-pills">

22、;2. <li class="active">3. <a href="#">Home</a>4. </li>5. <li><a href="#">.</a></li>6. <li><a href="#">.</a></li>7. </ul>不可用状态在任何的导航组件(标签, 圆角或列表)添加 .disabled, 链接将变成灰色, 且没有停悬

23、效果. 但是链接仍然保持可点击, 除非删除了href属性. 或者你也可用JavaScript来防止点击.· 可点击链接· 可点击链接· 不可点击链接1. <ul class="nav nav-pills">2. .3. <li class="disabled"><a href="#">Home</a></li>4. .5. </ul>组件对齐方式使用 .pull-left 或 .pull-right

24、60;让导航链接对齐. 它们都是添加了CSS float来指定方向.叠放式导航 竖直排放标签和圆角链接默认情况下标签和圆角链接是水平排放的，使用 .nav-stacked 就可以将其变成竖直叠放。叠放式标签· 首页· 简介· 信息1. <ul class="nav nav-tabs nav-stacked">2. .3. </ul>叠放式圆角链接· 首页· 简介· 信息1. <ul class="nav nav-pills nav-stacked

25、">2. .3. </ul>下拉菜单 改良的导航组件添加下拉菜单需要添加一些额外的HTML代码和下拉菜单的JavaScript插件.带下拉项的标签页· 首页· 帮助· 下拉菜单 · 上弹菜单 1. <ul class="nav nav-tabs">2. <li class="dropdown">3. <a class="dropdown-toggle"4. data-toggle="dropdown

26、"5. href="#">6. Dropdown7. <b class="caret"></b>8. </a>9. <ul class="dropdown-menu">10. <!- links ->11. </ul>12. </li>13. </ul>带下拉的圆角链接· 首页· 帮助· 下拉菜单 · 上弹菜单 1. <ul class="nav n

27、av-pills">2. <li class="dropdown">3. <a class="dropdown-toggle"4. data-toggle="dropdown"5. href="#">6. Dropdown7. <b class="caret"></b>8. </a>9. <ul class="dropdown-menu">10. <!- links ->11.

28、 </ul>12. </li>13. </ul>导航列表 构建简单的叠放式导航，适用于侧边栏导航列表可以便捷地创建带有标头(可选)的导航链接组，非常适合用做侧边栏（与OS X中的Finder类似）。导航列表例子对存放一组链接的列表使用 class="nav nav-list" :· 列表头· 首页· 库· 应用程序· 其它列表头· 简介· 设置·· 帮助1. <ul class="nav nav-list

29、">2. <li class="nav-header">List header</li>3. <li class="active"><a href="#">Home</a></li>4. <li><a href="#">Library</a></li>5. .6. </ul>注意 对于嵌入在导航列表的任何 <ul> 都需要添加&

30、#160;class="nav nav-list" .水平分隔符添加一个水平分隔符, 只需在空列表项添加.divider, 像这样:1. <ul class="nav nav-list">2. .3. <li class="divider"></li>4. .5. </ul>标签页切换导航 通过javascript让标签生动起来我们使用一个简单的插件切换标签页对应的内容，从而让标签页变得生动。 Bootstrap 提供了四种样式的标签页：置顶(默认)，居右，置底，居左

31、。应用时只需修改很少的标记。标签页切换的例子让标签可切换, 需在.tab-content里创建.tab-pane, 并对每个标签设置一个唯一的ID.· Section 1· Section 2· Section 3I'm in Section 1.1. <div class="tabbable"> <!- Only required for left/right tabs ->2. <ul class="nav nav-tabs">3. <li class="act

32、ive"><a href="#tab1" data-toggle="tab">Section 1</a></li>4. <li><a href="#tab2" data-toggle="tab">Section 2</a></li>5. </ul>6. <div class="tab-content">7. <div class="tab-pane acti

33、ve" id="tab1">8. <p>I'm in Section 1.</p>9. </div>10. <div class="tab-pane" id="tab2">11. <p>Howdy, I'm in Section 2.</p>12. </div>13. </div>14. </div>淡入要让内容淡入, 需在每个.tab-pane添加.fade .需要jQuery插件所有

34、可切换标签都采用了轻量级的jQuery插件. 在JavaScript文档页面了解更多如果创建可切换标签.各个方向的标签底部反转HTML的顺序，用 .tabs-below 将标签居底。I'm in Section A.· Section 1· Section 2· Section 31. <div class="tabbable tabs-below">2. <div class="tab-content">3. .4. </div>5. <ul class

35、="nav nav-tabs">6. .7. </ul>8. </div>左边，用 .tabs-left 将标签居底。· Section 1· Section 2· Section 3I'm in Section A.1. <div class="tabbable tabs-left">2. <ul class="nav nav-tabs">3. .4. </ul>5. <div class="t

36、ab-content">6. .7. </div>8. </div>右边使用 .tabs-right 将标签居右。· Section 1· Section 2· Section 3I'm in Section A.1. <div class="tabbable tabs-right">2. <ul class="nav nav-tabs">3. .4. </ul>5. <div class="tab-con

37、tent">6. .7. </div>8. </div>导航条基本导航条导航条是静态的(未固定在顶部), 并包括项目名词和一些导航该有的功能. 将导航条放在任意一个 .container, 其宽度是与网站内容相同.标题· 首页· 链接· 链接1. <div class="navbar">2. <div class="navbar-inner">3. <a class="brand" href="#">

38、Title</a>4. <ul class="nav">5. <li class="active"><a href="#">Home</a></li>6. <li><a href="#">Link</a></li>7. <li><a href="#">Link</a></li>8. </ul>9. </div&g

39、t;10. </div>导航条组件仅标题用于展示品牌或项目名称的一个简单链接，只需要一个锚标签。标题1. <a class="brand" href="#">项目名称</a>导航链接可以简单的往导航添加列表.· 首页· 链接· 链接1. <ul class="nav">2. <li class="active">3. <a href="#">Home</a>4. </li>

40、;5. <li><a href="#">Link</a></li>6. <li><a href="#">Link</a></li>7. </ul>添加分隔符同样的简单, 只需在每个空白的列表项添加一个属性即可. 在每个链接间添加, 如下:· 首页·· 链接·· 链接·1. <ul class="nav">2. .3. <li class="d

41、ivider-vertical"></li>4. .5. </ul>表单导航条内的表单, 用 .navbar-form 进行样式化,由 .pull-left 或 .pull-right 决定居左还是居右.窗体顶端 提交窗体底端1. <form class="navbar-form pull-left">2. <input type="text" class="span2">3. <button t

42、ype="submit" class="btn">Submit</button>4. </form>搜索表单在导航条内, 对 form 添加 .navbar-search 并在输入框添加专门的一个属性 .search-query, 就可获得一个搜索表单.窗体顶端窗体底端1. <form class="navbar-search pull-left">2. <input type="text" class="s

43、earch-query" placeholder="Search">3. </form>对齐使用 .pull-left 或 .pull-right 对齐导航链接, 搜索表单或文本. 它们都是添加了CSS float来指定方向.使用下拉菜单在导航添加下拉菜单只需要加入一点点标记和下拉菜单JavaScript插件.1. <ul class="nav">2. <li class="dropdown">3. <a href="#&quo

44、t; class="dropdown-toggle" data-toggle="dropdown">4. Account5. <b class="caret"></b>6. </a>7. <ul class="dropdown-menu">8. .9. </ul>10. </li>11. </ul>查看更多JavaScript下拉菜单文档.文本在 .navbar-text 下使用文本元素, 对于需要突出或设

45、置颜色, 通常使用 <p> 标签.可选的显示方法在最外层div上应用,.navbar添加一个额外的属性, 就可以将导航条固定到顶部或是底部.固定在顶部添加 .navbar-fixed-top 以及记得在<body>的顶部添加一个至少40px的padding. 确保是添加在Bootstrap核心CSS之后, 和响应式CSS(可选的)之前.标题· 首页· 链接· 链接1. <div class="navbar navbar-fixed-top">2. .3. </di

46、v>固定在底部添加 .navbar-fixed-bottom .标题· 首页· 链接· 链接1. <div class="navbar navbar-fixed-bottom">2. .3. </div>顶部静态导航条通过添加 .navbar-static-top 创建一个全宽(full-width)的导航条. 这不像.navbar-fixed-top, 因为你不需要在body改动任何padding.标题· 首页· 链接· 链接1. <di

47、v class="navbar navbar-static-top">2. .3. </div>响应式导航条要实现一个响应式导航条, 需要把导航条包含在div,.nav-collapse.collapse里面, 并添加一个触发展开导航(适用在屏幕较窄的设备)的按钮.btn-navbar.标题· 首页· 链接· 链接· 下拉菜单 窗体顶端窗体底端· 链接·· 下拉菜单 1. <div class="navbar">2. <div c

48、lass="navbar-inner">3. <div class="container">4.  5. <!- .btn-navbar is used as the toggle for collapsed navbar content ->6. <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">7. <span class=&quo

49、t;icon-bar"></span>8. <span class="icon-bar"></span>9. <span class="icon-bar"></span>10. </a>11.  12. <!- Be sure to leave the brand out there if you want it shown ->13. <a class="brand" href="#">Pro

50、ject name</a>14.  15. <!- Everything you want hidden at 940px or less, place within here ->16. <div class="nav-collapse collapse">17. <!- .nav, .navbar-search, .navbar-form, etc ->18. </div>19.  20. </div>21. </div>22. </div>注意!

51、0;响应式导航条需要 切换(collapse)插件 和 Bootstrap响应式CSS文件.逆变化需要变化导航条外观(变成黑色), 可添加.navbar-inverse.标题· 首页· 链接· 链接· 下拉菜单 窗体顶端窗体底端· 链接·· 下拉菜单 1. <div class="navbar navbar-inverse">2. .3. </div>面包屑(路径式)导航例子面包屑导航栏用于展示用户当前在网站/应用中的位置，但并不是首要导航。

52、适宜布局清爽，简洁明了的场合。即查看某个页面, 可以需要跳转多个页面, 可使用路径式导航方便使用者返回.· 首页· 首页 / · 库· 首页 / · 库 / · 数据1. <ul class="breadcrumb">2. <li><a href="#">Home</a> <span class="divider">/</span></li

53、>3. <li><a href="#">Library</a> <span class="divider">/</span></li>4. <li class="active">Data</li>5. </ul>分页 供两种可选择内容分页标准分页受Rdio启发，我们设计了极为简致的页码样式，适用于应用和搜索结果。页码区域尺寸大，易于吸引注意力，易于扩展，易于点击。· «· 1

54、3; 2· 3· 4· 5· »1. <div class="pagination">2. <ul>3. <li><a href="#">Prev</a></li>4. <li><a href="#">1</a></li>5. <li><a href="#">2</a></li>6. <li&g

55、t;<a href="#">3</a></li>7. <li><a href="#">4</a></li>8. <li><a href="#">5</a></li>9. <li><a href="#">Next</a></li>10. </ul>11. </div>选项不可用和当前状态Bootstrap使用一组样式

56、类定制页码的状态，.disabled 用于不可点击链接，而 .active 用于表示当前页链接。· «· 1· 2· 3· 4· 5· »1. <div class="pagination">2. <ul>3. <li class="disabled"><a href="#">&laquo;</a></li>4. <li class

57、="active"><a href="#">1</a></li>5. .6. </ul>7. </div>也可以使用span标签替换a标签, 这样可以删除点击功能, 同时又保留了样式.1. <div class="pagination">2. <ul>3. <li class="disabled"><span>&laquo;</span></li>4. <li cl

58、ass="active"><span>1</span></li>5. .6. </ul>7. </div>大小想要更大或更小的分页? 添加.pagination-large, .pagination-small, 或 .pagination-mini 就可改变分页大小.· «· 1· 2· 3· 4· 5· »· «· 1· 2· 3

59、3; 4· 5· »· «· 1· 2· 3· 4· 5· »· «· 1· 2· 3· 4· 5· »1. <div class="pagination pagination-large">2. <ul>3. .4. </ul>5. </div>6. <div class="pagination&quo

60、t;>7. <ul>8. .9. </ul>10. </div>11. <div class="pagination pagination-small">12. <ul>13. .14. </ul>15. </div>16. <div class="pagination pagination-mini">17. <ul>18. .19. </ul>20. </div>对齐使用 .pagination-cent

61、ered 和 .pagination-right 可以改变页码的对齐方式，前者居中，后者居右。· «· 1· 2· 3· 4· 5· »1. <div class="pagination pagination-centered">2. .3. </div>· «· 1· 2· 3· 4· 5· »1. <div class="p

62、agination pagination-right">2. .3. </div>翻页用更少的标记和样式, 创建用于简单快速分页. 非常适用于简单的网站, 像博客或者杂志网站.默认默认情况下, 翻页链接居中.· 上一页 · 下一页1. <ul class="pager">2. <li><a href="#">上一页</a></li>3. <li><a href="#">下一页</a>

63、</li>4. </ul>居于左右端的链接另一种情况下，链接分别居于左右端：· 过去的· 更新的 1. <ul class="pager">2. <li class="previous">3. <a href="#">&larr; 过去的</a>4. </li>5. <li class="next">6. <a href="#">更新的 &rarr;&l

64、t;/a>7. </li>8. </ul>不可用状态同样也是使用 .disabled 让其显示不可用状态.· 过去的· 更新的 1. <ul class="pager">2. <li class="previous disabled">3. <a href="#">&larr; Older</a>4. </li>5. .6. </ul>标签和标记标签和注释文本标签标签标记默认<sp

65、an class="label">默认</span>成功<span class="label label-success">成功</span>警告<span class="label label-warning">警告</span>重要<span class="label label-important">重要</span>信息<span class="label label-info">信息&

66、lt;/span>反向<span class="label label-inverse">反向</span>标记名称例子标记默认1<span class="badge">1</span>成功2<span class="badge badge-success">2</span>警告4<span class="badge badge-warning">4</span>重要6<span class="ba

67、dge badge-important">6</span>信息8<span class="badge badge-info">8</span>反向10<span class="badge badge-inverse">10</span>容易的标记为了方便编写,请将标签和标记存在空的元素当中(通过 CSS's :empty 定义)排版组件Hero单元Bootstrap提供了一个轻巧又灵活的组件，用以在网站中着重展示内容，称之为"hero uni

68、t"/主角单元。 适用于市场类或强调内容的网站。Hello, world!This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.Learn more1. <div class="hero-unit">2. <h1>Heading</h1>3. <p>Tagline</p>4. <p>5. <a

69、 class="btn btn-primary btn-large">6. Learn more7. </a>8. </p>9. </div>页面标题相当于一个简单的 h1 外壳，它有适当的留白，以便在页面中分割内容片段。 还可以在 h1 内嵌入 small ，html元素或是其他组件。页面标题的例子 子标题文字1. <div class="page-header">2. <h1>页面标题的例子 <small>

70、;子标题文字</small></h1>3. </div>缩略项 网格式图片, 视频, 文本, 等等默认缩略项默认情况下，Bootstrap的缩略项使用很少的标记来展示链接图象。····高可定制使用少量其他标记就可以在缩略项中添加任何一种HTML内容，比如标题，段落，或按钮。·Thumbnail labelCras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at

71、eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.动作 动作·Thumbnail labelCras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.动作 动作·Thumbnail labelCras ju

72、sto odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.动作 动作为什么使用缩略项缩略项（1.4版之前使用 .media-grid ）适用于栅格化的图片和视频，图片搜索结果，零售产品，文件夹等等。缩略项可以是链接，也可以是静态内容。简洁灵活的标记缩略项标记既简单又灵活只须用一个 ul 嵌套

73、多个 li 元素。缩略项内容可以是任何一种HTML内容，只须少许标记。使用栅格列确定大小最后，缩略项组件使用栅格类诸如 .span2 或 .span3 确定缩略项的尺寸。标记正如之前所提到的，缩略项所需的标记是很少的。下面就是一个 带链接图象 的默认设置：1. <ul class="thumbnails">2. <li class="span4">3. <a href="#" class="thumbnail&quo

74、t;>4. <img data-src="holder.js/300x200" alt="">5. </a>6. </li>7. .8. </ul>缩略项中的HTML内容仅须更改少许标记。将 <a> 变成 <div> 即可定制块状内容，如下：1. <ul class="thumbnails">2. <li class="span4">3. <div class=&quo

75、t;thumbnail">4. <img data-src="holder.js/300x200" alt="">5. <h3>Thumbnail label</h3>6. <p>Thumbnail caption.</p>7. </div>8. </li>9. .10. </ul>更多例子尝试更多栅格类，混用不同的尺寸。·····通知 给成功，警告和错误消息指定样式默认样式在

76、0;.alert 里面添加任何文本内容和关闭按钮.×警告! Best check yo self, you're not looking too good.1. <div class="alert">2. <button type="button" class="close" data-dismiss="alert">&times;</button>3. <strong>Warning!</strong> Be

77、st check yo self, you're not looking too good.4. </div>关闭按钮在移动设备的Safari和Opera浏览器中, 当使用<a>标签用以关闭通知框, 除了在data-dismiss="alert"属性之外, 还需要包含一个href="#".1. <a href="#" class="close" data-dismiss="alert">&times;</a>另外, 你可以使用<button>元素的数据属性, 我们的文档就是使用这个元素. 当使用<button>, 必须包含type="button", 或者表单中没有提交.1. <button type="button" class="clos