bootstrap 基础知识学习（图片+网格系统）
七、图片（306行～335行）基本样式1、img-responsive：响应式图片，主要针对于响应式设计2、img-rounded：圆角图片3、img-circle：圆形图片4、img-thumbnail：缩略图片注：由于样式没有对图片做大小上的样式限制，所以在实际使用的时候，需要通过其他的方式来处理图片大小。比如说控制图片容器大小。（注意不可以通过css样式直接修
七、图片（306行～335行）
基本样式
1、img-responsive：响应式图片，主要针对于响应式设计
2、img-rounded：圆角图片
3、img-circle：圆形图片
4、img-thumbnail：缩略图片
注：由于样式没有对图片做大小上的样式限制，所以在实际使用的时候，需要通过其他的方式来处理图片大小。比如说控制图片容器大小。（注意不可以通过css样式直接修改img图片的大小，这样操作就不响应了）
原理：实际上是利用特殊的字体，利用@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-*”，达到改变排列顺序（当缩小屏幕时，列排序不变，一般用不上）
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)