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

引言

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

Bootstrap的优点：

  • 移动设备优先。
  • 响应式设计。基于bootstrap的网站和系统，能够自适应于台式机、平板电脑和手机。
  • 容易上手。前置技能：HTML和CSS的基础知识即可。
  • 浏览器支持比较好。IE、FireFox、Chrome、Opera、Safari等。
  • 文档比较完善、内置组件比较多，容易定制。
  • 开源。

准备

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

开始

文件结构

bootstrap/

  • css/
    • bootstrap.css
    • bootstrap.min.css
    • bootstrap-theme.css
    • bootstrap-theme.min.css
  • js/
    • bootstrap.js
    • bootstrap.min.js

Bootstrap使用

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
    <meta charset="UTF-8">
    <title>Bootstrap使用和效果预览</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="/css/bootstrap.min.css">
	
	<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
	<link rel="stylesheet" href="/css/bootstrap-theme.min.css">
    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="/js/jquery.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="/js/bootstrap.min.js"></script>
</head>

Bootstrap的相关概念

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

1
2
3
4
5
6
7
8
9
10
11
/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

具体设置及行为见下表：

超小设备手机（<768px） 小型设备平板电脑（≥768px） 中型设备台式电脑（≥992px） 大型设备台式电脑（≥1200px）
网格行为 一直是水平的 以折叠开始，断点以上是水平的 以折叠开始，断点以上是水平的 以折叠开始，断点以上是水平的
最大容器宽度 None (auto) 750px 970px 1170px
Class 前缀 .col-xs- .col-sm- .col-md- .col-lg-
列数量和 12 12 12 12
最大列宽 Auto 60px 78px 95px
间隙宽度 30px（一个列的每边分别 15px） 30px（一个列的每边分别 15px） 30px（一个列的每边分别 15px） 30px（一个列的每边分别 15px）
可嵌套 Yes Yes Yes Yes
偏移量 Yes Yes Yes Yes
列排序 Yes Yes Yes Yes

Bootstrap怎么用？

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

1
2
3
4
5
6
7
8
<div class="container">
   <div class="row">
      <!-- 在一个div中的class中定义col-*-*，第一个星号的值范围是[xs,sm,md,lg] ，第二个星号的值范围是1-12-->
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>

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模态框组件的实现比较繁琐，因此可以在网上找相关插件处理。

文档

致谢

在学习过程中，经常在菜鸟教程http://www.runoob.com/查阅资料，表示感谢。