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

最新推荐文章于 2024-08-22 20:17:26 发布

Liekkas_BX

最新推荐文章于 2024-08-22 20:17:26 发布

阅读量5.9k

点赞数 1

分类专栏：前端框架 CSS

本文链接：https://blog.csdn.net/qq_19865749/article/details/78305763

版权

CSS 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

前端框架

10 篇文章 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> 标签中

<style type="text/css">
    .container{width:90%}
    @media (min-width:790px){
        .container{width:100%;}
    }
    @media (min-width:1370px){
        .container{width:80%;}
    }
</style>

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

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

二、Boostrap 网格系统

（一）、基础认识

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

基础使用示例：

1、CDN 方式引入Bootstrap 与jQuery：

	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<!--  可选的 Bootstrap 主题文件（一般不用引入）
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> -->

	<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

2、基础示例：

body部分：

<body>
<div class="container">
 	<div class="row">
		<div class=" col-sm-4">
				<div class="col-xs-4 contentCenter"><button>按钮</button></div>
                                <div class="col-xs-8">8列</div>
		</div>
		<div class=" col-sm-8">我占6列</div>
	</div>
	<div class="row">新的一行</div>
</div>
</body>

效果：

（二）、样式类说明

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

<style type="text/css">
.container{padding:0;margin:0;}
</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-*-*）实现与元素浮动时相似的效果。如：

<div class="row">
    <div class="col-md-6 col-lg-3">内容1</div>
    <div class="col-md-6 col-lg-3">内容2</div>
    <div class="col-md-6 col-lg-3">内容3</div>
    <div class="col-md-6 col-lg-3">内容4</div>
</div>

说明：

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个图标：

<button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
</button>

效果：

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

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

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

Liekkas_BX

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录