按钮组

使用按钮组将多个按钮连接在一起作为一个复合组件。用一系列<a>或<button>元素构建它们。

最佳实践

对于使用按钮组和工具栏，我们建议遵循以下准则：

• 始终在单个按钮组中使用相同的元素，<a>或<button>.
• 不要在同一个按钮组中混用不同颜色的按钮。
• 使用图标作为文本的补充或替代，但请确保在适当的情况下包含 alt 和标题文本。

带有下拉菜单的相关按钮组（见下文）应单独调用，并始终包含一个下拉插入符号以指示预期行为。

默认示例

以下是 HTML 如何查找使用锚标记按钮构建的标准按钮组：

<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>

复选框和收音机口味

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

获取 JavaScript »

按钮组中的下拉菜单

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

概述和示例

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

示例标记

与按钮组类似，我们的标记使用常规按钮标记，但添加了一些改进样式并支持 Bootstrap 的下拉 jQuery 插件。

<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 解决对齐问题。

概述和示例

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

尺寸

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

<div class = "btn-group" > 
  ...
  <ul class = "下拉菜单向右" > 
    <!-- 下拉菜单链接 -->
  </ul>
</div>

示例标记

我们扩展了普通按钮下拉菜单，以提供第二个按钮操作，该操作作为单独的下拉触发器操作。

<div class = "btn-group" > 
  <button class = "btn" >动作</button> 
  <按钮类= “btn下拉切换”数据切换= “下拉” >  
    <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。

何时使用

标签和药丸非常适合内容部分或在相关内容页面之间导航。

组件对齐

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

基本选项卡

获取常规<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>

如何堆叠它们

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

堆叠标签

• 家
• 轮廓
• 留言

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

堆叠药丸

• 家
• 轮廓
• 留言

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

丰富的菜单变得简单

Bootstrap 选项卡和药丸中的下拉菜单非常简单，只需要一点额外的 HTML 和一个轻量级的 jQuery 插件。

前往 Javascript 页面阅读有关在 Bootstrap中初始化下拉菜单的文档。

带有下拉菜单的选项卡

• 家
• 帮助
• 落下
  • Action
  • Another action
  • Something else here
  • Separated link

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

带有下拉菜单的药丸

• 家
• 帮助
• 落下
  • Action
  • Another action
  • Something else here
  • Separated link

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

应用式导航

导航列表提供了一种简单易用的方法来构建带有可选标题的导航链接组。它们最适合用于 OS X 中的 Finder 等侧边栏。

从结构上讲，它们与标签和药丸建立在相同的核心导航样式上，因此使用和定制很简单。

带图标

导航列表也很​​容易配备图标。使用类添加适当的<i>标签，您就可以设置了。

水平分隔线

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

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

示例导航列表

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

<ul类= “导航导航列表” > 
  <li类= “导航标题” > 
    列表标题
  </li>
  <li class = "活动" > 
    <a href = "#" >主页</a> 
  </li>
  <li>
    <a href = "#" >库</a> 
  </li>
  ...
</ul>

带有图标的示例

相同的示例，但带有<i>图标标签。

<ul类= “导航导航列表” > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      图书馆
    </a>
  </li>
  ...
</ul>

包括什么

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

在它们之间进行更改很容易，只需要更改很少的标记。

淡入标签

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

需要 jQuery 插件

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

获取 javascript →

可选项卡示例

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

对于右对齐或左对齐的标签，将.nav-tabsand包裹.tab-content在.tabbable.

直截了当的标记

使用可选项卡需要一个包装 div、一组选项卡和一组可选项卡的内容窗格。

<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>

底部的标签

翻转 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>

导航栏脚手架

导航栏只需要几个 div 就可以很好地为静态或固定显示构建它。

<div类= "导航栏" > 
  <div类= “导航栏内部” > 
    <div类= “容器” > 
      ...
    </div>
  </div>
</div>

固定导航栏

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

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

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

粘贴导航栏时，请记住考虑下方的隐藏区域。添加 40px 或更多的填充到<body>. 请务必在核心 Bootstrap CSS 之后和可选的响应式 CSS 之前添加它。

品牌

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

<a类= "品牌" href = "#" >  
  项目名称
</a>

导航栏中的表单

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

<form class = "navbar-form pull-left" > 
  <输入类型= “文本”类= “span2” >  
</form>

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

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

可选的响应变化

根据顶部栏中的内容量，您可能希望实现响应式选项。为此，请将您的导航内容包装在包含 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>

导航链接

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

<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>

组件对齐

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

添加下拉菜单

