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插件之自动添加删除行功能介绍
Oct 14 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
理解javascript中的with关键字
Feb 15 Javascript
关于Vue的路由权限管理的示例代码
Mar 06 Javascript
详解JS函数stack size计算方法
Jun 18 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 Javascript
node.js监听文件变化的实现方法
Apr 17 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
TMDPHP 模板引擎使用教程
2012/03/13 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
Python循环语句之break与continue的用法
2015/10/14 Python
用Python编写简单的微博爬虫
2016/03/04 Python
python查看微信好友是否删除自己
2016/12/19 Python
python里运用私有属性和方法总结
2019/07/08 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
保密普查工作实施方案
2014/02/25 职场文书
出纳工作检讨书
2014/10/18 职场文书
英文辞职信范文
2015/05/13 职场文书
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android