根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定视频或 slideshow 的尺寸，能够在各种设备上缩放。这些规则被直接应用在 <iframe>、<embed>、<video> 和 <object> 元素上。如果你希望让最终样式与其他属性相匹配，还可以明确地使用一个派生出来的 .embed-responsive-item 类。超级提示： 不需要为 <iframe>
虽然不总是必须，但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况，可以试试面板组件。基本实例默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。<div class="panel panel-default"> <div class="panel-body"> Basic panel example </div></div>带标题的面版通过 .
列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容。基本实例最简单的列表组仅仅是一个带有多个列表条目的无序列表，另外还需要设置适当的类。我们提供了一些预定义的样式，你可以根据自身的需求通过 CSS 自己定制。<ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <
这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。默认样式默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。<div class="media"> <div class="media-left"> <a href="#"> <img class="media-object" src="...
通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈。跨浏览器兼容性进度条组件使用了 CSS3 的 transition 和 animation 属性来完成一些特效。这些特性在 Internet Explorer 9 或以下版本中、Firefox 的老版本中没有被支持。Opera 12 不支持 animation 属性。基本实例默认样式的进度条<div class="progress"> <
警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息。实例将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert 类是必须要设置的，另外我们还提供了有特殊意义的 4 个类（例如，.alert-success），代表不同的警告信息。没有默认类警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。
通过缩略图组件扩展 Bootstrap 的 栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。如果你想实现一个类似 Pinterest 的页面效果（不同高度和/宽度的缩略图顺序排列）的话，你需要使用一个第三方插件，比如 Masonry、Isotope 或 Salvattore。默认样式的实例Boostrap 缩略图的默认设计仅需最少的标签就能展示带链接的图片。<div class="row"> <
页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果，还支持大部分其他组件（需要增加一些额外的样式）。<div class="page-header"> <h1>Example page header <small>Subtext for header</small></h1></div>
这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容。<div class="jumbotron"> <h1>Hello, world!</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p></div>
给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目。<a href="#">Inbox <span class="badge">42</span></a><button class="btn btn-primary" type="button"> Messages <span class="badge">4</span></button>
实例<h3>Example heading <span class="label label-default">New</span></h3>可用的变体用下面的任何一个类即可改变标签的外观。<span class="label label-default">Default</span><span class="label label-primary">Primary</span><span class="label label-success">Success</span><
为您的网站或应用提供带有展示页码的分页组件，或者可以使用简单的翻页组件。默认分页受 Rdio 的启发，我们提供了这个简单的分页组件，用在应用或搜索结果中超级棒。组件中的每个部分都很大，有点事容易点击、易缩放、点击区域大。<nav> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <
在一个带有层次的导航结构中标明当前页面的位置。各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了。<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li></ol>
默认样式的导航条导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。两端对齐的导航条导航链接已经被弃用了。
Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。在标签页上使用导航需要依赖 JavaScript 标签页插件由于标签页需要控制内容区的展示，因此，你必须使用 标签页组件的 JavaScript 插件。另外还要添加 role 和 ARIA 属性 – 详细信息请参考该插件的 实例。确保导航组件的可访问性如果你在使用导航组件实现导航条功能，务必在 <
通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 类，可以给 .form-control 的前面或后面添加额外的元素。只支持文本输入框 <input>这里请避免使用 <select> 元素，因为 WebKit 浏览器不能完全绘制它的样式。避免使用 <textarea>
把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。插件依赖：按钮式下拉菜单依赖下拉菜单插件 ，因此需要将此插件包含在你所使用的 Bootstrap 版本中。单按钮下拉菜单只要改变一些基本的标记，就能把按钮变成下拉菜单的开关。<!-- Single button --><div class="btn-group"> <
通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。按钮组中的工具提示和弹出框需要特别的设置当为 .btn-group 中的元素应用工具提示或弹出框时，必须指定 container: 'body' 选项，这样可以避免不必要的副作用（例如工具提示或弹出框触发时，会让页面元素变宽和/或失去圆角）。
用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。实例将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。<div class="dropdown"> <
如何使用出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。不要和其他组件混合使用图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span> 标签，并将图标类应用到这个 <span>
关注时代Java
