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 相关文章推荐
用js模拟struts2的多action调用示例
May 19 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
Vuex中实现数据状态查询与更改
Nov 08 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制作静态网站的模板框架(三)
2006/10/09 PHP
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
php生成excel列序号代码实例
2013/12/24 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
javascript写的一个链表实现代码
2009/10/25 Javascript
jQuery 前的按键判断代码
2010/03/19 Javascript
JavaScript 原型与继承说明
2010/06/09 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
jquery移动节点实例
2015/01/14 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
Python编程实现蚁群算法详解
2017/11/13 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
python解包概念及实例
2021/02/17 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
九州传奇上机题
2014/07/10 面试题
银行办理业务介绍信
2014/01/18 职场文书
社区春季防火方案
2014/06/02 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
利用python进行数据加载
2021/06/20 Python
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL