Bootstrap列表组本章我们将讲解列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下：向元素<ul>添加class.list-group。向<li>添加class.list-group-item。下面的实例演示了这点：实例<ulclass="list-group"><liclas...

[阅读全文]

Bootstrap多媒体对象（MediaObject）本章我们将讲解Bootstrap中的多媒体对象（MediaObject），如：图像、视频、音频等。多媒体对象的样式可用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。...

[阅读全文]

Bootstrap进度条本章将讲解Bootstrap进度条。在本教程中，您将看到如何使用Bootstrap创建加载、重定向或动作状态的进度条。Bootstrap进度条使用CSS3过渡和动画来获得该效果。InternetExplorer9及之前的版本和旧版的Firefox不支持该特性，Opera12不支持动画。默认的进度...

[阅读全文]

Bootstrap警告（Alerts）本章将讲解警告（Alerts）以及Bootstrap所提供的用于警告的class。警告（Alerts）向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。您可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框，请使用警告（Alerts）jQ...

[阅读全文]

Bootstrap缩略图本章将讲解Bootstrap缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap通过缩略图为此提供了一种简便的方式。使用Bootstrap创建缩略图的步骤如下：在图像周围添加带有class.thumbnail的<a>标签。这会添加四个像素的内边距（padding）和一个灰色...

[阅读全文]

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

[阅读全文]

Bootstrap超大屏幕（Jumbotron）本章将讲解Bootstrap支持的另一个特性，超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：创建一个带有class.jumbotron.的容器<div>。除...

[阅读全文]

Bootstrap徽章（Badges）本章将讲解Bootstrap徽章（Badges）。徽章与标签相似，主要的区别在于徽章的边角更加圆滑。徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把<spanclass="badge">添加到链接、Bootstrap导航等这些元素上即可。下面的实例演示了这...

[阅读全文]

Bootstrap标签本章将讲解Bootstrap标签。标签可用于计数、提示或页面上其他的标记显示。使用class.label来显示标签，如下面的实例所示：实例<h1>ExampleHeading<spanclass="labellabel-default">Label</span></h1><h2>ExampleHe...

[阅读全文]

Bootstrap分页本章将讲解Bootstrap支持的分页特性。分页（Pagination），是一种无序列表，Bootstrap像处理其他界面元素一样处理分页。分页（Pagination）下表列出了Bootstrap提供的处理分页的class。Class描述示例代码.pagination添加该class来在页面上显示...

[阅读全文]

Bootstrap面包屑导航（Breadcrumbs）面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。Bootstrap中的面包屑导航（Breadcrumbs）是一个简单的带有.breadcrumbclas...

[阅读全文]

Bootstrap导航栏导航栏是一个很好的功能，是Bootstrap网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在Bootstrap导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。默认的导航栏创建一个默...

[阅读全文]

Bootstrap导航元素本章我们将讲解Bootstrap提供的用于定义导航元素的一些选项。它们使用相同的标记和基类.nav。Bootstrap也提供了一个用于共享标记和状态的帮助器类。改变修饰的class，可以在不同的样式间进行切换。表格导航或标签创建一个标签式的导航菜单：以一个带有class.nav的无序列表开始。...

[阅读全文]

Bootstrap输入框组本章将讲解Bootstrap支持的另一个特性，输入框组。输入框组扩展自表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在Twitter用户名前添加@，或者应用...

[阅读全文]

Bootstrap按钮下拉菜单本章将讲解如何使用Bootstrapclass向按钮添加下拉菜单。如需向按钮添加下拉菜单，只需要简单地在在一个.btn-group中放置按钮和下拉菜单即可。您也可以使用<spanclass="caret"></span>来指示按钮作为下拉菜单。下面的实例演示了一个基本的简单的按钮下拉菜单：...

[阅读全文]

Bootstrap按钮组按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时，这就显得非常有用。您可以通过Bootstrap按钮（Button）插件添加可选的JavaScript单选框和复选框样式行为。下面的表格总结了Bootstrap提供的使用按钮组的一些重要的class：Class描述代码示例.btn-g...

[阅读全文]

