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）