例子

用于显示链接列表的可切换上下文菜单。与下拉 javascript 插件交互。

<ul类= “下拉菜单”角色= “菜单” aria-labelledby = “下拉菜单” >   
  <li><a tabindex = "-1" href = "#" >动作</a></li>  
  <li><a tabindex = "-1" href = "#" >另一个动作</a></li>  
  <li><a tabindex = "-1" href = "#" >这里有别的东西</a></li>  
  <li class = "分隔符" ></li> 
  <li><a tabindex = "-1" href = "#" >分隔链接</a></li>  
</ul>

标记

只看下拉菜单，这是所需的 HTML。您需要将下拉菜单的触发器和下拉菜单包装在 内.dropdown，或另一个声明position: relative;. 然后只需创建菜单。

<div类= “下拉” > 
  <!-- 用于切换下拉菜单的链接或按钮 -->
  <ul类= “下拉菜单”角色= “菜单” aria- labelledby = “dLabel” >   
    <li><a tabindex = "-1" href = "#" >动作</a></li>  
    <li><a tabindex = "-1" href = "#" >另一个动作</a></li>  
    <li><a tabindex = "-1" href = "#" >这里有别的东西</a></li>  
    <li class = "分隔符" ></li> 
    <li><a tabindex = "-1" href = "#" >分隔链接</a></li>  
  </ul>
</div>

选项

向右对齐菜单并添加包括其他级别的下拉菜单。

对齐菜单

添加.pull-right到.dropdown-menu右对齐下拉菜单。

<ul类= “下拉菜单向右”角色= “菜单” aria- labelledby = “dLabel” >   
  ...
</ul>

下拉菜单上的子菜单

添加一个额外级别的下拉菜单，像 OS X 一样在悬停时出现，并添加了一些简单的标记。添加.dropdown-submenu到li现有下拉菜单中的任何内容以进行自动样式设置。

<ul类= “下拉菜单”角色= “菜单” aria- labelledby = “dLabel” >   
  ...
  <li class = "下拉子菜单" > 
    <a tabindex = "-1" href = "#" >更多选项</a>  
    <ul class = "下拉菜单" > 
      ...
    </ul>
  </li>
</ul>

例子

两个基本选项，以及两个更具体的变体。

单键组

.btn用in包裹一系列按钮.btn-group。

<div class = "btn-group" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

多个按钮组

将集合组合<div class="btn-group">成<div class="btn-toolbar">更复杂的组件。

<div类= "btn 工具栏" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

垂直按钮组

使一组按钮显示为垂直堆叠而不是水平堆叠。

<div class = "btn-group btn-group-vertical" > 
  ...
</div>

复选框和收音机口味

按钮组也可以用作单选，其中只有一个按钮处于活动状态，或复选框，其中任意数量的按钮都可能处于活动状态。查看Javascript 文档。

按钮组中的下拉菜单

小心！带有下拉菜单的按钮必须单独包装在.btn-groupa.btn-toolbar中以正确呈现。

概述和示例

使用任何按钮来触发下拉菜单，方法是将其放置在 a 中.btn-group并提供适当的菜单标记。

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    行动
    <span class = "caret" ></span> 
  </a>
  <ul class = "下拉菜单" > 
    <!-- 下拉菜单链接 -->
  </ul>
</div>

适用于所有按钮尺寸

按钮下拉菜单适用于任何大小：.btn-large、.btn-small或.btn-mini。

需要 javascript

按钮下拉菜单需要Bootstrap 下拉插件才能运行。

在某些情况下——比如移动端——下拉菜单会延伸到视口之外。您需要手动或使用自定义 javascript 解决对齐问题。

拆分按钮下拉菜单

基于按钮组样式和标记，我们可以轻松创建拆分按钮。拆分按钮的左侧是标准操作，右侧是带有上下文链接的下拉切换。

<div class = "btn-group" > 
  <button class = "btn" >动作</button> 
  <按钮类= “btn下拉切换”数据切换= “下拉” >  
    <span class = "caret" ></span> 
  </按钮>
  <ul class = "下拉菜单" > 
    <!-- 下拉菜单链接 -->
  </ul>
</div>

尺寸

使用额外的按钮类.btn-mini, .btn-small, 或.btn-large来调整大小。