向导航添加下拉菜单和下拉菜单非常简单，但确实需要使用我们的 javascript 插件。

<ul类= “导航” > 
  <li class = "下拉菜单" > 
    <a href = "#" 
          类= “下拉切换”
          数据切换= “下拉” >
          帐户
          <b类= "插入符号" ></b> 
    </a>
    <ul class = "下拉菜单" > 
      ...
    </ul>
  </li>
</ul>

获取 javascript →

导航栏中的文本

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

为什么使用它们

面包屑导航用于向用户显示他们在应用程序或网站中的位置，但不适用于主导航。保持它们的使用稀疏和简洁是最有效的。

例子

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

• 家

• 主页 /
• 图书馆

• 主页 /
• 图书馆 /
• 数据

标记

HTML 是带有链接的标准无序列表。

<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 启发的超简单和极简风格的分页，非常适合应用程序和搜索结果。大块很难错过，易于扩展，并提供大点击区域。

有状态的页面链接

链接是可定制的，并且可以在多种情况下使用正确的类。.disabled对于不可点击的链接和.active当前页面。

灵活对齐

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

例子

默认的分页组件是灵活的，并且可以在许多变体中工作。

标记

包裹在一个<div>，分页只是一个<ul>。

<div类= “分页” > 
  <ul>
    <li><a href = "#" >上一页</a></li> 
    <li class = "活动" > 
      <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类。

默认示例

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

• 以前的
• 下一个

<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>

关于

徽章是用于显示某种指标或计数的小而简单的组件。它们通常出现在 Mail.app 等电子邮件客户端或用于推送通知的移动应用程序中。

可用课程

Bootstrap 提供了一个轻量级、灵活的组件，称为英雄单元，用于在您的网站上展示内容。它适用于营销和内容密集的网站。

标记

将您的内容包装成div这样：

<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 内容（如标题、段落或按钮）添加到缩略图中。

• 

  缩略图标签

  Cras justo odio，dapibus ac facilisis in，egestas eget quam。Donec id elit non mi porta gravida 在 eget metus。Nullam id dolor id nibh ultricies vehicula ut id elit。

  行动 行动

• 

  缩略图标签

  Cras justo odio，dapibus ac facilisis in，egestas eget quam。Donec id elit non mi porta gravida 在 eget metus。Nullam id dolor id nibh ultricies vehicula ut id elit。

  行动 行动

为什么使用缩略图

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

简单、灵活的标记

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

使用网格列大小

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

标记

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

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

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

<ul类= “缩略图” > 
  <li类= "span3" > 
    <div类= "缩略图" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5>缩略图标签</h5>
      <p>缩略图标题就在这里...... </p>
    </div>
  </li>
  ...
</ul>

更多示例

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

重写基类

在 Bootstrap 2 中，我们简化了基类：.alert而不是.alert-message. 我们还减少了所需的最低标记——<p>默认情况下不需要，只需要外部<div>.

单个警报消息

对于代码更少、更耐用的组件，我们删除了块警报、带有更多填充和通常更多文本的消息的差异化外观。班级也已更改为.alert-block.

非常适合使用 javascript

Bootstrap 带有一个很棒的 jQuery 插件，它支持警报消息，可以快速轻松地解除它们。

获取插件 »

示例警报

用简单的类将您的消息和可选的关闭图标包装在一个 div 中。

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

小心！iOS 设备需要一个href="#"来解除警报。确保包含它和锚点关闭图标的数据属性。或者，您可以使用button具有 data 属性的元素，我们选择为我们的文档执行此操作。

使用两个可选类轻松扩展标准警报消息：.alert-block更多填充和文本控件以及.alert-heading匹配标题。

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

错误或危险

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

成功

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

信息

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

基本的

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

<div类= “进度” > 
  <div类= “酒吧” 
       样式= "宽度: 60 %; " ></div> 
</div>

有条纹的

使用渐变创建条纹效果（无 IE）。

<div class = "progress progress-striped" > 
  <div类= “酒吧” 
       样式= "宽度: 20 %; " ></div> 
</div>

动画

采用条纹示例并对其进行动画处理（无 IE）。

<div class = "进度进度条 
     活跃” >
  <div类= “酒吧” 
       样式= "宽度: 40 %; " ></div> 
</div>

其他颜色

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

条纹条

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

行为

进度条使用 CSS3 过渡，因此如果您通过 javascript 动态调整宽度，它将平滑调整大小。

如果您使用.active该类，您的.progress-striped进度条将从左到右为条纹设置动画。

浏览器支持

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

Opera 和 IE 目前不支持动画。

威尔斯

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

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

关闭图标

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

×

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

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

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