1、下拉菜单例子可切换的链接列表. 互动式的下拉菜单需要 dropdown JavaScript 插件. 行为 其它行为 特别行为 分割链接1. 2. 行为3. 其它行为4. 特别行为5. 6. 分割链接7. 用法以下是下拉菜单所需的 HTML. 下拉菜单的触发和下拉菜单都需要包含在 .dropdown 里, 或者声明position: relative; ; 其他元素 . 然后, 只需创建菜单.1. 2. 3. 4. 行为5. 其它行为6. 特别行为7. 8. 分割链接9. 10.选项列表右对齐, 和包括一个多级的下拉菜单.对齐在 .dropdown-menu 添加 .pull-right ,
2、让下拉列表右对齐.1. 2. .3. 禁用菜单选项在下拉菜单 添加 .disabled 来禁用链接. 注册 修改 退出1. 2. 注册3. 修改4. 退出5. 下拉菜单的子列表添加一些简单的标记, 让下拉菜单拥有一个二级菜单, 停选效果类似 OS X. 在任意的 li 添加 .dropdown-submenu 就会自动获得一个额外的菜单.默认 行为 其它行为 特别行为 更多选项向上显示 行为 其它行为 特别行为 更多选项左边显示 行为 其它行为 特别行为 更多选项1. 2. .3. 4. More options5. 6. .7. 8. 9. 按钮组例子两个基本选项, 带有两个更明确的变化.单
3、一按钮组带有 .btn 的按钮, 都放在 .btn-group 里面.左 中 右1. 2. 左3. 中4. 右5. 多个按钮组组合成工具条集合几组 ，再用 包装就可以合成工具条组件。1 2 3 45 6 781. 2. 3. .4. 5. 垂直按钮组让一组按钮垂直摆放1. 2. .3. 复选框和单选框形式按钮组也可实现单选和复选功能。前者只有一个按钮被按下，后者可以按下多个按钮。详见JavaScript插件 。在按钮组的下拉菜单为了渲染正常，带下拉项的按钮应该被 .btn-group 嵌套，然后再放入 .btn-toolbar 内。按钮式下拉菜单简介和例子通过将其放在 .btn-group 并
4、添加一些下拉菜单的标记, 让点击按钮生产一个下拉菜单.行为 行为 危险 警告 成功 信息 反向 1. 2. 3. Action4. 5. 6. 7. 8. 9. 适应所有按钮的尺寸下拉按钮适应任何尺寸，可以是 .btn-large , .btn-small , 或 .btn-mini 。大号按钮 小号按钮 迷你按钮 需要 Javascript下拉按钮需要 Bootstrap 下拉插件 实现功能。在某些情况下（诸如使用手机浏览），下拉菜单会超出可视区域。这时要么手动对齐，要么使用定制的 javascript。带间隔的下拉按钮在按钮组的样式和标记的基础上，我们可以很方便的创建带间隔的下拉按钮。间隔
5、左侧是按钮，右侧是下拉链接。动作 动作 危险 警告 成功 信息 反向 1. 2. Action3. 4. 5. 6. 7. 8. 9. 尺寸使用 .btn-mini , .btn-small , 或 .btn-large 指定大小。大号按钮 小号按钮 迷你按钮 1. 2. Action3. 4. 5. 6. 7. 8. 9. 上弹菜单下拉菜单也可以变成上弹菜单，只要在 .dropdown-menu 最近的父标签上应用 .dropup 即可。它会改变 .caret 的箭头方向，并将菜单底部与按钮顶部对齐。上弹按钮 上弹按钮(右对齐) 1. 2. Dropup3. 4. 5. 6. 7. 8. 9
6、. 导航: 标签, 圆角, 和列表轻巧的默认项 同样的标记，不同的类所有的导航组件都在这里, 包括标签, 圆角, 列表, 通过 .nav 属性共享相同的标记和样式.基本的标签页对存放链接的 应用 .nav-tabs ： 首页 简介 信息1. 2. 3. 首页4. 5. .6. .7. 基本圆角标签页HTML不变，使用 .nav-pills ： 简介 信息1. 2. 3. Home4. 5. .6. .7. 不可用状态在任何的导航组件(标签, 圆角或列表)添加 .disabled , 链接将变成灰色, 且没有停悬效果. 但是链接仍然保持可点击, 除非删除了 href 属性. 或者你也可用 Jav
7、aScript来防止点击. 可点击链接 可点击链接 不可点击链接1. 2. .3. Home4. .5. 组件对齐方式使用 .pull-left 或 .pull-right 让导航链接对齐. 它们都是添加了 CSS float来指定方向.叠放式导航 竖直排放标签和圆角链接默认情况下标签和圆角链接是水平排放的，使用 .nav-stacked 就可以将其变成竖直叠放。叠放式标签 首页 简介 信息1. 2. .3. 叠放式圆角链接 简介 信息1. 2. .3. 下拉菜单 改良的导航组件添加下拉菜单需要添加一些额外的 HTML代码和 下拉菜单的 JavaScript插件.带下拉项的标签页 首页 帮助
8、下拉菜单 上弹菜单 1. 2. 3. 6. Dropdown7. 8. 9. 10.11.12.13.带下拉的圆角链接 帮助 下拉菜单 上弹菜单 1. 2. 3. 6. Dropdown7. 8. 9. 10.11.12.13.导航列表 构建简单的叠放式导航，适用于侧边栏导航列表可以便捷地创建带有标头(可选)的导航链接组，非常适合用做侧边栏（与 OS X中的Finder类似）。导航列表例子对存放一组链接的列表使用 class=“nav nav-list“ : 列表头 库 应用程序 其它列表头 简介 设置 帮助1. 2. List header3. Home4. Library5. .6. 对于
9、嵌入在导航列表的任何 都需要添加 class=“nav nav-list“ .水平分隔符添加一个水平分隔符, 只需在空列表项添加 .divider , 像这样:1. 2. .3. 4. .5. 标签页切换导航 通过 javascript 让标签生动起来我们使用一个简单的插件切换标签页对应的内容，从而让标签页变得生动。 Bootstrap 提供了四种样式的标签页：置顶(默认)，居右，置底，居左。应用时只需修改很少的标记。标签页切换的例子让标签可切换, 需在.tab-content 里创建.tab-pane, 并对每个标签设置一个唯一的 ID. Section 1 Section 2 Sectio
10、n 3Im in Section 1.1. 2. 3. Section 14. Section 25. 6. 7. 8. Im in Section 1.9. 10.11.Howdy, Im in Section 2.12.13.14.淡入要让内容淡入, 需在每个 .tab-pane 添加 .fade .需要 jQuery 插件所有可切换标签都采用了轻量级的 jQuery插件. 在 JavaScript文档页面了解更多如果创建可切换标签.各个方向的标签底部反转 HTML的顺序，用 .tabs-below 将标签居底。Im in Section A. Section 1 Section 2 Se
11、ction 31. 2. 3. .4. 5. 6. .7. 8. 左边，用 .tabs-left 将标签居底。 Section 1 Section 2 Section 3Im in Section A.1. 2. 3. .4. 5. 6. .7. 8. 右边使用 .tabs-right 将标签居右。 Section 1 Section 2 Section 3Im in Section A.1. 2. 3. .4. 5. 6. .7. 8. 导航条基本导航条导航条是静态的(未固定在顶部), 并包括项目名词和一些导航该有的功能. 将导航条放在任意一个 .container , 其宽度是与网站内容相
12、同.标题 首页 链接 链接1. 2. 3. Title4. 5. Home6. Link7. Link8. 9. 10.导航条组件仅标题用于展示品牌或项目名称的一个简单链接，只需要一个锚标签。标题1. 项目名称导航链接可以简单的往导航添加列表. 首页 链接 链接1. 2. 3. Home4. 5. Link6. Link7. 添加分隔符同样的简单, 只需在每个空白的列表项添加一个属性即可. 在每个链接间添加, 如下: 首页 链接 链接1. 2. .3. 4. .5. 表单导航条内的表单, 用 .navbar-form 进行样式化,由 .pull-left 或 .pull-right 决定居左还
13、是居右.提交1. 2. 3. Submit4. 搜索表单在导航条内, 对 form 添加 .navbar-search 并在输入框添加专门的一个属性 .search-query , 就可获得一个搜索表单.1. 2. 3. 对齐使用 .pull-left 或 .pull-right 对齐导航链接, 搜索表单或文本. 它们都是添加了 CSS float来指定方向.使用下拉菜单在导航添加下拉菜单只需要加入一点点标记和 下拉菜单 JavaScript插件.1. 2. 3. 4. Account5. 6. 7. 8. .9. 10.11.查看更多 JavaScript下拉菜单文档.文本在 .navbar
14、-text 下使用文本元素, 对于需要突出或设置颜色, 通常使用 标签.可选的显示方法在最外层 div上应用, .navbar 添加一个额外的属性, 就可以将导航条固定到顶部或是底部.固定在顶部添加 .navbar-fixed-top 以及记得在 的顶部添加一个至少 40px的 padding . 确保是添加在Bootstrap核心 CSS之后, 和响应式 CSS(可选的)之前.标题 首页 链接 链接1. 2. .3. 固定在底部添加 .navbar-fixed-bottom .标题 首页 链接 链接1. 2. .3. 顶部静态导航条通过添加 .navbar-static-top 创建一个全宽
15、(full-width)的导航条. 这不像 .navbar-fixed-top , 因为你不需要在 body 改动任何 padding.标题 首页 链接 链接1. 2. .3. 响应式导航条要实现一个响应式导航条, 需要把导航条包含在 div, .nav-collapse.collapse 里面, 并添加一个触发展开导航(适用在屏幕较窄的设备)的按钮 .btn-navbar .标题 首页 链接 链接 下拉菜单 链接 下拉菜单 1. 2. 3. 4. 5. 6. 7. 8. 9. 10.11. 12.13.Project name14. 15.16.17.18.19. 20.21.22.注意!
16、响应式导航条需要 切换( collapse)插件 和 Bootstrap响应式 CSS文件.逆变化需要变化导航条外观(变成黑色), 可添加 .navbar-inverse .标题 链接 链接 下拉菜单 链接 下拉菜单 1. 2. .3. 面包屑(路径式)导航例子面包屑导航栏用于展示用户当前在网站/应用中的位置，但并不是首要导航。适宜布局清爽，简洁明了的场合。即查看某个页面, 可以需要跳转多个页面, 可使用路径式导航方便使用者返回. 首页 首页 / 库 首页 / 库 / 数据1. 2. Home/3. Library/4. Data5. 分页 供两种可选择内容分页标准分页受 Rdio启发，我们设
17、计了极为简致的页码样式，适用于应用和搜索结果。页码区域尺寸大，易于吸引注意力，易于扩展，易于点击。 1 2 3 4 5 1. 2. 3. Prev4. 15. 26. 37. 48. 59. Next10.11.选项不可用和当前状态Bootstrap使用一组样式类定制页码的状态， .disabled 用于不可点击链接，而 .active 用于表示当前页链接。 1 2 3 4 5 1. 2. 3. 4. 15. .6. 7. 也可以使用 span标签替换 a标签, 这样可以删除点击功能, 同时又保留了样式.1. 2. 3. 4. 15. .6. 7. 大小想要更大或更小的分页? 添加 .pagi
18、nation-large , .pagination-small , 或 .pagination-mini 就可改变分页大小. 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1. 2. 3. .4. 5. 6. 7. 8. .9. 10.11.12.13. .14.15.16.17.18. .19.20.对齐使用 .pagination-centered 和 .pagination-right 可以改变页码的对齐方式，前者居中，后者居右。 1 2 3 4 5 1. 2. .3. 1 2 3 4 5 1. 2. .3. 翻页用更少的标记和样式, 创建用于简单快速
19、分页. 非常适用于简单的网站, 像博客或者杂志网站.默认默认情况下, 翻页链接居中. 上一页 下一页1. 2. 上一页3. 下一页4. 居于左右端的链接另一种情况下，链接分别居于左右端： 过去的 更新的 1. 2. 3. 过去的4. 5. 6. 更新的 7. 8. 不可用状态同样也是使用 .disabled 让其显示不可用状态. 过去的 更新的 1. 2. 3. Older4. 5. .6. 标签和标记标签和注释文本标签标签 标记默认成功警告重要信息反向标记名称 例子 标记名称 例子 标记默认 1成功 2警告 4重要 6信息 8反向 10容易的标记为了方便编写,请将标签和标记存在空的元素当中(
20、通过 CSSs :empty 定义)排版组件Hero 单元Bootstrap提供了一个轻巧又灵活的组件，用以在网站中着重展示内容，称之为“hero unit“/主角单元。 适用于市场类或强调内容的网站。Hello, world!This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.Learn more1. 2. Heading3. Tagline4. 5. 6. Learn more7. 8. 9.
21、 页面标题相当于一个简单的 h1 外壳，它有适当的留白，以便在页面中分割内容片段。 还可以在 h1 内嵌入 small ，html 元素或是其他组件。页面标题的例子 子标题文字1. 2. 页面标题的例子 子标题文字3. 缩略项 网格式图片, 视频, 文本, 等等默认缩略项默认情况下，Bootstrap 的缩略项使用很少的标记来展示链接图象。高可定制使用少量其他标记就可以在缩略项中添加任何一种 HTML内容，比如标题，段落，或按钮。Thumbnail labelCras justo odio, dapibus ac facilisis in, egestas eget quam. Donec i
22、d elit non mi porta gravida at 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
23、 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.动作为什么使用缩略项缩略项（1.4 版之前使用 .media-grid ）适用于栅格化的图片和视频，图片搜索结果，零售产品，文件夹等等。缩略项可以是链接，也可以是静态内容。简洁灵活的标记缩略项标记既简单又灵活只须用一个 ul 嵌套多个 li 元素。缩略项内容可以是任何一种 HTML内容，只须少许标记。使用栅格列确定大小最后，缩略项组件使用栅格类诸如 .span2 或 .span3 确定缩略项的尺寸。标记正如之前所提到的，缩略项所需的标记是很少的。下面就是一个 带链接图象 的默认设置：1. 2. 3. 4. 5. 6. 7. .8. 缩略项中的 HTML内容仅须更改少许标记。将 变成 即可定制块状内容，如下：1. 2. 3. 4. 5. Thumbnail label6. Thumbnail caption.7. 8. 9. .10.更多例子尝试更多栅格类，混用不同的尺寸。通知 给成功，警告和错误消息指定样式默认样式在 .alert 里面添加任何文本内容和关闭按钮.