<div class = "btn-group" > 
  <button class = "btn btn-mini" >动作</button> 
  <按钮类= “btn btn-mini下拉切换”数据切换= “下拉” >  
    <span class = "caret" ></span> 
  </按钮>
  <ul class = "下拉菜单" > 
    <!-- 下拉菜单链接 -->
  </ul>
</div>

下拉菜单

下拉菜单也可以通过将单个类添加到.dropdown-menu. 它将翻转方向.caret并重新定位菜单本身以从下向上移动而不是自上而下。

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <按钮类= “btn下拉切换”数据切换= “下拉” >  
    <span class = "caret" ></span> 
  </按钮>
  <ul class = "下拉菜单" > 
    <!-- 下拉菜单链接 -->
  </ul>
</div>

轻量级默认值相同的标记，不同的类

这里的所有导航组件——选项卡、药丸和列表——在整个类中共享相同的基本标记和样式.nav。

基本选项卡

获取常规<ul>链接并添加.nav-tabs：

<ul class = "nav 导航标签" > 
  <li class = "活动" > 
    <a href = "#" >主页</a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

基本丸

采用相同的 HTML，但.nav-pills改用：

<ul class = "nav nav-药丸" > 
  <li class = "活动" > 
    <a href = "#" >主页</a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

禁用状态

对于任何导航组件（选项卡、药丸或列表），添加.disabled灰色链接和无悬停效果。但是，除非实施自定义 javascript 来阻止这些点击，否则链接将保持可点击状态。

<ul class = "nav nav-药丸" > 
  ...
  <li class = "disabled" ><a href = "#" >主页</a></li>  
  ...
</ul>

组件对齐

要对齐导航链接，请使用.pull-left或.pull-right实用程序类。两个类都将在指定方向添加 CSS 浮动。

可堆叠

由于选项卡和药丸默认情况下是水平的，只需添加第二个类 ,.nav-stacked即可使它们垂直堆叠。

堆叠标签

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

堆叠药丸

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

下拉菜单

添加带有一点额外 HTML 的下拉菜单和下拉 javascript 插件。

带有下拉菜单的选项卡

<ul class = "nav 导航标签" > 
  <li class = "下拉菜单" > 
    <a类= "下拉切换" 
       数据切换= “下拉”
       href = "#" >
        落下
        <b类= "插入符号" ></b> 
      </a>
    <ul class = "下拉菜单" > 
      <!-- 链接 -->
    </ul>
  </li>
</ul>

带有下拉菜单的药丸

<ul class = "nav nav-药丸" > 
  <li class = "下拉菜单" > 
    <a类= "下拉切换" 
       数据切换= “下拉”
       href = "#" >
        落下
        <b类= "插入符号" ></b> 
      </a>
    <ul class = "下拉菜单" > 
      <!-- 链接 -->
    </ul>
  </li>
</ul>

导航列表

一种使用可选标题构建导航链接组的简单方法。它们最适合用于 OS X 中的 Finder 等侧边栏。

示例导航列表

获取链接列表并添加class="nav nav-list"：

<ul类= “导航导航列表” > 
  <li class = "nav-header" >列表头</li> 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" >库</a></li> 
  ...
</ul>

注意对于导航列表中的嵌套，包括class="nav nav-list"任何嵌套<ul>的 .

水平分隔线

通过使用 class 创建一个空列表项来添加水平分隔线.divider，如下所示：

<ul类= “导航导航列表” > 
  ...
  <li class = "分隔符" ></li> 
  ...
</ul>

选项卡导航

使用一个简单的插件让您的标签栩栩如生，通过标签在内容之间切换。Bootstrap 集成了四种样式的可选项卡：顶部（默认）、右侧、底部和左侧。

可选项卡示例

要使选项卡可选项卡，请.tab-pane为每个选项卡创建一个具有唯一 ID 的并将它们包装在.tab-content.

<div class = "tabbable" > <!-- 仅左/右标签需要 -->  
  <ul class = "nav 导航标签" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" >第 1 节</a></li>   
    <li><a href = "#tab2" data-toggle = "tab" >第 2 节</a></li>  
  </ul>
  <div类= "标签内容" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p>我在第 1 部分。</p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p>你好，我在第 2 部分。</p>
    </div>
  </div>
</div>

淡入标签

要使标签淡入，请添加.fade到每个.tab-pane.

需要 jQuery 插件

