Bootstrap 布局组件

Bootstrap 字体图标(Glyphicons)

字体图标是在 Web 项目中使用的图标字体。虽然，Glyphicons Halflings 需要商业许可，可以通过基于项目的 Bootstrap 来免费使用这些图标。





Bootstrap 下拉菜单（Dropdowns）

下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。
使用下拉菜单，需要在 class .dropdown 内加上下拉菜单。
可以使用 class dropdown-header 向下拉菜单的标签区域添加标题。
文本链接

下拉菜单的常用属性.png

Bootstrap 按钮组

按钮组允许多个按钮被堆叠在同一行上。

按钮属性1 (1).png

按钮属性2.png

嵌套

可以在一个按钮组内嵌套另一个按钮组，即在一个 .btn-group 内嵌套另一个 .btn-group 。

垂直的按钮组

Bootstrap 输入框组

通过向输入域添加前缀和后缀的内容可以向用户输入添加公共的元素。

向 .form-control 添加前缀或后缀元素的步骤如下：

• 把前缀或后缀元素放在一个带有 class .input-group 的
  中。
• 接着，在相同的
  内，在 class 为 .input-group-addon 的 内放置额外的内容。
• 把该 放置在 元素的前面或者后面。

按钮插件

可以把按钮作为输入框组的前缀或者后缀元素，需要使用 class .input-group-btn 来包裹按钮。



Go!




Bootstrap 导航元素

表格导航或标签

创建一个标签式的导航菜单：

• 以一个带有 class .nav 的无序列表开始。
• 添加 class .nav-tabs。

胶囊式的导航菜单

基本的胶囊式导航菜单

使用 class .nav-pills 属性。


...





垂直的胶囊式导航菜单

在使用 class .nav、.nav-pills 的同时使用 class .nav-stacked，让胶囊垂直堆叠。


...





导航元素属性.png

Bootstrap 导航栏

默认的导航栏

创建一个默认的导航栏的步骤：

• 向
  标签添加 class .navbar、.navbar-default。
• 向上面的元素添加 role="navigation"，有助于增加可访问性。
• 向
  元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 a元素。这会让文本看起来更大一号。
• 为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

导航栏中的按钮

可以使用 class .navbar-btn 向不在

中的 元素添加按钮，按钮在导航栏上垂直居中。.navbar-btn 可被使用在 a 和 input 元素上。
不要在 .navbar-nav 内的a 元素上使用 .navbar-btn，因为它不是标准的 button class。

导航栏中的文本

用 class .navbar-text在导航中添加文本字符串。通常与 p 标签一起使用，确保适当的前导和颜色。



Runoob 用户登录




固定到顶部

Bootstrap 导航栏可以动态定位。默认情况下，它是块级元素，它是基于在 HTML 中放置的位置定位的。通过一些帮助器类，可以把它放置在页面的顶部或者底部，或者可以让它成为随着页面一起滚动的静态导航栏。

• 如果想要让导航栏固定在页面的顶部，向 .navbar class 添加 class .navbar-fixed-top。
• 如果想要让导航栏固定在页面的底部，请向 .navbar class 添加 class .navbar-fixed-bottom
• 如需创建能随着页面一起滚动的导航栏，添加 .navbar-static-top class。该 class 不要求向 添加内边距（padding）。
  反色的导航栏
• 为了创建一个带有黑色背景白色文本的反色的导航栏，只需要向 .navbar class 添加 .navbar-inverse class 属性。

Bootstrap 面包屑导航（Breadcrumbs）

Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb class 的无序列表。


< li>Home
< li>2013
< li class="active">十一月





Bootstrap 分页

分页属性.png

翻页（Pager）

翻页属性.png

Bootstrap 标签

标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签
< h1>Example Heading Label< /h1>

Bootstrap 超大屏幕（Jumbotron）

超大屏幕（Jumbotron）可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。

• 创建一个带有 class .jumbotron. 的容器
  。
• 除了更大的 < h1>，字体粗细 font-weight 被减为 200。

为了获得占用全部宽度且不带圆角的超大屏幕，在所有的 .container class 外使用 .jumbotron class

举例.png

Bootstrap 缩略图

使用 Bootstrap 创建缩略图的步骤如下：

• 在图像周围添加带有 class .thumbnail 的 < a> 标签。
• 这会添加四个像素的内边距（padding）和一个灰色的边框。
• 当鼠标悬停在图像上时，会动画显示出图像的轮廓。

添加自定义的内容

可以向缩略图添加各种 HTML 内容.

• 把带有 class .thumbnail 的 < a> 标签改为
  。
• 在该
  内，可以添加任何您想要添加的东西。由于这是一个

  ，可以使用默认的基于 span 的命名规则来调整大小。
• 如果想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。

Bootstrap 警告（Alerts）

• 通过创建一个
  ，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
• 向上面的
  class 添加可选的 .alert-dismissable创建一个可取消的警告。

Bootstrap 进度条

创建一个基本的进度条的步骤如下：

• 添加一个带有 class .progress 的
  。
• 接着，在上面的
  内，添加一个带有 class .progress-bar 的空的

  。
• 添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

条纹进度条

在含有class . progress属性的

内，添加progress-striped属性

动画的进度条

在含有class . progress属性的

内，添加active属性

Bootstrap 多媒体对象（Media Object）

设置媒体对象：

• .media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
• .media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。

Bootstrap 列表组

列表组件用于以列表形式呈现复杂的和自定义的内容。
创建一个基本的列表组的步骤：

• 向元素 < ul> 添加 class .list-group。
• 向 < li> 添加 class .list-group-item。
  
  
  
  • 免费域名注册
  
  
  • 免费 Window 空间托管
  
  
  • 图像的数量
  
  
  • 24*7 支持
  
  
  • 每年更新成本
  
  
  
  

Bootstrap 面板（Panels）

面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向

元素添加 class .panel 和 class .panel-default .

这是一个基本的面板