好用的前端响应式框架—Bootstrap

引言

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。

Bootstrap的优点：

移动设备优先。

响应式设计。基于bootstrap的网站和系统，能够自适应于台式机、平板电脑和手机。

容易上手。前置技能：HTML和CSS的基础知识即可。

浏览器支持比较好。IE、FireFox、Chrome、Opera、Safari等。

文档比较完善、内置组件比较多，容易定制。

开源。

准备

Bootstrap提供多种使用方式：直接下载Bootstrap并引入；使用BootstrapCDN；包管理工具；npm、RubyGems、Composer、NuGet。这里主要说一下使用第一种方式（直接下载Bootstrap并引入），也是最常见的一种方式，也可以直接使用BootstrapCDN提供的免费CDN加速版本。

下载版本：

下载适用于生产环境的Bootstrap（不包含文档）；

下载Bootstrap源码（包含文档）；

Sass 用于快速地在 Rails、Compass 或 只针对 Sass 的项目中引入。

开始

文件结构

bootstrap/

css/

js/

Bootstrap使用

在使用Bootstrap的html模板中进行使用。

Bootstrap的相关概念

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。 前面有说过bootstrap的一个优点，那就是移动设备优先：优先设计更小的宽度，即默认设计是移动设备的样式，再使用媒体查询来设置平板电脑、台式电脑以及大台式电脑。

具体设置及行为见下表：

Bootstrap怎么用？

在一个div中的class中定义col--，第一个星号的值范围是[xs,sm,md,lg] ，第二个星号的值范围是1-12；因此设置的时候需要注意数值是否规范。

Bootstrap布局组件

Bootstrap 字体图标

Bootstrap 下拉菜单

Bootstrap 按钮组

Bootstrap 按钮下拉菜单

Bootstrap 输入框组

Bootstrap 导航元素

Bootstrap 导航栏

Bootstrap 面包屑导航

Bootstrap 分页

Bootstrap 标签

Bootstrap 徽章

Bootstrap 超大屏幕

Bootstrap 页面标题

Bootstrap 缩略图

Bootstrap 警告

Bootstrap 进度条

Bootstrap 多媒体对象

Bootstrap 列表组

Bootstrap 面板

Bootstrap Wells

Bootstrap插件

Bootstrap 过渡效果

Bootstrap 模态框

Bootstrap 下拉菜单

Bootstrap 滚动监听

Bootstrap 标签页

Bootstrap 提示工具

Bootstrap 弹出框

Bootstrap 警告框

Bootstrap 按钮

Bootstrap 折叠

Bootstrap 轮播

Bootstrap 附加导航

Bootstrap常用插件

表单验证插件 bootstrapValidator

Messenger 弹框组件库

结语

文档上提供的BootstrapDialog模态框组件的实现比较繁琐，因此可以在网上找相关插件处理。

文档

Bootstrap官网：http://www.bootcss.com/

Bootstrap官方文档：https://v3.bootcss.com/components/

致谢