所有可选项卡都由我们的轻量级 jQuery 插件提供支持。阅读更多关于如何在 javascript 文档页面上将可选项卡变为现实的信息。

可在任何方向上标记

底部的标签

翻转 HTML 的顺序并添加一个类以将选项卡放在底部。

<div class = "tabable tabs-below" > 
  <div类= "标签内容" > 
    ...
  </div>
  <ul class = "nav 导航标签" > 
    ...
  </ul>
</div>

左侧的选项卡

交换类以将选项卡放在左侧。

<div class = "tabable tabs-left" > 
  <ul class = "nav 导航标签" > 
    ...
  </ul>
  <div类= "标签内容" > 
    ...
  </div>
</div>

右侧的选项卡

交换类以将选项卡放在右侧。

<div class = "tabable tabs-right" > 
  <ul class = "nav 导航标签" > 
    ...
  </ul>
  <div类= "标签内容" > 
    ...
  </div>
</div>

基本导航栏

首先，导航栏是静态的（不固定在顶部），包括对项目名称和基本导航的支持。在 a 中的任意位置放置一个.container，它设置您的站点和内容的宽度。

<div类= "导航栏" > 
  <div类= “导航栏内部” > 
    <a class = "brand" href = "#" >标题</a>  
    <ul类= “导航” > 
      <li class = "active" ><a href = "#" > Home </a></li>  
      <li><a href = "#" >链接</a></li> 
      <li><a href = "#" >链接</a></li> 
    </ul>
  </div>
</div>

导航栏组件

牌

显示您的品牌或项目名称的简单链接只需要一个锚标签。

<a class = "brand" href = "#" >项目名称</a>  

导航链接

导航项目很容易通过无序列表添加。

<ul类= “导航” > 
  <li class = "活动" > 
    <a href = "#" >主页</a> 
  </li>
  <li><a href = "#" >链接</a></li> 
  <li><a href = "#" >链接</a></li> 
</ul>

您可以使用空列表项和简单的类轻松地将分隔线添加到导航链接。只需在链接之间添加：

<ul类= “导航” > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

形式

要在导航栏中正确设置表单的样式和位置，请添加适当的类，如下所示。对于默认表单，包含.navbar-form和其中之一.pull-left或.pull-right以正确对齐它。

<form class = "navbar-form pull-left" > 
  <输入类型= “文本”类= “span2” >  
  <button type = "submit" class = "btn" >提交</button>  
</form>

搜索表格

要获得更自定义的搜索表单，请在导航栏中添加.navbar-search和form输入.search-query以获取专用样式。

<form class = "navbar-search pull-left" > 
  <输入类型= “文本”类= “搜索查询”占位符= “搜索” >   
</form>

组件对齐

对齐导航链接、搜索表单或文本，使用.pull-left或.pull-right实用程序类。两个类都将在指定方向添加 CSS 浮动。

使用下拉菜单

使用一些标记和下拉菜单 javascript 插件将下拉菜单和下拉菜单添加到导航。

<ul类= “导航” > 
  <li class = "下拉菜单" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      帐户
      <b类= "插入符号" ></b> 
    </a>
    <ul class = "下拉菜单" > 
      ...
    </ul>
  </li>
</ul>

访问javascript 下拉列表文档以获取有关调用下拉列表的更多标记和信息。

文本

用 将文本字符串包裹在一个元素中.navbar-text，通常在一个<p>标签上以获得正确的前导和颜色。

可选的显示变化

将导航栏固定到视口的顶部或底部，并在最外层的 div 上添加一个类，.navbar.

固定在顶部

添加.navbar-fixed-top并记住通过将至少 40px 添加padding到<body>. 请务必在核心 Bootstrap CSS 之后和可选的响应式 CSS 之前添加它。

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

固定在底部

.navbar-fixed-bottom改为添加。

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

静态顶部导航栏

创建一个全宽导航栏，通过添加.navbar-static-top. 与.navbar-fixed-top类不同，您不需要更改body.

<div class = "navbar navbar-static-top" > 
  ...
</div>

响应式导航栏

要实现折叠响应式导航栏，请将导航栏内容包装在包含 div 的 div 中.nav-collapse.collapse，并添加导航栏切换按钮.btn-navbar.

