1、通过Bootstrap，我们只要给图片添加 img-responsive 的class属性,图片的宽度就能自动适配你手机屏幕的宽度啦。
2、Bootstrap除了可以使图片自适应以外,还可以很简单的让头部标题的文字居中,使标题看起来更美观。我们只需要给h2标签添加text-center的class属性,标题文字就可以居中了。
友情提醒：你可以使用空格给标签定义多个class,就像下面这样：
<h2 class="red-text text-center">your text</h2>
3、通常情况下，button 标签的宽度会与标签内包含的文字长度一致
如果你想是你的button 标签的宽度充满整个屏幕,你可以使用btn-block这个class讲按钮升级为块级元素,使button标签的宽度充满整个屏幕,并且该元素后面的所有元素都会浮动到下一行。
友情提醒:这些按钮仍然需要 btn class。
添加Bootstrap的 btn-block class 到你的按钮。
btn-primary类是该应用的主要颜色类，这个类的颜色对于那些你希望高亮提示用户的操作上非常有用。
为按钮添加btn-primaryclass属性。
友情提醒：这个按钮仍然需要 btn 和 btn-block 来两个属性！
btn-info 通常被用在用户比较可能会点击的操作上。 btn-danger这个按钮的颜色是用来告诉用户,该操作具有一定的危险性，比如删除 row 表示并列排列 text-primary高亮 img-responsive
4、页面布局
Bootstrap使用响应式网格系统，可以轻松地将元素放入行中并指定每个元素的相对宽度。 Bootstrap的大部分类都可以应用于div 元素。
以下是Bootstrap的12列网格布局如何工作的图：
值得注意的是,在上图中,我们用到了col-md-* 这个class,这里的md 表示中等,* 是一个数字,指定了元素应该占多少列宽,从图中我们可以看出,设置的是一个中等尺寸宽度的诸如笔记本电脑屏幕上的布局。
xs 跟md 不同,xs 是指一个屏幕宽度较小的设备,比如手机屏幕之类的
图片和猫咪放在同一行中
<div class="row"> <div class="col-xs-8"> <h2 class="text-primary text-center">CatPhotoApp</h2> </div> <div class="col-xs-4"> <a href="#"><img class="img-responsive thick-green-border" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"></a> </div> </div>
5、Font Awesome是一个方便的图标库。
这些图标都是矢量图形，以.svg文件格式存储。 这些图标可以像字体一样被处理,你可以使用像素设置字体大小一样指定这些图标的大小，并且这些图标可以继承父类HTML标签的字体大小。
您可以添加Font Awesome到任何应用程序，只需将下面的链接添加到你的HTML顶部就可以了：
<link rel =“stylesheet”href =“// maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css”/>
i标签最初用于制作其他元素斜体，但现在通常用于图标。 您可以将Font Awesome类添加到i元素以将其转换为图标，例如：
<i class="fa fa-info-circle"></i>
使用 Font Awesome 为你的 info 按钮添加 info-circle 图标，为你的 delete 按钮添加 trash 图标。
你可以通过 Font Awesome 库增加一个 thumbs-up 图标到你的 like 按钮中，方法是在i 元素中增加 class 属性 fa 和 fa-thumbs-up。
代码：
<div class="row"> <div class="col-xs-4"> <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i>Like</button> </div> <div class="col-xs-4"> <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button> </div> <div class="col-xs-4"> <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button> </div> </div>
6、您也可以在form 表单上使用Bootstrap的 col-xs-*！ 这样，无论屏幕分辨率有多宽，我们的单选按钮将均匀分布在页面上。
在<div class="row">元素中嵌入所有单选按钮。 然后将它们嵌入到<div class="col-xs-6"> 标签中。
7、你可以通过在button 标签中添加<i class="fa fa-paper-plane"></i>来为按钮添加fa-paper-plane 的Font Awesome图标。
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i>Submit</button>
8、Bootstrap 有一个well属性,它能是你创建的列有一种视觉深度的层次感。
<div class="well"> ss </div>
只能说这些都是些最基础的东西，要想真正的学习bootstrap还是需要认真的看看教程和视频去学习的。
