Bootstrap布局之栅格系统详解


Posted in Javascript onJune 13, 2016

前些天学习了bootstrap,把其中的栅格系统整理出来,如有错误,欢迎指正。
概要,栅格系统针对pc,pad,移动端开发出响应式web页面,根据不同屏幕分辨率有针对不同的解决方法。
(0.1, 屏幕设备尺寸大于1200px 选择col-lg 
(0.2. 屏幕设备尺寸在970px到1200px 选择col-md 
(0.3. 屏幕设备尺寸在768px到970px 选择col-sm 
(0.4. 屏幕设备尺寸小于768px 选择col-xs

1.栅格系统把页面分为12栏(最多12栏),如下: 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,maxinum-scale,user-scalable=no">
 <title>栅格系统</title>
 <link rel="stylesheet" href="library/bootstrap.min.css">
 <style>
       .a{
        height: 50px;
        border: 1px red solid;
        background: pink;
       } 
 </style>
</head>
<body>
 <div class="container a">
  <div class="row">
   <div class="col-md-1 a">1</div>
   <div class="col-md-1 a">1</div>
   <div class="col-md-1 a">1</div>
   <div class="col-md-1 a">1</div>
   <div class="col-md-1 a">1</div>
   <div class="col-md-1 a">1</div>
   <div class="col-md-1 a">1</div>
   <div class="col-md-1 a">1</div>
   <div class="col-md-1 a">1</div>
   <div class="col-md-1 a">1</div>
   <div class="col-md-1 a">1</div>
   <div class="col-md-1 a">1</div>
  </div>

  <div class="row">
   <div class="col-md-3 a">3</div>
   <div class="col-md-9 a">9</div>
  </div>
 </div>


<script src="library/jq.js"></script> 
<script src="library/bootstrap.min.js"></script>
</body>
</html>

(2.1,  col-md-1为一栏,合计12栏布满一个"横排",md后尾随的数字为分配的栏数,(col-lg,col-sm,col-xs同理)

3.在不同屏幕分辨率的设备下,所呈现的页面为对应的"栅格式栏数页面",从而实现响应式布局,如下代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,maxinum-scale,user-scalable=no">
 <title>栅格系统</title>
 <link rel="stylesheet" href="library/bootstrap.min.css">
 <style>
       .a{
        height: 50px;
        border: 1px red solid;
        background: pink;
       } 
 </style>
</head>
<body>
 <div class="container">
  <div class="row">
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">1</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">1</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">1</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">1</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">1</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">1</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">1</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">1</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">1</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">1</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">1</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">1</div>   
  </div>
 </div>

<script src="library/jq.js"></script> 
<script src="library/bootstrap.min.js"></script>
</body>
</html>

(3.1,上图代码表示在屏幕设备尺寸大于1200px时,一个横排有四大栏,一个大栏有三小栏,小栏共计12栏, 
(3.2,表示在屏幕设备尺寸在970px到1200px时(可以先看为浏览器缩小至这个阶段时),一个横排有三大栏,一个大栏有四小栏,小栏共计12栏, 
(3.2,表示在屏幕设备尺寸在768px到970px时(可以先看为浏览器缩小至这个阶段时),一个横排有二大栏,一个大栏有六小栏,小栏共计12栏, 
(3.2,表示在屏幕设备尺寸小于768px时(可以先看为浏览器缩小至这个阶段时),一个横排有一大栏,一个大栏有十二小栏,小栏共计12栏,

4、栅格系统里的列偏移,嵌套和交换位置
(4.1,列偏移       

<div class="row">   
    <div class="col-md-8 a">8</div>
    <div class="col-md-3 col-md-offset-1 a">3</div> <!-- 列向右偏移一位 -->   
  </div>

(4.2,嵌套   

<div class="row">  <!-- 嵌套 -->  
   <div class="col-md-9 a" style="padding:0;">
    <div class="col-md-4 a"></div>
    <div class="col-md-4 a"></div>
    <div class="col-md-4 a"></div>
   </div>
   <div class="col-md-3 a">3</div>    
 </div>

(4.3,交换位置 

<div class="row">   <!-- 交换位置 -->  
   <div class="col-md-9 col-md-push-3 a">9</div>   <!-- push,向右移 -->
   <div class="col-md-3 col-md-pull-9 a">3</div>   <!-- pull,向左移 -->
 </div>

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

本文都是通过最简单的案例,来剖析案例中涉及到的布局要点,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
javascript self对象使用详解
Oct 18 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 Javascript
用JS创建一个录屏功能
Nov 11 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 #Javascript
jquery制做精致的倒计时特效
Jun 13 #Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 #Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 #Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 #Javascript
Bootstrap表单Form全面解析
Jun 13 #Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 #Javascript
You might like
PHP生成HTML静态页面实例代码
2008/08/31 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
vant实现购物车功能
2020/06/29 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
pycharm永久激活超详细教程
2020/10/29 Python
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
光声世纪笔试题目
2012/08/25 面试题
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
应届生求职推荐信
2013/10/28 职场文书
自荐信怎么写好
2013/11/11 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
Python基础之pandas数据合并
2021/04/27 Python
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python