<div类= "导航栏" > 
  <div类= “导航栏内部” > 
    <div类= “容器” > 
 
      <!-- .btn-navbar 用作折叠导航栏内容的切换 -->
      <一个类= “btn btn-navbar”数据切换= “折叠”数据目标= “. nav-折叠” >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- 如果您想显示品牌，请务必将其保留在那里 -->
      <a class = "brand" href = "#" >项目名称</a>  
 
      <!-- 任何你想隐藏在 940px 或以下的东西，都放在这里 -->
      <div类= “导航折叠” > 
        <!-- .nav、.navbar-search、.navbar-form 等 -->
      </div>
 
    </div>
  </div>
</div>

倒变式

通过添加来修改导航栏的外观.navbar-inverse。

<div类= "导航栏 navbar-inverse" > 
  ...
</div>

例子

显示的单个示例可能会跨多个页面显示。

<ul类= “面包屑” > 
  <li><a href = "#" >主页</a> <span class = "divider" > / </span></li>   
  <li><a href = "#" >库</a> <span class = "divider" > / </span></li>   
  <li class = "active" >数据</li> 
</ul>

标准分页

受 Rdio 启发的简单分页，非常适合应用程序和搜索结果。大块很难错过，易于扩展，并提供大点击区域。

<div类= “分页” > 
  <ul>
    <li><a href = "#" >上一页</a></li> 
    <li><a href = "#" > 1 </a></li> 
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4​​ </a></li> 
    <li><a href = "#" >下一个</a></li> 
  </ul>
</div>

选项

禁用和活动状态

链接可针对不同情况进行定制。用于.disabled不可点击的链接并.active指示当前页面。

<div类= “分页” > 
  <ul>
    <li class = "disabled" ><a href = "#" > Prev </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

结盟

添加两个可选类之一以更改分页链接的对齐方式：.pagination-centered和.pagination-right.

<div class = "分页以分页为中心" > 
  ...
</div>

<div class = "分页分页权" > 
  ...
</div>

寻呼机

带有轻标记和样式的简单分页实现的快速上一个和下一个链接。它非常适合博客或杂志等简单网站。

默认示例

默认情况下，寻呼机将链接居中。

<ul类= “寻呼机” > 
  <li><a href = "#" >上一页</a></li> 
  <li><a href = "#" >下一个</a></li> 
</ul>

对齐的链接

或者，您可以将每个链接对齐到两侧：

<ul类= “寻呼机” > 
  <li class = "上一个" > 
    <a href = "#" > ← 年长的</a> 
  </li>
  <li类= “下一个” > 
    <a href = "#" >较新的 → </a> 
  </li>
</ul>

可选禁用状态

寻呼机链接也使用分页中的通用.disabled实用程序类。

<ul类= “寻呼机” > 
  <li class = "以前的禁用" > 
    <a href = "#" > ← 年长的</a> 
  </li>
  ...
</ul>

标签

徽章

英雄单位

一个轻量级、灵活的组件，用于展示您网站上的关键内容。它适用于营销和内容密集的网站。

<div class = "英雄单位" > 
  <h1>标题</h1>
  <p>标语</p>
  <p>
    <a类= "btn btn-primary btn-large" > 
      学到更多
    </a>
  </p>
</div>

页眉

一个简单的外壳，用于h1适当地分隔和分割页面上的内容部分。它可以利用h1's default small, 元素以及大多数其他组件（带有其他样式）。

<div类= "页眉" > 
  <h1>示例页眉</h1>
</div>

默认缩略图

默认情况下，Bootstrap 的缩略图旨在展示所需标记最少的链接图像。

高度可定制

通过一些额外的标记，可以将任何类型的 HTML 内容（如标题、段落或按钮）添加到缩略图中。

为什么使用缩略图

缩略图（以前.media-grid直到 v1.4）非常适合照片或视频网格、图像搜索结果、零售产品、投资组合等等。它们可以是链接或静态内容。

简单、灵活的标记

缩略图标记很简单——只要ul包含任意数量的li元素即可。它也非常灵活，允许任何类型的内容，只需更多标记即可包装您的内容。

使用网格列大小

最后，缩略图组件使用现有的网格系统类（如.span2或.span3）来控制缩略图尺寸。

标记

如前所述，缩略图所需的标记简单明了。以下是链接图像的默认设置：

<ul类= “缩略图” > 
  <li类= "span4" > 
    <a href = "#"类= "缩略图" >  
      <img src = "https://placehold.it/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

