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

来源：互联网发布：sql如何建立级联编辑：程序博客网时间：2024/06/05 18:02

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 中的使用是免费的，所以得感谢他们的共享！

阅读全文

0 0