Bootstrap下拉菜单（Dropdowns）本章将重点介绍Bootstrap下拉菜单。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与下拉菜单（Dropdown）JavaScript插件的互动来实现。如需使用下拉菜单，只需要在class.dropdown内加上下拉菜单即可。下面的实例演示了基本的下...

[阅读全文]

Bootstrap字体图标(Glyphicons)@font-face{font-family:'GlyphiconsHalflings';src:url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular...

[阅读全文]

Bootstrap响应式实用工具Bootstrap提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。超小屏幕手机(<768px)小屏幕平板(≥76...

[阅读全文]

Bootstrap辅助类本章将讨论Bootstrap中的一些可能会派上用场的辅助类。文本以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗：类描述实例.text-muted"text-muted"类的文本样式尝试一下.text-primary"text-primary"类的文本样式尝试一下.tex...

[阅读全文]

Bootstrap图片在本章中，我们将学习Bootstrap对图片的支持。Bootstrap提供了三个可对图片应用简单样式的class：.img-rounded：添加border-radius:6px来获得图片圆角。.img-circle：添加border-radius:50%来让整个图片变成圆形。.img-thumb...

[阅读全文]

Bootstrap按钮本章将通过实例讲解如何使用Bootstrap按钮。任何带有class.btn的元素都会继承圆角灰色按钮的默认外观。但是Bootstrap提供了一些选项来定义按钮的样式，具体如下表所示：以下样式可用于<a>,<button>,或<input>元素上：类描述实例.btn为按钮添加基本样式尝试一下.bt...

[阅读全文]

Bootstrap表单在本章中，我们将学习如何使用Bootstrap创建表单。Bootstrap通过一些简单的HTML标签和扩展的类即可创建出不同样式的表单。表单布局Bootstrap提供了下列类型的表单布局：垂直表单（默认）内联表单水平表单垂直或基本表单基本的表单结构是Bootstrap自带的，个别的表单控件自动接收...

[阅读全文]

Bootstrap表格Bootstrap提供了一个清晰的创建表格的布局。下表列出了Bootstrap支持的一些表格元素：标签描述<table>为表格添加基础样式。<thead>表格标题行的容器元素（<tr>），用来标识表格列。<tbody>表格主体中的表格行的容器元素（<tr>）。<tr>一组出现在单行上的表格单元格的...

[阅读全文]

Bootstrap代码Bootstrap允许您以两种方式显示代码：第一种是<code>标签。如果您想要内联显示代码，那么您应该使用<code>标签。第二种是<pre>标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用<pre>标签。请确保当您使用<pre>和<code>标签时，开始和结束标签使用了...

[阅读全文]

Bootstrap排版Bootstrap使用HelveticaNeue、Helvetica、Arial和sans-serif作为其默认的字体栈。使用Bootstrap的排版特性，您可以创建标题、段落、列表及其他内联元素。标题Bootstrap中定义了所有的HTML标题（h1到h6）的样式。请看下面的实例：实例<h1>我...

[阅读全文]

Bootstrap网格系统table.grid{width:100%;border:none;background-color:#F6F4F0;padding:0px;}table.gridtr{text-align:center;}table.gridtd{border:4pxsolidwhite;padding:6...

[阅读全文]

BootstrapCSS概览在这一章中，我们将讲解Bootstrap底层结构的关键部分，包括我们让web开发变得更好、更快、更强壮的最佳实践。HTML5文档类型（Doctype）Bootstrap使用了一些HTML5元素和CSS属性。为了让这些正常工作，您需要使用HTML5文档类型（Doctype）。因此，请在使用Bo...

[阅读全文]

Bootstrap环境安装Bootstrap安装是非常容易的。本章将讲解如何下载并安装Bootstrap，讨论Bootstrap文件结构，并通过一个实例演示它的用法。下载Bootstrap您可以从http://getbootstrap.com/上下载Bootstrap的最新版本。当您点击这个链接时，您将看到如下所示的网...

[阅读全文]

Bootstrap简介什么是Bootstrap？Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的。历史Bootstrap是由Twitter的MarkOtto和JacobThornton开发的。Bootstrap是2011年八月在GitH...

[阅读全文]