对于缩略图中的自定义 HTML 内容，标记会略有变化。<a>为了允许任何地方的块级内容，我们将其换成<div>这样的：

<ul类= “缩略图” > 
  <li类= "span4" > 
    <div类= "缩略图" > 
      <img src = "https://placehold.it/300x200" alt = "" >  
      <h3>缩略图标签</h3>
      <p>缩略图标题... </p>
    </div>
  </li>
  ...
</ul>

更多示例

使用可供您使用的各种网格类探索所有选项。您还可以混合搭配不同的尺寸。

默认警报

将任何文本和可选的关闭按钮包裹起来，.alert以获得基本的警告警报消息。

<div类= "警报" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <strong>警告！</strong>最好检查一下自己，你看起来不太好。
</div>

关闭按钮

Mobile Safari 和 Mobile Opera 浏览器除了该data-dismiss="alert"属性外，还需要href="#"在使用<a>标签时解除警报。

<a href = "#" class = "close" data-dismiss = "alert" > × </button>   

或者，您可以使用<button>具有 data 属性的元素，我们选择为我们的文档执行此操作。使用时<button>，您必须包含，type="button"否则您的表格可能无法提交。

<button type = "button" class = "close" data-dismiss = "alert" > × </button>   

通过 javascript 关闭警报

使用alerts jQuery 插件可以快速轻松地解除警报。

选项

对于较长的消息，请通过添加来增加警报包装器顶部和底部的填充.alert-block。

<div class = "alert alert-block" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <h4>警告！</h4>
  最好自己检查一下，你不是...
</div>

上下文替代方案

添加可选类以更改警报的内涵。

错误或危险

<div class = "alert alert-error" > 
  ...
</div>

成功

<div class = "alert alert-success" > 
  ...
</div>

信息

<div类= "警报警报信息" > 
  ...
</div>

示例和标记

基本的

带有垂直渐变的默认进度条。

<div类= “进度” > 
  <div class = "bar" style = " width : 60 %; " ></div>   
</div>

有条纹的

使用渐变创建条纹效果。在 IE7-8 中不可用。

<div class = "progress progress-striped" > 
  <div class = "bar" style = " width : 20 %; " ></div>   
</div>

动画

添加.active到.progress-striped从右到左为条纹设置动画。并非在所有版本的 IE 中都可用。

<div class = "progress progress-striped active" > 
  <div class = "bar" style = " width : 40 %; " ></div>   
</div>

堆叠的

将多个条放入同一条中.progress以堆叠它们。

<div类= “进度” > 
  <div class = "bar bar-success" style = " width : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " width : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " width : 10 %; " ></div>   
</div>

选项

其他颜色

进度条使用一些相同的按钮和警报类来实现一致的样式。

<div class = "进度进度信息" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "进度进度-成功" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "进度进度警告" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

条纹条

与纯色类似，我们有不同的条纹进度条。

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "进度进度-成功进度-条纹" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

浏览器支持

进度条使用 CSS3 渐变、过渡和动画来实现其所有效果。IE7-9 或更早版本的 Firefox 不支持这些功能。

Internet Explorer 10 和 Opera 12 之前的版本不支持动画。

威尔斯

将井用作元素上的简单效果，使其具有嵌入效果。

<div类= “好” > 
  ...
</div>

选修课

使用两个可选的修饰符类控制填充和圆角。

<div class = "好好-大" > 
  ...
</div>

<div class = "好-小" > 
  ...
</div>

关闭图标

使用通用关闭图标来关闭模式和警报等内容。

<button class = "close" > × </按钮> 

如果您更愿意使用锚点，iOS 设备需要一个 href="#" 来表示点击事件。

<a class = "close" href = "#" > × </a>  

助手类

用于小型显示或行为调整的简单、集中的类。

.pull-left

向左浮动一个元素

类= “拉左”

. 拉-左{
  浮动：左；
}

.pull-right

向右浮动元素

类= “拉右”

. 拉-右{
  浮动：对；
}

.静音

将元素的颜色更改为#999

类= “静音”

. 静音{
  颜色：#999； 
}

.clearfix

清除float任何元素上的

类= “清除修复”

. 清除修复{
  *缩放：1 ； 
  &：之前，
  &：在{之后
    显示：表格；
    内容：“” ； 
  }
  &：在{之后
    明确：两者；
  }
}