文章: 阅读:

Bootstrap 多媒体对象

Bootstrap 中的多媒体对象（Media Object），如：图像、视频、音频等。多媒体对象的样式可用于创建各种类型的组件（比如 博客评论），可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。多媒体对象可以设置头部、居中、底部对齐，对应的类分别是 .media-top、.media-middle、.media-bottom。此外，还可以使用 .media-heading 类来设置标题。
CSSBootstrap

阅读全文 >>

Bootstrap 进度条

Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 不支持动画。创建一个基本的进度条的步骤如下，添加一个带有 class .progress 的 div。接着，在上面的 div 内，添加一个带有 class .progress-bar 的空的 div。添加一个带有百分比表示的宽度的 style 属性，例如 width 60% 表示进度条在 60% 的位置。
CSSBootstrap

阅读全文 >>

Bootstrap 警告

警告（Alerts）向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框，请使用 警告（Alerts） jQuery 插件。可以通过创建一个 div，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
CSSBootstrap

阅读全文 >>

Bootstrap 缩略图

大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下，在图像周围添加带有 class .thumbnail 的 a 标签。这会添加四个像素的内边距（padding）和一个灰色的边框。当鼠标悬停在图像上时，会动画显示出图像的轮廓。
CSSBootstrap

阅读全文 >>

Bootstrap 页面标题

页面标题（Page Header）是个不错的功能，它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。如需使用页面标题（Page Header），请把您的标题放置在带有 class .page-header 的 div 中。
CSSBootstrap

阅读全文 >>

Bootstrap 超大屏幕

超大屏幕（Jumbotron）顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下，创建一个带有 class .jumbotron 的容器 div。除了更大的 h1，字体粗细 font-weight 被减为 200。为了获得占用全部宽度且不带圆角的超大屏幕，需在所有的 .container class 外使用 .jumbotron class。
CSSBootstrap

阅读全文 >>

Bootstrap 徽章

Bootstrap 徽章（Badges）与标签相似，主要的区别在于徽章的边角更加圆滑。徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 class="badge" 添加到链接、Bootstrap 导航等这些元素上即可。当没有新的或未读的项时，通过 CSS 的 :empty 选择器，徽章会折叠起来，表示里边没有内容。
CSSBootstrap

阅读全文 >>

Bootstrap 分页

Bootstrap 支持分页特性。分页（Pagination），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。如果想要创建一个简单的分页链接为用户提供导航，可通过翻页来实现。与分页链接一样，翻页也是无序列表。默认情况下，链接是居中显示。
CSSBootstrap

阅读全文 >>

Bootstrap 导航栏

导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。Bootstrap 提供了用于定义导航元素的一些选项。它们使用相同的标记和基类 .nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class，可以在不同的样式间进行切换。
CSSBootstrap

阅读全文 >>

Bootstrap 输入框组

输入框组扩展自 表单控件。使用输入框组，可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。通过向输入域添加前缀和后缀的内容，可以向用户输入添加公共的元素。例如，可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。为了保持跨浏览器的兼容性，请避免使用 select 元素，因为它们在 WebKit 浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的 class，输入框组是一个孤立的组件。
CSSBootstrap

阅读全文 >>

Bootstrap 按钮组

按钮组允许多个按钮被堆叠在同一行上。当要把按钮对齐在一起时，这就显得非常有用。可以通过 Bootstrap 按钮（Button） 插件 添加可选的 JavaScript 单选框和复选框样式行为。.btn-group 该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。.btn-toolbar 该 class 有助于把几组 div class="btn-group" 结合到一个 div class="btn-toolbar" 中，一般获得更复杂的组件。
CSSBootstrap

阅读全文 >>

Bootstrap 下拉菜单

Bootstrap 下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。可以使用 class .dropdown-header 向下拉菜单的标签区域添加标题。
CSSBootstrap

阅读全文 >>

Bootstrap 字体图标

Bootstrap 捆绑了 200 多种字体格式的字形。字体图标 (Glyphicons) 是在 Web 项目中使用的图标字体。虽然，Glyphicons Halflings 需要商业许可，但是可以通过基于项目的 Bootstrap 来免费使用这些图标。为了表示对图标作者的感谢，希望在使用时加上 GLYPHICONS 网站的链接。相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。
CSSBootstrap

阅读全文 >>

Bootstrap 响应式实用工具

Bootstrap 提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。从 v3.2.0 版本起，形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性。
CSSBootstrap

阅读全文 >>