1.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 插件来得到您自己的版本。
HTML 模板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="assets/plugins/bootstrap/css/bootstrap-theme.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>Hello Bootstrap</h1>
<!-- 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]-->
<script src="assets/plugins/jquery-3.3.1.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
2.Bootstrap 网格系统
概述
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。
什么是网格(Grid)?
在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的、水平的)组成的结构(通常是二维的)。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中,它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。
简单地说,网页设计中的网格用于组织内容,让网站易于浏览,并降低用户端的负载。
什么是 Bootstrap 网格系统(Grid System)?
Bootstrap 官方文档中有关网格系统的描述:
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。
让我们来理解一下上面的语句。Bootstrap 3 是移动设备优先的,在这个意义上,Bootstrap 代码从小屏幕设备(比如移动设备、平板电脑)开始,然后扩展到大屏幕设备(比如笔记本电脑、台式电脑)上的组件和网格。
移动设备优先策略
-
内容
- 决定什么是最重要的
- 布局
-
优先设计更小的宽度
- 基础的 CSS 是移动设备优先,媒体查询 是针对于平板电脑、台式电脑
- 渐进增强(向上兼容) (与之相反------优雅降级、向下兼容)
-
随着屏幕大小的增加而添加元素
响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。
(table表格布局:必须表格里内容加载完成才会显示 ---> div+css:代码从上往下执行,调试布局 ----> 网格布局)
Bootstrap 网格系统(Grid System)的工作原理
网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的:
- 行必须放置在
.container
class 内,以便获得适当的对齐(alignment)和内边距(padding) - 使用行来创建列的水平组
- 内容应该放置在列内,且唯有列可以是行的直接子元素
- 预定义的网格类,比如
.row
和.col-xs-4
,可用于快速创建网格布局。LESS 混合类可用于更多语义布局 - 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过
.rows
上的外边距(margin)取负,表示第一列和最后一列的行偏移 - 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个
.col-xs-4
网格选项
下表总结了 Bootstrap 网格系统如何跨多个设备工作:
说明 | 超小设备手机(< 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 |
3. @media
媒体查询的用法
媒体查询能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效果。
浏览器支持
表格中的数字表示支持 @media
规则的第一个浏览器的版本号
Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|
21 | 9 | 3.5 | 4.0 | 9 |
媒体类型
媒体类型在 CSS2 中是一个常见属性,可以通过媒体类型对不同设备指定不同样式。
- ALL:所有设备
- Braille:盲人用点子法触觉回馈设备
- Embossed:盲文打印机
- 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 (媒体特性) {你的样式}
4.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>
5.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/