响应式开发(五)-----Bootstrap CSS----------Bootstrap 网格系统
如果我们看过一些bootstrap的框架，经常看到col-sm-3等样式class。
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
12
12
12
最大列宽
Auto
60px
78px
95px
间隙宽度
30px
（一个列的每边分别 15px）
30px
（一个列的每边分别 15px）
30px
（一个列的每边分别 15px）
30px
（一个列的每边分别 15px）
可嵌套
Yes
Yes
Yes
Yes
偏移量
Yes
Yes
Yes
Yes
列排序
Yes
Yes
Yes
Yes
基本的网格结构
（一个列的每边分别 15px）
（一个列的每边分别 15px）
（一个列的每边分别 15px）
（一个列的每边分别 15px）
下面是 Bootstrap 网格的基本结构：
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....
每个页面都需要一个容器<div class="container">...</div> ，确保居中和最大宽度。
一旦添加了容器，接下来您需要考虑以行为单位。添加 <div class="row">...</div>，并在行内添加列 <div class="col-md-*"></div>。
网格中的每一行是由12 个单元组成的，您可以使用这些单元定义列的尺寸。在我们的实例中，有两个列，每个列由 6 个单元组成，即 6+6=12。则使用的样式class是col-md-6。
您可以尝试其他更多的选项，比如 <div class="col-md-3"></div> 和 <div class="col-md-9"></div> 或 <div class="col-md-7"></div> 和 <div class="col-md-5"></div>。
您可以尝试一下，但要确保总和总是 12。
基本使用实例
Bootstrap 网格系统实例：水平分列
这是一个带有简单布局的网格实例：包含两个列，每个列包含两个段落。（在这里，为每个列分别定义了样式，不定义也可以），因为有2列，所以每列应该占6个网格，所以我们使用col-md-6。代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 水平分成两列</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-6" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>第一列的段落1
</p>
<p>第一列的段落2
</p>
</div>
<div class="col-md-6" style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>第二列的段落1
</p>
<p>第二列的段落2
</p>
</div>
</div>
</body>
</html>
页面效果把上面保存为html页面打开可见:
在chrome中F12修改设备屏幕大小，发现可以自适应：
Bootstrap 网格系统实例：中型和大型设备区分显示
在上个例子中，我们使用 2 个 div，并在视口宽度的中间对它们进行 50%/50% 分割：
<div class="col-md-6">....</div>
<div class="col-md-6">....</div>
但是，在大型设备上，您最后设计成 33%/66%。所以我们要做的是配置大型设备对应的列的宽度：
<div class="col-md-6 col-lg-4">....</div>
<div class="col-md-6 col-lg-8">....</div>
Bootstrap 在中型设备中，会查找带有 md 的class，并使用它们。在大型设备中，会查找带有 lg 的class，并使用它们。在本实例中，我们的 2 个 div 在中型设备中显示为 50%/50% ，在大型设备为 33%/66%。请查看下面的实例进行验证。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 中型和大型设备区分显示</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-6 col-lg-4" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>第一列段落1
</p>
<p>第一列段落2
</p>
</div>
<div class="col-md-6 col-lg-8" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>第二列段落1
</p>
<p>第二列段落2
</p>
</div>
</div>
</body>
</html>
代码保存为html打开可见效果:
在手机等中型屏幕是两列分别 50% 50%的布局
在大屏幕中是两列分别是33%/66%的布局
Bootstrap 网格系统实例：手机、平板电脑、台式电脑区分
我们已经看过 中型和大型设备 。现在，让我们一起看另一个实例，我们将让它同样适用于小型手机。我们要把手机的列分割为 25%/75%，我们将添加如下选项：
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
现在，给我们提供了 3 种不同的列布局，分别适用于三种设备。在手机上，它将是左边 25% 右边 75% 的布局。在平板电脑上，它将是 50%/50% 的布局。在大型视口的设备上，它将是 33%/66% 的布局。请查看下面的实例进行验证。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 手机,平板，台式机区分</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>第一列段落1
</p>
<p>第一列段落2
</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>第二列段落1
</p>
<p>第二列段落2
</p>
</div>
</div>
</body>
</html>
效果如下，代码保存为html文件打开可见。
小型设备--手机
中型设备-平板电脑
大型设备--台式
总结来说 Bootstrap 在小型设备中，会优先查找使用带有sm的class，中型设备中，会查找带有 md 的class，并使用它们。在大型设备中，会查找带有 lg 的class，并使用它们。
特殊情况处理实例
响应式列重置---修复列高度bug
当列的高度不一样时，在设备的自适应中后面的列可能会出现重叠。如下代码:
<!DOCTYPE html>
<html>
<head>
<title>列重置--列的高度bug修复</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.show-grid { margin-top: 15px; }
.show-grid [class^="col-"] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="container">
<h1>这个是高度bug</h1>
<div class="row show-grid">
<div class="col-xs-3 col-sm-6">.col-xs-3 .col-sm-6<br>内容要多多---内容要多多---内容要多多---内容要多多---内容要多多---内容要多多</div>
<div class="col-xs-3 col-sm-6">.col-xs-3 .col-sm-6</div>
<div class="col-xs-3 col-sm-6">.col-xs-3 .col-sm-6</div>
<div class="col-xs-3 col-sm-6">.col-xs-3 .col-sm-6</div>
</div>
</body>
</html>
效果为：
我们可以看到 这小型sm设备中 第二列和第三列叠在一起了，这不是我们想要的效果。
甚至当第一列高度更高时，可能后面的 第二第三第四列都会叠在一起。
怎么解决这个问题呢？
官网给出了一种解决方案（使用.clearfix（清理浮动）和响应式工具class的组合）--响应式工具我们后面会详细介绍
例如这里使用 <div class="clearfix visible-sm"></div>即可解决高度bug的问题。 我们是在sm设备中所以使用visible-sm。
完整解决代码为:
<!DOCTYPE html>
<html>
<head>
<title>列重置--列的高度bug修复</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.show-grid { margin-top: 15px; }
.show-grid [class^="col-"] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="container">
<h1>这个是高度bug</h1>
<div class="row show-grid">
<div class="col-xs-3 col-sm-6">.col-xs-3 .col-sm-6<br>内容要多多---内容要多多---内容要多多---内容要多多---内容要多多---内容要多多</div>
<div class="col-xs-3 col-sm-6">.col-xs-3 .col-sm-6</div>
<!-- 在某些阈值时，某些列可能会出现比别的列高的情况。这个情况可能不是你所要的，建议使用.clearfix（清理浮动）和响应式工具classe的组合 -->
<div class="clearfix visible-sm"></div>
<div class="col-xs-3 col-sm-6">.col-xs-3 .col-sm-6</div>
<div class="col-xs-3 col-sm-6">.col-xs-3 .col-sm-6</div>
</div>
</body>
</html>
效果图:
列偏移---让列居中显示
我们发现bootstrap分成12列的逻辑里 我们经常用到col-XX-6这些样式，具体左右的分配则是bootstrap框架自动来分配的位置了。比如如果我只有一列，用了col-sm-6，那么它显示的时候肯定是分配在左边的(如图)
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>列偏移--让列居中</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row" >
<div class="col-sm-6 "
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>我是想要居中的列
</p>
</div>
</div>
</div>
</body>
</html>
我怎么能让它变成居中呢? bootstrap提供了 列偏移 的样式.col-XX-offset-* 类。
偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-XX-* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。
为了在小屏幕显示器上使用偏移，请使用 .col-sm-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
在下面的实例中，我们有 <div class="col-sm-6">..</div>，我们将使用 .col-sm-offset-3 class 来居中这个 div。
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>列偏移--让列居中</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row" >
<div class="col-sm-6 col-sm-offset-3"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>我是想要居中的列
</p>
</div>
</div>
</div>
</body>
</html>
效果如图:
列里嵌套行---列里多行布局
如果需要一个列里有多行请在这一列里添加一个新的 .row(行)，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。
在下面的实例中，布局有两个列，第二列被分为两行四个盒子。
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>列偏移--让列居中</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>第一列</h4>
<p>
第一列的内容
</p>
</div>
<div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>第二列 - 分为四个盒子</h4>
<div class="row">
<div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
第二列下的第一行的第一列内容
</p>
</div>
<div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
第二列下的第一行的第二列内容
</p>
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
第二列下的第二行的第一列内容
</p>
</div>
<div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
第二列下的第二行的第二列内容
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
效果如图:
列排序---调整列的顺序
我们知道col-xx-* 是用来觉得列的宽度的，表示占据12格子中的多少格。然后按照顺序排序，那么如果我们要调整列的顺序呢。
Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。
可以使用.col-xx-push-* 和 .col-xx-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。
在下面的实例中，我们有两列布局,第一列是占据4格比较短，第二列占据8格，比较长。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。让第二列变成第一列，长的在左边。代码如下:
<!DOCTYPE html>
<html>
<head>
<title>列偏移--让列居中</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<p>
排序前
</p>
<div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我在左边
</div>
<div class="col-md-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我在右边
</div>
</div>
<br>
<div class="row">
<p>
排序后
</p>
<div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我在左边
</div>
<div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我在右边
</div>
</div>
</div>
</body>
</html>
效果图:
响应式开发(五)-----Bootstrap CSS----------Bootstrap 网格系统的更多相关文章
- 响应式开发(二)-----Bootstrap框架的介绍
简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的, ...
- BootStrap常用组件及响应式开发
BootStrap常用组件 PS:所有的代码必须写在<class="container/container-fluid">容器当中 常用组件包含内容: 字体图标 下拉菜 ...
- 借鉴bootstrap的方法，快速实现响应式开发
响应式开发 注意:任何框架都是一个辅助手段,只需借鉴其中的核心思想,把其中核心的东西提炼出来即可.不要因为,提到响应式就想到只能够用bootstrap来实现,框架现有的东西是可以提高我们的效率,但是其 ...
- 移动端开发之响应式开发和bootstrap基础
响应式开发 (就是利用媒体查询针对不同宽度的设备进行布局和样式的设置,从而设配不同设备的目的) 响应式布局容器响应式需要一个父级作为布局容器,来配合子级元素来实现变化效果 原理:不同屏幕下,通过媒体查 ...
- 《微信小程序七日谈》- 第二天：你可能要抛弃原来的响应式开发思维
<微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 上篇文 ...
- 带你玩转JavaWeb开发之五-如何完成响应式开发页面
响应式页面开发 使用BootStrap开发一个响应式的页面出来 响应式开发就是同一个页面在PC端与手机端Pad端显示不同的效果,以给用户更好的体验 需求分析 开发一套页面,让用户能够在PC端, Pad ...
- springboot 使用webflux响应式开发教程（二）
本篇是对springboot 使用webflux响应式开发教程(一)的进一步学习. 分三个部分: 数据库操作webservicewebsocket 创建项目,artifactId = trading- ...
- 基于screen.width的伪响应式开发
一.站在用户的角度看问题 一个用户,访问一个web页面的真实场景是怎样的呢? 下面是某用户访问某站点的一个场景: 1. 小明打开了自己的电脑,访问了鑫空间-鑫生活: 2. 小明体内洪荒之力无法控制,疯 ...
- 移动端使用rem同时适应安卓ios手机原理解析，移动端响应式开发
rem单位大家可能已经很熟悉,rem是随着html的字体大小来显示代表宽度的方法,我们怎样进行移动端响应式开发呢 浏览器默认的字体大小为16px 及1rem 等于 16px 如果我们想要使1rem等于 ...
随机推荐
- ef5 数据库操作
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- Acer 4750G安装OS X 10.9 DP4（简版）
一.下载os x 10.9懒人版:http://bbs.pcbeta.com/viewthread-1384504-1-1.html 二.用系统自带的磁盘分区工具划分一个5G左右的临时安装盘(新建分区 ...
- LeetCode 404. Sum of Left Leaves (C++)
题目: Find the sum of all left leaves in a given binary tree. Example: 3 / \ 9 20 / \ 15 7 There are t ...
- Linux课程学习之我思
陈民禾,原创作品转载请注明出处<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000,我的博客中有一部分是出自M ...
- Java文件写入时是否覆盖
这个是和服务器读数据结合着来的,是向服务器文件写数据,这就碰到了是否覆盖以前写的数据的问题,看FileWriter();的参数后面的参数名叫append,用词典查是附加的意思,灵机一动,改成false ...
- my everying
evering -> everything 一.请回望暑假时的第一次作业,你对于软件工程课程的想象 1)对比开篇博客你对课程目标和期待,"希望通过实践锻炼,增强计算机专业的能力和就业竞 ...
- sprint冲刺(第二天)
今天的每日立会是在早上早餐后8点在宿舍讨论的,大概讨论了关于四则运算练习器APP的看法,也对一些较为基础的功能进行说明
- grunt入门讲解3：实例讲解使用 Gruntfile 配置任务
这个Gruntfile 实例使用到了5个 Grunt 插件: grunt-contrib-uglify grunt-contrib-qunitgrunt-contrib-concatgrun ...
- IDEA小插件之快速修改Maven多模块的工程版本
Github:https://github.com/zwjlpeng/versions 问题在Maven构建的多模块块程中,如果我们需要修改工程的版本号,会怎么操作呢example例如工程A包括了A- ...
- windows下的C++ socket服务器（1）
windows下的一个C++ socket服务器,用到了C++11的相关内容,现在还不是很完善,以后会不断改进的! #include <winsock2.h>//1 以后会用这种方式对特定 ...