第一阶段B（前端框架）11天 64学时
第4章 Bootstrap 基础属性（12）
[学习课时] 本章共需要学习 12 课时
[目的要求]
- 掌握Bootstrap网格排版
- 掌握Bootstrap表格列表属性
- 掌握Bootstrap图文排版
- 掌握Bootstrap辅助属性
- 掌握Bootstrap标签属性
- 掌握Bootstrap表格样式
- 掌握Bootstrap字体图标
[教学内容]
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的
- 移动设备优先
移动设备优先是 Bootstrap 3 的最显著的变化。
为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- width ：控制设备的宽度。为了在不同屏幕分辨率的设备浏览，设置为 device-width。
- initial-scale=1.0 - 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
- user-scalable=no - 可以禁用其缩放（zooming）功能。
- maximum-scale=1.0 - 与user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，能让网站看上去更像原生应用的感觉。这种方式我们并不推荐所有网站使用，还是要看您自己的情况而定！
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
- Bootstrap 浏览器/设备支持
Bootstrap 可以在最新的桌面系统和移动端浏览器中很好的工作。
旧的浏览器可能无法很好的支持。
|
|
Chrome |
Firefox |
IE |
Opera |
Safari |
| Android |
YES |
YES |
不适用 |
不适用 |
不适用 |
| iOS |
YES |
不适用 |
不适用 |
不适用 |
YES |
| Mac OS X |
YES |
YES |
不适用 |
YES |
YES |
| Windows |
YES |
YES |
YES* |
YES |
不适用 |
Bootstrap 安装
- 下载 Bootstrap:
您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本
- Download Bootstrap：预编译的压缩版本。不包含文档和最初的源代码文件。
- Download Source：下载源代码。未压缩。
下载完成后，将如下文件复制到项目即可。
Bootstrap 网格系统
Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。
- 移动设备优先策略
- 内容
- 决定什么是最重要的。
- 布局
- 优先设计更小的宽度。
- 基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。
- 渐进增强
- 随着屏幕大小的增加而添加元素。
响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
| 1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
| 4 |
4 |
4 |
|||||||||
| 4 |
8 |
||||||||||
| 6 |
6 |
||||||||||
| 12 |
|||||||||||
- 网格选项
|
|
超小设备手机（<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 |
30px |
30px |
30px |
Bootstrap 排版
- 标题
实例：demo01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title></title>
<link rel="stylesheet" type="text/css" href="../../src/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../../src/css/font-awesome.min.css"/>
<script src="../../src/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../src/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>
</body>
</html>
效果图
- 文字排版
实例：demo02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title></title>
<link rel="stylesheet" type="text/css" href="../../src/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../../src/css/font-awesome.min.css"/>
<script src="../../src/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../src/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>
</body>
</html>
效果图
Bootstrap 表格
| 类 |
描述 |
| .table |
为任意 <table> 添加基本样式 (只有横向分隔线) |
| .table-striped |
在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) |
| .table-bordered |
为所有表格的单元格添加边框 |
| .table-hover |
在 <tbody> 内的任一行启用鼠标悬停状态 |
| .table-condensed |
让表格更加紧凑 |
<tr>, <th> 和 <td> 类
下表的类可用于表格的行或者单元格：
| 类 |
描述 |
| .active |
将悬停的颜色应用在行或者单元格上 |
| .success |
表示成功的操作 |
| .info |
表示信息变化的操作 |
| .warning |
表示一个警告的操作 |
| .danger |
表示一个危险的操作 |
案例：demo03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title></title>
<link rel="stylesheet" type="text/css" href="../../src/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../../src/css/font-awesome.min.css" />
<script src="../../src/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../src/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
height: 45px;
line-height: 45px;
}
#header {
height: 60px;
line-height: 60px;
position: fixed;
width: 100%;
background-color: rgba(0, 0, 0, 0.1);
}
#footer {
position: fixed;
width: 100%;
height: 100%;
top: 60px;
}
.left {
background-color: rgba(255, 0, 0, 0.1);
}
.right {
height: 100%;
background-color: rgba(0, 255, 0, 0.1);
}
.content {
height: 100%;
overflow: overlay;
}
</style>
</head>
<body>
<div id="header">
Bootstrap 网格系统展示
</div>
<div id="footer">
<div class="col-xs-2 left hidden-xs">
<ul>
<li>菜单1</li>
<li>菜单1</li>
<li>菜单1</li>
</ul>
</div>
<div class="col-sm-10 col-xs-12 right">
<div class="content">
<table class="table table-condensed">
<caption>详细信息</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>13592768987</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>13592768987</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>13592768987</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>13592768987</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>13592768987</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>13592768987</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>13592768987</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>13592768987</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>13592768987</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>13592768987</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>13592768987</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>13592768987</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>13592768987</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>13592768987</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>13592768987</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>13592768987</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
效果图
Bootstrap 按钮
| 类 |
描述 |
| .btn |
为按钮添加基本样式 |
| .btn-default |
默认/标准按钮 |
| .btn-primary |
原始按钮样式（未被操作） |
| .btn-success |
表示成功的动作 |
| .btn-info |
该样式可用于要弹出信息的按钮 |
| .btn-warning |
表示需要谨慎操作的按钮 |
| .btn-danger |
表示一个危险动作的按钮操作 |
| .btn-link |
让按钮看起来像个链接 (仍然保留按钮行为) |
| .btn-lg |
制作一个大按钮 |
| .btn-sm |
制作一个小按钮 |
| .btn-xs |
制作一个超小按钮 |
| .btn-block |
块级按钮(拉伸至父元素100%的宽度) |
| .active |
按钮被点击 |
| .disabled |
禁用按钮 |
实例：demo04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title></title>
<link rel="stylesheet" type="text/css" href="../../src/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../../src/css/font-awesome.min.css" />
<script src="../../src/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../src/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p>
<button class="btn btn-primary btn-lg">大的原始按钮</button>
<button class="btn btn-default btn-lg">大的按钮</button>
</p>
<p>
<button class="btn btn-primary">默认大小的原始按钮</button>
<button class="btn btn-default">默认大小的按钮</button>
</p>
<p>
<button class="btn btn-primary btn-sm">小的原始按钮</button>
<button class="btn btn-default btn-sm">小的按钮</button>
</p>
<p>
<button class="btn btn-primary btn-xs">特别小的原始按钮</button>
<button class="btn btn-default btn-xs">特别小的按钮</button>
</p>
<p>
<button class="btn btn-primary btn-lg btn-block">块级的原始按钮</button>
<button class="btn btn-default btn-lg btn-block">块级的按钮</button>
</p>
<p>
<button class="btn btn-default btn-lg ">默认按钮</button>
<button class="btn btn-default btn-lg active">激活按钮</button>
</p>
<p>
<button class="btn btn-primary btn-lg ">原始按钮</button>
<button class="btn btn-primary btn-lg active">激活的原始按钮</button>
</p>
<p>
<button class="btn btn-default btn-lg">默认按钮</button>
<button class="btn btn-default btn-lg" disabled="disabled">禁用按钮</button>
</p>
<p>
<button class="btn btn-primary btn-lg ">原始按钮</button>
<button class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按钮</button>
</p>
<p>
<a href="#" class="btn btn-default btn-lg">链接</a>
<a href="#" class="btn btn-default btn-lg disabled">禁用链接</a>
</p>
<p>
<a href="#" class="btn btn-primary btn-lg">原始链接</a>
<a href="#" class="btn btn-primary btn-lg disabled">禁用的原始链接</a>
</p>
</body>
</html>
效果图
Bootstrap 图片
Bootstrap 提供了三个可对图片应用简单样式的 class：
- .img-rounded：添加 border-radius:6px 来获得图片圆角。
- .img-circle：添加 border-radius:50% 来让整个图片变成圆形。
- .img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
Bootstrap 列表组
案例：demo05
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title></title>
<link rel="stylesheet" type="text/css" href="../../src/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../../src/css/font-awesome.min.css" />
<script src="../../src/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../src/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="btn btn-danger btn-group-justified">
<a data-toggle="collapse" href="#list">点击打开</a>
</div>
<ul class="list-group collapse in" id="list">
<li class="list-group-item">
<h4 class="list-group-item-heading">24*7 支持</h4>
<p class="list-group-item-text">我们提供 24*7 支持。</p>
</li>
<li class="list-group-item">免费 Window 空间托管</li>
<li class="list-group-item">图像的数量</li>
<li class="list-group-item">
<span class="badge">新</span> 24*7 支持
</li>
<li class="list-group-item">每年更新成本</li>
<li class="list-group-item">
<span class="badge">新</span> 折扣优惠
</li>
</ul>
</body>
</html>
效果图
Bootstrap 辅助类
背景:
| 类 |
描述 |
| .bg-primary |
表格单元格使用了 "bg-primary" 类 |
| .bg-success |
表格单元格使用了 "bg-success" 类 |
| .bg-info |
表格单元格使用了 "bg-info" 类 |
| .bg-warning |
表格单元格使用了 "bg-warning" 类 |
| .bg-danger |
表格单元格使用了 "bg-danger" 类 |
其他:
| 类 |
描述 |
| .pull-left |
元素浮动到左边 |
| .pull-right |
元素浮动到右边 |
| .center-block |
设置元素为 display:block 并居中显示 |
| .clearfix |
清除浮动 |
| .show |
强制元素显示 |
| .hidden |
强制元素隐藏 |
| .sr-only |
除了屏幕阅读器外，其他设备上隐藏元素 |
| .sr-only-focusable |
与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户) |
| .text-hide |
将页面元素所包含的文本内容替换为背景图 |
| .close |
显示关闭按钮 |
| .caret |
显示下拉式功能 |
Bootstrap 标签
| 类 |
描述 |
| .label label-default |
默认的灰色标签 |
| .label label-primary |
"primary" 类型的蓝色标签 |
| .label label-success |
"success" 类型的绿色标签 |
| .label label-info |
"info" 类型的浅蓝色标签 |
| .label label-warning |
"warning" 类型的黄色标签 |
| .label label-danger |
"danger" 类型的红色标签 |
案例：demo06
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title></title>
<link rel="stylesheet" type="text/css" href="../../src/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../../src/css/font-awesome.min.css" />
<script src="../../src/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../src/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="bg-success text-center btn-group-xs">
<span class="btn btn-danger">默认标签</span>
<span class="btn btn-success">主要标签</span>
<span class="btn btn-primary">成功标签</span>
<span class="btn btn-warning">信息标签</span>
<span class="btn btn-default">警告标签</span>
<span class="btn btn-info">危险标签</span>
</div>
<div class="bg-info text-center">
<span class="badge">默认标签</span>
<span class="badge">主要标签</span>
<span class="badge">成功标签</span>
<span class="badge">信息标签</span>
<span class="badge">警告标签</span>
<span class="badge">危险标签</span>
</div>
<div class="bg-danger text-center">
<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>
</div>
</body>
</html>
效果图
Bootstrap 输入框组
案例：demo07
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title></title>
<link rel="stylesheet" type="text/css" href="../../src/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../../src/css/font-awesome.min.css" />
<script src="../../src/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../src/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox"></span>
<input type="text" class="form-control">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">
<input type="radio"></span>
<input type="text" class="form-control">
</div>
<br>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">按钮样式</button>
</span>
<input type="text" class="form-control">
</div>
<br>
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default
dropdown-toggle" data-toggle="dropdown">下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">功能</a>
</li>
<li>
<a href="#">另一个功能</a>
</li>
<li>
<a href="#">其他</a>
</li>
<li class="divider"></li>
<li>
<a href="#">分离的链接</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<input type="text" class="form-control">
</div>
<br>
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default" tabindex="-1">下拉菜单</button>
<button type="button" class="btn btn-default
dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<span class="caret"></span>
<span class="sr-only">切换下拉菜单</span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">功能</a>
</li>
<li>
<a href="#">另一个功能</a>
</li>
<li>
<a href="#">其他</a>
</li>
<li class="divider"></li>
<li>
<a href="#">分离的链接</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<input type="text" class="form-control">
</div>
</form>
</div>
</body>
</html>
效果图
Bootstrap 字体图标
- 如何使用
出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。
- 不要和其他组件混合使用
图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span> 标签，并将图标类应用到这个 <span> 标签上。
- 只对内容为空的元素起作用
图标类只能应用在不包含任何文本内容或子元素的元素上。
- 改变图标字体文件的位置
Bootstrap 假定所有的图标字体文件全部位于 ../fonts/ 目录内，相对于预编译版 CSS 文件的目录。如果你修改了图标字体文件的位置，那么，你需要通过下面列出的任何一种方式来更新 CSS 文件：
- 在 Less 源码文件中修改
@icon-font-path和/或@icon-font-name变量。 - 利用 Less 编译器提供的 相对 URL 地址选项。
- 修改预编译 CSS 文件中的
url()地址。
根据你自身的情况选择一种方式即可。
- 图标的可访问性
现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免 屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden="true" 属性。
如果你使用图标是为了表达某些含义（不仅仅是为了装饰用），请确保你所要表达的意思能够通过被辅助设备识别，例如，包含额外的内容并通过 .sr-only 类让其在视觉上表现出隐藏的效果。
如果你所创建的组件不包含任何文本内容（例如， <button> 内只包含了一个图标），你应当提供其他的内容来表示这个控件的意图，这样就能让使用辅助设备的用户知道其作用了。这种情况下，你可以为控件添加 aria-label 属性。
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
- 实例
可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。
<button type="button" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span></button><span class="glyphicon glyphicon-star" aria-hidden="true"></span>Star</button>
Font Awesome4
下载地址：http://fontawesome.dashgame.com/
- 基本图标
可以将Font Awesome图标使用在几乎任何地方，只需要使用CSS前缀 fa ，再加上图标名称。 Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用 <i> ，因为它更简洁。 但实际上使用 <span> 才能更加语义化。
<i class="fa fa-camera-retro"></i>fa-camera-retro
如果修改了图标容器的字体大小，图标大小会随之改变。同样的变化也会发生在颜色、阴影等其它任何CSS支持的效果上。
- 图标大小
使用 fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 类 来放大图标
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
如果图标的底部和顶部被截断了，需要增加行高来解决此问题。
- 可旋转
这些图标在fa-spin类的作用下表现优异。
- 使用 fa-spin 类来使任意图标旋转，
- 还可以使用 fa-pulse 来使其进行8方位旋转
CSS3动画不支持IE8-IE9。
- 旋转与翻转
使用 fa-rotate-* 和 fa-flip-* 类可以对图标进行任意旋转和翻转。
<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
- 组合使用
如果想要将多个图标组合起来，使用 fa-stack 类作为父容器， fa-stack-1x 作为正常比例的图标， fa-stack-2x 作为大一些的图标。还可以使用 fa-inverse 类来切换图标颜色。您可以在父容器中 通过添加 大图标 类来控制整体大小。
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>fa-ban on fa-camera
[作业实验]
- 实现bootstarp自适应布局案例。地址：http://www.youzhan.org/
- HTML+CSS+JS精细化教程（新）适合学习和巩固基础（必掌握技能）
- JAVA语言（面向对象都不是事，重点是多线程、反射、网络编程、界面编程、设计模式、工程架构、文件系统）
- JAVA WEB（MySQL、JDBC、JSP、JSTL、EL、Servlet、Spring、Struts、MyBatis、SpringData等）
- Spring Boot2（新版2.X、底层原理深入剖析、更有点餐系统、大型博客系统、商铺平台等完整项目开始视频和源码）
- Python（小白基础语法、RESTfull API开发、爬虫、Django、Linux系统、制作小工具）
- Photoshop（CS5、CS6、CC2018视频教程、海量素材、酷炫特效制作、经典案例几百集）
- Unity2D/3D（手游开发、脚本开发、3D人物模型设计、3D动画、3D塔防游戏、第一人称游戏案例视频跟着做）
- Android原生开发（大型OA系统、游戏开发、物联网开发、3D模型显示、单机游戏开发）
- IOS原生开发（各种收费应用、游戏开发、工具开发、物联网开发）
- PHP（HTML+CSS+JS+PHP+MySQL+MVC+ThinkPHP+Linux+Nginx+Redis）