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

清疚 2022-06-07 12:42 608阅读 0赞

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 的设备）。

示例：

<!DOCTYPE html>
    <html>
    <head>
    	<title>学习Bootstrap 栅格</title>
    	<style type="text/css">
    	div{
    		background-color: pink;
    	}
    	@media screen and (max-width: 1370px) {
    		/*电脑屏幕分辨率为1366*768，所以该html 中div背景会显示为浅蓝色*/
    	    div {
    	        background-color:lightblue;
    	    }
    	}
    	</style>
    </head>
    <body>
    	<div>我是什么颜色的</div>
    </body>
    </html>

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

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

1、在<style> 标签中

2、在<link>标签中使用media 引入不同css

**二、Boostrap 网格系统**

**（一）、基础认识**

Bootstrap 将一行（row）等分成12列，一个盒子（<div>）可以用类指定占用几列，一行的高度由该行中包含列的最大高度决定。行可以嵌套在列中。

基础使用示例：

1、CDN 方式引入Bootstrap 与jQuery：

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    	
    
    	<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    	
    	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

2、基础示例：

body部分：

效果：

![Center][]

**（二）、样式类说明**

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-\*-\*）实现与元素浮动时相似的效果。如：

**说明：**

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

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

![Center 1][]

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

![Center 2][]

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

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

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

**三、Bootstrap 图标**

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

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

![Center 3][]

使用规则：

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

效果：

![Center 4][]

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

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

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

[Center]: /images/20220607/20841ebde7684b938c0e73937cfb96e6.png
[Center 1]: /images/20220607/0103a166d1c340efa83944aff8de907b.png
[Center 2]: /images/20220607/0d582cf067d2484d978ee2962b4c88f2.png
[http_www.runoob.com_bootstrap_bootstrap-grid-system.html]: http://www.runoob.com/bootstrap/bootstrap-grid-system.html
[Center 3]: /images/20220607/63ffe4a6e3ef415c9c5427476e36e482.png
[Center 4]: /images/20220607/c36cc5c71279476ab4198ebc910259ff.png
[http_v3.bootcss.com_components]: http://v3.bootcss.com/components/
[http_glyphicons.com]: http://glyphicons.com/