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 相关文章推荐
javascript编程起步(第七课)
Feb 27 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
js两行代码按指定格式输出日期时间
Oct 21 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
Angularjs使用指令做表单校验的方法
Mar 31 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 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
DOMXML函数笔记
2006/10/09 PHP
php实现多张图片上传加水印技巧
2013/04/18 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
JS验证字符串功能
2017/02/22 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
React优化子组件render的使用
2019/05/12 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
python sorted函数原理解析及练习
2020/02/10 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
应聘编辑职位自荐信范文
2014/01/05 职场文书
就业协议书的作用
2014/04/11 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
详解MySQL连接挂死的原因
2021/05/18 MySQL
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers