@黄小泽的个人博客

有一段时间没写博客了，在忙着公司的项目上线。最近终于有了点空闲时间，打算写一些关于前端响应式框架，头脑中第一时间就冒出了Bootstrap，毕竟它是Github上Star数最多的框架之一，下面简称bs。虽然bs的中文资料还蛮多的，百度一下就有一堆，但为了方便记忆，我还是想写一系列博文把它们分类总结一下。平心而论，作为一个前端工程师，我并不会很热衷于使用bs框架，因为我参与的项目中至少会

警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息。警告框的样式有以下几种：.alert .alert-success：表示成功。.alert .alert-info：表示信息。.alert .alert-warning：表示警告。.alert .alert-danger：表示危险。.alert-dismissable：放置在带.alert的中，常与一个带

进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 不支持动画。进度条的颜色样式有以下几种：.progress-bar-success、.progress-bar-info、.progress-bar-warning、.progress-bar-danger。演示代码： 默认进度

列表组件用于以列表形式呈现复杂的和自定义的内容。比如说可以用于制作API列表界面，列表组样式有以下几种：.list-group：列表组样式定义.list-group-item：列表组选项样式定义.list-group-item-heading：选项标题.list-group-item-text：选项文本常用格式有两种：第一种： 第二种： 普通

面板组件用于把 DOM 组件插入到一个盒子中，比如组件表格或者列表组。面板的主要界面效果用于如超市的物价面板、动车进出站实时信息面板等。有关面板的样式有以下几种：.panel .panel-default：默认面板格式。.panel-primary：面板前景色.panel-heading：面板头部.panel-title：面板头部标题.panel-body：面板主体内容，一般为

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。Scrollspy的样式有以下几种：data-spy="scroll",放在想要监听的元素，一般为或data-target=".navbar",滚动导航栏，一般为data-offset,当计算滚动

当您想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。提示工具（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。激活脚本：$(function() {$("[data-toggle='tooltip']").tooltip();});Tooltip的API如下：

折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。折叠插件API如下入参项：（1）parent，属性data-parent（默认为false），如果提供了一个选择器，当可折叠项目显示时，指定父元素下的所有可折叠的元素将被关闭。（2）toggle，属性data-toggle（默认为true），切换调用可折叠元素。

模态框是bs框架的插件之一，之所以称为插件，是因为它有这自己的一套API，可以通过API提供的接口实现对模态框的控制。只要 是bs框架插件，都支持以下几个共同的属性：data-toggle属性：表示点击或链接时触发的事件。data-target属性：表示点击或链接时触发的事件后将要被显示或隐藏的目标元素。data-dismiss：是bootstrap里自定义的属性，给一个元素data-

bs对图片的处理只有简单的遮罩功能，如把一张图片变为圆形、正方形等。.img-rounded：为图片添加圆角 .img-circle：将图片变为圆形.img-thumbnail：缩略图功能.img-responsive：块级显示，宽为100%，高为自适应。图片响应式 (将很好地扩展到父元素)演示代码： img { width: 200px; height:

字体图标是bs框架中非常好用的一个功能，只要添加简单的样式，无需导入图标即可实现图标的显示。通常使用渲染字体图标，并将该元素放置在或内。这个是bs提供的字体图标的地址：http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm演示代码： User Tree-deciduous

网格系统，也叫栅格系统，是bs中最常用也是最核心的布局方式。大家知道，一个前端界面是由多个块级元素组建而成，而我们常用到的块级元素就是div，网格系统就是将一个div划为等分12列。为了使网格系统能支持不同的分辨率，网格的列定义也分为了4种类型，分别是.col-xs、.col-sm、.col-md、.col-lg，它们与分辨率宽度的对应关系如下：超小设备手机（小型设备平板电脑（≥768px

本篇主要分享关于bs中段落、文本的组件样式，是一些较简单的样式实现。段落元素用表示，较常用与段落元素样式有：文字颜色、背景颜色和对齐方式。文字颜色样式主要有以下6种：.text-muted：减弱.text-primary：主要.text-success：成功.text-info：信息.text-warning：警告.text-danger：危险演示代码：

通过bs，可以很轻松地建出一个表格组件。以下是建表格组件必须认识的一些标签。标签描述为表格添加基础样式。表格标题行的容器元素（），用来标识表格列。表格主体中的表格行的容器元素（）。一组出现在单行上的表格单元格的容器元素（ 或 ）。默认的表格单元格。

本篇介绍几种常用的表单组件：输入框、文本框、选择框、单选框和多选框。输入框代码演示： 当输入框需要配合标识符或按钮组合使用时，可以使用输入框组，用.input-group表示输入框组的样式，.input-group-addon表示标识符样式，input-group-btn表示按钮样式。代码演示： @ 搜索 效果图：文本框常用于博客留言或

按钮是前端最常用到的组件，bs提供有关按钮的样式有分为独立按钮、按钮组和按钮插件三种。独立按钮，可用于, , 或 元素上。（1）颜色样式：.btn-default：默认/标准按钮.btn-primary：主要.btn-success：成功.btn-info：信息.btn-warning：警告.btn-danger：危险演示代码：默认按钮原始按钮

导航条，是网页设计中不可缺少的部分，它是指通过一定的技术手段，为网站的访问者提供一定的途径，使其可以方便地访问到所需的内容，是人们浏览网站时可以快速从一个页面转到另一个页面的快速通道。导航栏则是指除了导航条外，还可能有搜索、登录和注册等功能块，常位于网页中的最顶部。导航条bs提供的导航条有两种：标签式和胶囊式。标签式导航条用.nav .nav-tabs样式表示，胶囊式用.nav .nav-

下拉列菜单，是以列表格式显示链接的上下文菜单。下拉列菜单选择后，是打开超链接的新页面，此处要清楚与上篇中选择框的区别。下拉列菜单可以单独使用，但更多的配合导航栏使用。下面是下拉列菜单用到的几种样式：.dropdown：指定下拉菜单整体样式，下拉菜单都包裹在 .dropdown 里，与之相反的是.dropup.dropdown-toggle：指下拉列点击按钮样式，按钮内常含尖角符号.dr

分页功能已经封装成一个独立的js文件，也是用bs完成的，名称为bootstrap-paginator.js。使用前先导入文件 ：演示代码： 分页 $(function() { var currentPage = 1; var totalPages = 2; $("#page").bootstrapPaginator({ bootst

附加导航（Affix）插件允许某个 固定在页面的某个位置。您也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 会锁定在某个位置，不会随着页面其他部分一起滚动。附加导航API只有一个，入参项：offset，属性data-offset（默认值为10），当计算滚动位置时，距离顶部的偏移像素。如果设置了一个数字，则该偏移量的值将