一、前言
1、简介
Bootsrtap作为一个前端框架，开箱即用，封装了前段开发的大量底层细节，开放灵活，对响应式设计网页很好支持，组件丰富，社区活跃。
特点：
- 可重用性
- 一致性
- 灵活的栅栏布局
- 定制化
- 社区活跃
- 面向未来和开放式开发
2、下载
二、预览
1、使用
直接引入
可以直接在HTML文件中引入Bootsrtap
<link href="css/bootsrtap.min.css" rel="styleesheet" media="screen">Bootstrap CDN：
所谓CDN就是通过一个互联网部署在多个数据中心的大型分布式服务器系统。浏览器可以并行的从CDN下载文件，不需要从自己的服务器下载文件。这些文件不在同一个域中，不会受浏览器的限制（同时只能在一个域下载几个文件）。因此下载时不会一个一个排队。另外CDN会根据用户的位置和更快的路由速度来选择服务器下载文件。
优点：节省带宽，提高网站性能。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/版本号/css/bootstrap.min.css">这也是web性能优化(页面访问)的一个方案
2、移动设备优先
在 Bootstrap 3 中，对移动设备友好的。为了确保适当的绘制和触屏缩放，需要在 之中添加 viewport 元数据标签。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, max-minum-scale=1, use-scalable=no">
</head>3、布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类container与container-fluid。但这两种 容器类不能互相嵌套
用于固定宽度并支持响应式布局的容器
<div class="container">
...
</div>container会使页面给人居中的感觉
.container-fluid类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>.container-fluid给人感觉平铺整个页面的流式布局容器
三、栅格系统
1、简介
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，内容就可以放入这些创建好的布局中，更好的实现设计的一致性。
在大屏幕中，栅格最多可以扩大到12列。小屏幕中所有的列都会堆叠起来。由于Bootstrap是移动优先，所以栅格其实是在小屏设备中定义了尺寸，而之一中定义的栅格尺寸也是和中屏设备和大屏设备。
类前缀名：
- 小尺寸手机屏幕：.col-xs- （分辨率<768px）
- 平板屏幕：- col-sm- （分辨率(≥768px)）
- 小尺寸桌面屏幕：-col-md- （分辨率(≥992px)x）
- 大尺寸屏幕：.col-lg- （分辨率(≥1200px)）
注：为了让网站页面有更好的而可读性，对列间距的宽度为默认30px。即列与列之间的空白区域。
2、不同设备的页面
移动设备和桌面屏幕：使用.col-xs-* 和 .col-md-*
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>手机、平板、桌面：使用.col-xs-* 和 .col-md-，.col-sm-
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>栅栏系统中一行中有十二列，而多出12列，最后一个元素就会换行重新排列。
3、偏移与排列
偏移：在一行中，两个元素占据不同的列数，不同的元素也可以以间距隔开，列向右侧偏移。
列偏移： .col-md-offset-
这些类实际是通过使用 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
列排列： .col-md-push-* 和 .col-md-pull-* 类可以改变列（column）的顺序。
两个元素在一行中前后排列，占据不同的列数，使用列排列类就可以颠倒元素在页面中排列顺序。
三、排版
- 标题：HTML 中的所有标题标签 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式
- 页面主题：全局 font-size 设置为 14px，line-height 设置为 1.428。
- 中心内容：通过添加 .lead 类可以让段落突出显示
- 内联：
mark - 删除：
del - 无用文本：
s - 插入文本：
ins - 下划线：
u - 小号文本：
small默认为标准字体的百分之85 - 强调文本：
strong - 斜体：
em - 高亮：
-
b用于高亮单词或短语，不带有任何着重的意味； -
i标签主要用于发言、技术词汇等
-
- 对齐类：
- .text-center 居中
- .text-right 靠右
- .text-left 靠左
- 字母大小写：
- .text-lowercase
- .text-uppercase
- .text-capitalize
缩略语：当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性。为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。
四、练习
简单博客格式
1、 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>blog</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<header class="row">
<p class="col-md-2 col-md-offset-2"><strong>My Blog</strong></p>
<p class="col-md-1 col-md-offset-5"><a href="#">登陆</a></p>
<p class="col-md-1"><a href="#">注册</a></p>
<p class="col-md-1"><a href="#">退出</a></p>
</header>
<div class="row">
<div class="col-md-9 col-md-push-3">
<div class="text-center">
<h2 class="text-capitalize">simple blog form</h2>
</div>
<div>
<div class="col-md-4 col-sm-6 text-lowercase">
<p>
Maybe I'm foolish maybe I'm blind<br>
也许是我太傻，也许是我眼瞎<br>
Thinking I can see through this and see what's behind<br>
以为我能看穿一切以及背后的真相<br>
Got no way to prove it so maybe I'm blind<br>
无法证明什么，也许是我被蒙蔽<br>
But I'm only human after all I'm only human after all<br>
但毕竟我是个凡人，我只是个凡人<br>
Don't put your blame on me<br>
请别把你的火撒在我身上<br>
Don't put your blame on me<br>
别把你的火撒在我身上<br>
Take a look in the mirror and what do you see<br>
看一眼镜中世界，你看到了什么<br>
Do you see it clearer or are you deceived in what you believe<br>
你洞穿了一切还是被信仰所欺骗？<br>
Cos I'm only human after all you're only human after all<br>
因为我只是个凡人，你只是个凡人<br>
</p>
</div>
<div class="col-md-4 col-sm-6 text-uppercase">
<p>
Maybe I'm foolish maybe I'm blind<br>
也许是我太傻，也许是我眼瞎<br>
Thinking I can see through this and see what's behind<br>
以为我能看穿一切以及背后的真相<br>
Got no way to prove it so maybe I'm blind<br>
无法证明什么，也许是我被蒙蔽<br>
But I'm only human after all I'm only human after all<br>
但毕竟我是个凡人，我只是个凡人<br>
Don't put your blame on me<br>
请别把你的火撒在我身上<br>
Don't put your blame on me<br>
别把你的火撒在我身上<br>
Take a look in the mirror and what do you see<br>
看一眼镜中世界，你看到了什么<br>
Do you see it clearer or are you deceived in what you believe<br>
你洞穿了一切还是被信仰所欺骗？<br>
Cos I'm only human after all you're only human after all<br>
因为我只是个凡人，你只是个凡人<br>
</p>
<blockquote class="blockquote-reverse">famous song <cite title="Source Title">Source Title</cite></blockquote>
</div>
<div class="col-md-4 col-sm-12">
<blockquote title="stay hungry stay foolish">
<p>
Maybe I'm foolish maybe I'm blind<br>
也许是我太傻，也许是我眼瞎<br>
Thinking I can see through this and see what's behind<br>
以为我能看穿一切以及背后的真相<br>
Got no way to prove it so maybe I'm blind<br>
无法证明什么，也许是我被蒙蔽<br>
But I'm only human after all I'm only human after all<br>
但毕竟我是个凡人，我只是个凡人<br>
Don't put your blame on me<br>
请别把你的火撒在我身上<br>
Don't put your blame on me<br>
别把你的火撒在我身上<br>
Take a look in the mirror and what do you see<br>
看一眼镜中世界，你看到了什么<br>
Do you see it clearer or are you deceived in what you believe<br>
你洞穿了一切还是被信仰所欺骗？<br>
Cos I'm only human after all you're only human after all<br>
因为我只是个凡人，你只是个凡人<br>
</p>
</blockquote>
</div>
</div>
</div>
<div class="col-md-3 col-md-pull-9">
<ul>
<li>day1</li>
<ul>
<li>笔记一</li>
<li>笔记一</li>
<li>笔记一</li>
</ul>
<li>day2</li>
<li>day3</li>
</ul>
</div>
</div>
<footer>
<div class="text-center">
<address>
<strong> Twitter, Inc.</strong><br>
<abbr title="Phone">Phone:</abbr>0000000
</address>
</div>
</footer>
</div>
</body>
</html>2、样式
