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判断表单输入是否为空(示例代码)
Dec 23 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
express框架中使用jwt实现验证的方法
Aug 25 Javascript
微信公众号网页分享功能开发的示例代码
May 27 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
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
PHP7 弃用功能
2021/03/09 PHP
JavaScript实用技巧(一)
2010/08/16 Javascript
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
layui实现三级导航菜单
2019/07/26 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
node.js基础知识汇总
2020/08/25 Javascript
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
对python sklearn one-hot编码详解
2018/07/10 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
Python 3.8 新功能全解
2019/07/25 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
python实现双色球随机选号
2020/01/01 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
商务专员岗位职责
2013/11/23 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
Django migrate报错的解决方案
2021/05/20 Python
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android
Android Studio 计算器开发
2022/05/20 Java/Android