Bootstrap 简介
Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。它是一个 CSS/HTML 框架。Bootstrap 提供了优雅的 HTML 和 CSS 规范。Bootstrap 一经推出后颇受欢迎,一直是 GitHub 上的热门开源项目。
为什么使用 Bootstrap?
- 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
- 浏览器支持:所有的主流浏览器都支持 Bootstrap。
- 容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。
- 响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
- 它为开发人员创建接口提供了一个简洁统一的解决方案。
- 它包含了功能强大的内置组件,易于定制。
- 它还提供了基于 Web 的定制。
- 它是开源的。
Bootstrap 包的内容
- 基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
- CSS:Bootstrap 自带以下特性,全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。
- 组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。
- JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。
- 定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
Bootstrap 环境安装
Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap,讨论 Bootstrap 文件结构,并通过一个实例演示它的用法。
下载 BootStrap
您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。
文件结构
预编译的 Bootstrap
当您下载了 Bootstrap 的已编译的版本,解压缩 ZIP 文件,您将看到下面的文件/目录结构:
如上图所示,可以看到已编译的 CSS 和 JS (Bootstrap),以及已编译压缩的 CSS 和 JS (bootstrap.min)。同时也包含 Glyphincons 的字体,这是一个可选的 Bootstrap 主题。
HTML 模板
一个使用了 Bootstrap 的基本的 HTML 模板如下所示:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
在这里,您可以看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件,用于让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。
实例
现在让我们尝试使用 Bootstrap 输出 “Hello, world!”:
<h1>Hello, world!</h1>
Bootstrap 网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。
什么是网格 (Grid)?
在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的、水平的)组成的结构(通常是二维的)。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中,它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。
简单地说,网页设计中的网格用于组织内容,让网站易于浏览,并降低用户端的负载。
什么是 Bootstrap 网格系统 (Grid System)?
Bootstrap 官方文档中有关网格系统的描述:
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。
让我们来理解一下上面的语句。Bootstrap 3 是移动设备优先的,在这个意义上,Bootstrap 代码从小屏幕设备(比如移动设备、平板电脑)开始,然后扩展到大屏幕设备(比如笔记本电脑、台式电脑)上的组件和网格。
移动设备优先策略
- 内容
- 决定什么是最重要的
- 布局
- 优先设计更小的宽度
- 基础的 CSS 是移动设备优先,
媒体查询
是针对于平板电脑、台式电脑 - 渐进增强
- 基础的 CSS 是移动设备优先,
- 随着屏幕大小的增加而添加元素
响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。
Bootstrap 网格系统 (Crid System)的工作原理
网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的:
- 行必须放置在
.container
class 内,以便获得适当的对齐(alignment
)和内边距(padding
) - 使用行来创建列的水平组
- 内容应该放置在列内,且唯有列可以是行的直接子元素
- 预定义的网格类,比如
.row
和col-xs-4
,可用于快速创建网格布局。LESS 混合类可用于更多语义布局 - 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过
.rows
上的外边距(margin)取负,表示第一列和最后一列的行偏移 - 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个
.col-xs-4
网格选项
下表总结了 Bootstrap 网格系统如何跨多个设备工作:
说明 | 超小设备手机(< 768px) | 小型设备平板电脑(≥ 768px) | 中型设备台式电脑(≥ 992px) |
---|---|---|---|
网格行为 | 一直是水平的 | 以折叠开始,断点以上是水平的 | 以折叠开始,断点以上是水平的 |
最大容器宽度 | None (auto) | 750px | 970px |
Class 前缀 | .col-xs- | .col-sm- | .col-md- |
列数量和 | 12 | 12 | 12 |
最大列宽 | Auto | 60px | 78px |
间隙宽度 | 30px(一个列的每边分别 15px) | 30px(一个列的每边分别 15px) | 30px(一个列的每边分别 15px) |
可嵌套 | Yes | Yes | Yes |
偏移量 | Yes | Yes | Yes |
列排序 | Yes | Yes | Yes |
媒体查询的用法
@media 媒体查询的用法
媒体查询能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效果。
浏览器支持
表格中的数字表示支持 @media 规则的第一个浏览器的版本号
Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|
21 | 9 | 3.5 | 4.0 | 9 |
媒体类型
媒体类型在 CSS2 中是一个常见属性,可以通过媒体类型对不同设备指定不同样式。
- ALL : 所有设备
- Braille:盲人用点子法触觉回馈设备
- Handheld:便携设备
- Print:打印用纸或打印预览视图
- Projection:各种投影设备
- Screen:电脑显示器
- Speech:语音或音频合成器
- Tv:电视机类型设备
- Tty:使用固定密度字母栅格的媒介,比如电传打字机和终端
Screen、All、Print 为最常见的三种媒体类型。
媒体特性
媒体查询中的大部分接受 min/max
前缀,用来表达其逻辑关系,表示应用大于等于或小于等于某个值的情况。没有特殊说明都支持 min/max
。
- width:Length 渲染界面的宽度
- height:Length 渲染界面的高度
- color:整数,表示色彩的字节数
- color-index:整数, 色彩表中的色彩数
- device-aspct-ratio:整数/整数,宽高比例
- device-height:Length 设备屏幕的输出高度
- device-width:Length 设备屏幕的输出宽度
- grid(不支持 min/max 前缀):整数,是否基于栅格的设备
- monochrome:整数,单色帧缓冲器中每像素字节数
- resolution:分辨率(dpi/dpcm)分辨率
- scan(不支持 min/max 前缀):Progressive interlaced,Tv 媒体类型的扫描方式
- orientation(不支持 min/max 前缀):Portrait//landscape 横屏或竖屏
使用媒体查询
语法:@media 媒体类型 and (媒体特性) {你的样式}
最大宽度
max-width
是媒体特性中最常用的一个特性,其意思是指媒体类型小于或等于指定的宽度时,样式生效。如:
@media screen and (max-width:480px) {
.ads {
display:none;
}
}
上面表示的是:当屏幕小于或等于 480px 时,页面中包含类样式.ads
的元素都将被隐藏。
最小宽度
min-width
与 max-width
相反,指的是媒体类型大于或等于指定宽度时,样式生效。
@media screen and (min-width: 900px) {
.wrapper {width: 980px;}
}
上面表示的是:当屏幕大于或等于 900px 时,页面中包含类样式.wrapper
元素的宽度为 980px。
多个媒体特性的使用
媒体查询可以使用关键词 and 将多个媒体特性结合在一起。也就是说,一个媒体查询中可以包含 0 到多个表达式,表达式又可以包含 0 到多个关键字,以及一种媒体类型。
当屏幕在600px~900px
之间时,body
的背景色渲染为 #F5F5F5
,如下所示:
@media screen and (min-width:600px) and (max-width:900px) {
body {background-color:#F5F5F5;}
}
Bootstrap 表格
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素:
标签 | 描述 |
---|---|
table | 为表格添加基础样式 |
thead | 表格标题行的容器元素(tr),用来标识表格列 |
tbody | 表格主体中的表格行的容器元素(tr) |
tr | 一组出现在单行上的表格单元格的容器元素(td 或 th) |
td | 默认的表格单元格 |
th | 特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在 thead 内使用 |
caption | 关于表格存储内容的描述或总结 |
表格类
下表样式可用于表格中:
类 | 描述 |
---|---|
.table | 为任意 table 添加基本样式 (只有横向分隔线) |
.table-striped | 在 tbody 内添加斑马线形式的条纹 ( IE8 不支持) |
.table-bordered | 为所有表格的单元格添加边框 |
.table-hover | 在 tbody 内的任一行启用鼠标悬停状态 |
.table-condensed | 让表格更加紧凑 |
tr, th 和 td 类
类 | 描述 |
---|---|
.active | 将悬停的颜色应用在行或者单元格上 |
.success | 表示成功的操作 |
.info | 表示信息变化的操作 |
.warning | 表示一个警告的操作 |
.danger | 表示一个危险的操作 |
基本的表格
如果您想要一个只带有内边距(padding)和水平分割的基本表,请添加 class .table,如下面实例所示:
<table class="table">
<caption>基本的表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>
Bootstrap 字体图标
什么是字体图标
所谓字体图标,就是使用字体(Font
)格式的字形做成了图标。
Bootstrap 自带的字体图标
Bootstrap 捆绑了 200 多种字体格式的字形,在 fonts 文件夹内可以找到字体图标,它包含了下列这些文件:
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css
和 bootstrap-min.css
文件上。
使用字体图标
如需使用图标,只需要简单地使用下面的代码即可:
<span class="glyphicon glyphicon-search"></span>
其它字体图标库
- FontAwesome:http://fontawesome.dashgame.com/
- LineAwesome:https://icons8.com/line-awesome
- SocialIcons:http://www.socicon.com/chart.php
- 阿里巴巴矢量图标库:http://www.iconfont.cn/