1.Bootstrap CSS 概览
1.HTML5文档类型
Bootstrap中使用了部分HTML5元素和CSS属性，所以需要在开头添加HTML5文档属性。
1 <!DOCTYPE html> 2 <html> 3 .... 4 </html>
2.移动设备优先
1.考虑到现在移动设备的迅猛发展，Bootstrap3开始优先支持移动设备，然后才是桌面设备。
所以在代码开始前需要添加：
1 <meta name="viewport" content="width=device-width,inital-scale=1.0"> //inital-scale=1.0是指1：1缩放 2 </head>
2.如果你不想让移动设备进行缩放，使得看起来更像原生的网页，那么可以使用一下代码：
1 <meta name="viewport" content="width=device-width,inital-scale=1.0, maximum-scale=1.0,user-scalable=no">
不过不建议对所有的设备都使用。
3.响应式的图像
1 <img src="..." class="img-responsive" alt="响应式图像">
这个类的定义：
1 .img-responsive { 2 display: inline-block; 3 height: auto; 4 max- 100%; 5 }
4.全局显示和排版链接
基本的全局显示
1 body { 2 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 3 font-size: 14px; 4 line-height: 1.428571429; 5 color: #333333; 6 background-color: #ffffff; 7 } 8 9 //以上分别为默认的字体，字体大小，内联高度，字体颜色，背景颜色
基本的链接
1 a:hover, 2 a:focus { 3 color: #2a6496; 4 text-decoration: underline; 5 } 6 7 a:focus { 8 outline: thin dotted #333; 9 outline: 5px auto -webkit-focus-ring-color; 10 outline-offset: -2px; 11 }
5.避免跨浏览器不一致
6.容器
1 <div class="container"> 2 ... 3 </div>
1 .container { 2 padding-right: 15px; 3 padding-left: 15px; 4 margin-right: auto; 5 margin-left: auto; 6 }
2.网格系统
1.什么是网格
简单地说，网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。
2.Bootstrap的网格系统
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
3.网格系统的工作原理（摘自w3cshool）
网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：
-
行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
-
使用行来创建列的水平组。
-
内容应该放置在列内，且唯有列可以是行的直接子元素。
-
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
-
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
-
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。
3.排版
1.排版
使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素。
small实现内联子标题：
1 <h1>标题1<small>标题1</small></h1>
lead引导主体副本：
<p class="lead">这是主题副本</p>
强调标签：
1 <!--强调标签--> 2 <p><small>强调1</small></p> //使用small 3 <p><strong>强调1</strong></p> //使用strong 4 <p><em>强调1</em></p> //使用em
缩写词：
<!--缩写词--> <abbr title="World Wide Web">WWW</abbr> <abb title="一个组织" class="initialism">RSS</abb> //当鼠标放在RSS上的时候会显示对这个词的解释（一个组织）
地址标签：
1 <!--地址标签--> 2 <address> 3 <p>常驻地址：</p><br> //由于address的display是一个block，需要内部自己添加<br>换行 4 <a href="#">xxxx@qq.com</a> 5 </address>
引用：
1 <!--各种引用--> 2 <blockquote>引用1</blockquote> 3 <blockquote><cite title="source title">引用1</cite></blockquote> 4 <blockquote class="pull-right">向右对齐的引用</blockquote>
自定义列表：
1 <!--自定义列表--> 2 <dt>列表1</dt> 3 <dt>解释1</dt>
换行与不换行：
1 <!--超出部分自动换行和不换行--> 2 <p class="text-nowrap">这是很长的一段文字，超出部分不换行。这是很长的一段文字，超出部分不换行。这是很长的一段文字，超出部分不换行。</p> 3 <p class="text-justify">这是很长的一段文字，超出部分将要换行。这是很长的一段文字，超出部分将要换行。文字，超出部分将要换行。这是很长的一段文字，超出部分将要换行。</p> 4 <!--这里的是否换行是指：当改变浏览器大小的时候-->
列表的浮动和偏移：
1 <!--列表的浮动和偏移--> 2 <dl class="dl-horizontal"> 3 <dt>列表1</dt> 4 <dt>解释1</dt>
页面滚动：
1 <!--页面可滚动--> 2 <p class="pre-scrollable"> 3 When you are old and grey and full of sleep, 当你老了，头发花白，睡意沉沉， 4 And nodding by the fire，take down this book, 倦坐在炉边，取下这本书来， 5 And slowly read,and dream of the soft look 慢慢读着，追梦当年的眼神 6 Your eyes had once,and of their shadows deep; 你那柔美的神采与深幽的晕影。 7 How many loved your moments of glad grace, 多少人爱过你昙花一现的身影， 8 And loved your beauty with love false or true, 爱过你的美貌，以虚伪或真情， 9 But one man loved the pilgrim Soul in you 惟独一人曾爱你那朝圣者的心， 10 And loved the sorrows of your changing face; 爱你哀戚的脸上岁月的留痕。 11 And bending down beside the glowing bars, 在炉罩边低眉弯腰， 12 Murmur,a little sadly,how Love fled 忧戚沉思，喃喃而语， 13 And paced upon the mountains overhead 爱情是怎样逝去，又怎样步上群山， 14 And hid his face amid a crowd of stars. 怎样在繁星之间藏住了脸。 15 </p>
大小写：
1 <!--大写，小写和首字母大写--> 2 3 <p class="text-lowercase">WERRR</p> 4 <p class="text-uppercase">werrr</p> 5 <p class="text-capitalize">wERRR</p>