bootstrap 基础知识学习（图片+网格系统）

七、图片（306行～335行）

基本样式

1、img-responsive：响应式图片，主要针对于响应式设计
2、img-rounded：圆角图片
3、img-circle：圆形图片
4、img-thumbnail：缩略图片

注：由于样式没有对图片做大小上的样式限制，所以在实际使用的时候，需要通过其他的方式来处理图片大小。比如说控制图片容器大小。（注意不可以通过css样式直接修改img图片的大小，这样操作就不响应了）

在Bootstrap框架中也为大家提供了近200个不同的icon图片，而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。（图标都是glyphicons.com这个商业网站提供的，并且免费授权给Bootstrap框架使用）

原理：实际上是利用特殊的字体，利用@font-face属性加载特殊字体实现(2357行～第2380)

其他图标（也可引入Font Awesome使用）

八、网格系统

Bootstrap框架在不同屏幕尺寸使用了不同的网格样式

   下面以中屏（970px）为例进行介绍

1、基本结构

注：   =》数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding).

  <div class="container">     <div class="row"></div>    </div>

       =》在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数12，如：

<div class="container">  <div class="row">  

 <div class="col-md-4"></div>   <div class="col-md-8"></div>

 </div></div>

2、列偏移

我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移

3、列排序

通过添加类名“col-md-push-*”和“col-md-pull-*”，达到改变排列顺序（当缩小屏幕时，列排序不变，一般用不上）

4、可嵌套使用（始终保证同一级列数总和为12）