bootstrap笔记 —— @media 与 Bootstrap 网格系统

Bootstrap 的网格系统是基于媒体查询（media query）实现的，即根据当前设备的尺寸等信息控制具体采用哪种 css样式。

一、@media 媒体查询

（一）、基础

语法：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

几点说明：

1、mediatype

取值：all（所有设备）|print（打印设备）|screen（显示设备如电脑屏幕、平板电脑、智能手机等）|speech（屏幕阅读器等发声设备）|其它几个废弃的媒体类型。可选。

2、and|not|only

连接 mediatype与media feature 的逻辑值。

3、media feature

大概的取值：

device-aspect-ratio：屏幕可见宽度与高度的比率）；

device-height：屏幕可见高度；

device-width：屏幕可见宽度；

height：页面可见区域高度（注意是html 页面）；

width：页面可见区域宽度（同上）；

resolution：设备的分辨率；

max-上面的属性：上面属性的最大值（如 max-width:800px 匹配宽度不超过800px 的设备）；

min-上面的属性：同理（min-width:800px 匹配宽度至少为800px 的设备）。

示例：

	
	


	
我是什么颜色的

注意：媒体查询不能嵌套（在less语言中可以），媒体查询也是选择器；width、height及对应的max-*、min-*等都是对所在的html 页面的。

（二）、使用媒体查询的方式

1、在
2、在标签中使用media 引入不同css

二、Boostrap 网格系统

（一）、基础认识

Bootstrap 将一行（row）等分成12列，一个盒子（

）可以用类指定占用几列，一行的高度由该行中包含列的最大高度决定。行可以嵌套在列中。

基础使用示例：

1、CDN 方式引入Bootstrap 与jQuery：

2、基础示例：

body部分：

 	

		

				
按钮
                                
8列
		
		
我占6列
	
	
新的一行

效果：

（二）、样式类说明

1、Bootstrap 定义的类都有特定的样式，如上面的container 默认左右都有一定的padding。如果要去除某些特定样式，在style 中覆盖即可。如：

2、几个基础网格类嵌套顺序为：container、row、col-*-*。当然单独使用col-*-*类也会有效果（不建议）。

3、列类说明：

col-xs-n：对超小设备（宽度<768px），占n列；

col-sm-n：对较小设备（>=768px），占n列；

col-md-n：对中型设备（>=992），占n列；

col-lg-n：对大型设备（>=1200px），占n列。

记忆：xs（exceed small），sm（small），md（middle），lg（large）

说明：如果只指定一种设备的类型，则不管在什么设备上，都会采用该类型。如第一个例子中col-sm-*与col-xs-*还是产生作用了。

（三）、列重置

未指定类型的@media 媒体查询是用于html 文档，Bootstrap 定义的样式也必然只是运用于html 文档。可以查看部分bootstrap 的less 代码：

.container {
  .container-fixed();

  @media (min-width: @screen-sm-min) {
    width: @container-sm;
  }
  @media (min-width: @screen-md-min) {
    width: @container-md;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }
}

可见，未指定媒体类型，因此container 等类是用于当前html 文档的。

既然如此，那么当对浏览器窗口进行缩放，也就是对html 页面宽度进行调整时，为了限制最小宽度，普通 css可以通过float 实现，当缩小浏览器宽度时，右侧的元素被自动挤到下一行。

但Bootstrap 是通过以行作为单位的，如果只指定一个col-*-*类型，无论怎么缩小宽度，右侧的列并不会被挤到下一行，这时可通过定义多个不同列类型（col-*-*）实现与元素浮动时相似的效果。如：

    
内容1
    
内容2
    
内容3
    
内容4

说明：

col-lg-*是对宽度>=1200px 的页面定义的类；col-md-*是对宽度992px<=width<1200px定义的类。

浏览器窗口（宽度1366px）不缩放时的效果：

缩放到一定宽度（小于1200px）时的效果：

若还定义了col-xs-*与col-sm-*类，那么继续缩小宽度，将采用sm的样式或xs的样式。

可见，用 bootstrap 制作响应式布局还是很方便的。

详细参考：http://www.runoob.com/bootstrap/bootstrap-grid-system.html

三、Bootstrap 图标

Bootstrap 中提供了一些免费图标，感觉非常有用，使用方式也简单，在此记录下。

如（图标下方的为该图标的类）：

使用规则：

不能与其它boostrap 组件类共同存在，需用单独的空的span 包裹，如使用上面第2行第3个图标：

    删除

效果：

此处对按钮使用了bootstrap 的样式。

Bootstrap 图标及其它组件地址：http://v3.bootcss.com/components/

这些图标实际来源于 http://glyphicons.com/，对bootstrap 中的使用是免费的，所以得感谢他们的共享！