Bootstrap的使用

 

1、使图片的宽度完美的适配页面宽度？（图片尺寸刚好等于我们的手机尺寸）

给图片添加  img-responsive class属性。

 

2、居中头部元素？

给图片添加 text-center class属性

 

3、Bootstrap风格按钮一？

给图片添加 btn class属性

 

4、Bootstrap风格按钮二？

给图片添加 btn-block class属性（在btn基础上加）

通常button元素仅与它所包含的文本一样宽，通过使其成为块级元素，按钮会伸展并填满页面整个水平空间，任何在它之下的元素会跟着浮动至该区块的下一行。

 行内元素与块级元素区别图例：

 

5、Bootstrap风格按钮带颜色一（深蓝色）

给按钮添加 btn-primary class属性，该属性颜色不一定只用于按钮

效果：

 

6、Bootstrap风格按钮带颜色二(浅蓝色)

给按钮添加 btn-info class属性

效果：

 

7、Bootstrap自带了一些预定义的按钮颜色。

红色 btn-danger 被用来提醒用户该操作具有“破坏性”

效果：

 

8、12列网格布局

请注意，在这张图表中，class属性  col-md-* 正被使用。

在这里， md  表示  medium  (中等的)，* 代表一个数字，它指定了这个元素所占的列宽。

通过此图表的属性设置可知，在中等大小的屏幕上(例如笔记本电脑)，元素的列宽被指定了。

 xs  是  extra small  缩写（应用于较小的屏幕，比如手机屏幕），* 是你需要填写的数字，代表在一行中,各个元素应该占的列宽。

Eg:

 

效果：

 

9、Font Awesome 是一个非常方便的图标库。

这些图标都是矢量图形，被保存在 .svg 的文件格式中。

这些图标就和字体一样，你可以通过像素单位指定它们的大小，它们将会继承其父HTML元素的字体大小。

你可以将 Font Awesome 图标库增添至任何一个应用中，方法很简单，只需要在你的 HTML 头部增加下列代码即可：

 <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/> 

 

10、  i  元素起初一般是让其它元素有斜体(italic)的功能，不过现在一般用来指代图标。

你可以将 Font Awesome 中的 class 属性添加到  i  元素中，把它变成一个图标。

eg：

效果：