第一次接触神奇的Bootstrap网格系统


Posted in Javascript onJuly 27, 2016

本篇将主要介绍Bootstrap的网格系统。

网格系统的实现是通过定义容器大小,平分12份(或24份、32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。

Bootstrap中的网格系统就是将容器平分成12份。

Bootstrap的网格系统用来布局,其实就是列的组合,一共有四种基本的用法:

1.列组合

更改数字来合并列(原则:列总和数不能超12),例如:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>列组合基本用法</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!--css样式-->
<style >
 [class *= col-]{
  background-color: #eee;
  border: 1px solid #ccc;
 }
</style>
</head>
<body>
<br>
<div class="container">
 <div class="row">
  <!--Bootstrap中的网格系统就是将容器平分成12份-->
  <!--此行以1:1:1平均分开-->
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
 </div>
 <div class="row">
  <!--此行以1:2:1平均分开-->
  <div class="col-md-3">.col-md-3</div>
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-3">.col-md-3</div>
 </div>
</div>
</body>
</html>

效果图如下:

第一次接触神奇的Bootstrap网格系统

2.列偏移

在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。

<div class="container">
 <!--列向右移动四列的间距-->
 <div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
  <div class="col-md-2">.col-md-3</div>
 </div>
</div>

<!--发生行断裂-->
<div class="container">
 <div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
  <div class="col-md-2">.col-md-3</div>
 </div>
 <div class="row">
  <div class="col-md-3">.col-md-3</div>
  <div class="col-md-3 col-md-offset-3">col-md-offset-3</div>
  <div class="col-md-4">col-md-4</div>
 </div>
</div>

效果图如下:

第一次接触神奇的Bootstrap网格系统

3.列排序

列排序就是改变列的方向,改变左右浮动,并且设置浮动的距离。Bootstrap中是通过添加类名“col-md-push-”和“col-md-pull-” (其中星号代表移动的列组合数)实现的。

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>基本用法</title>
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 <!--css样式-->
 <style >
 [class *= col-]{
  background-color: #eee;
  border: 1px solid #ccc;
 }
 </style>
</head>
<body>
 <div class="container">
  <div class="row">
   <div class="col-md-4 col-md-push-8">.col-md-3</div>
   <div class="col-md-8 col-md-pull-4">.col-md-6</div>
  </div>
 </div>
</body>
</html>

4.列的嵌套

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>基本用法</title>
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 <!--css样式-->
 <style >
  [class *= col-]{
   background-color: #eee;
   border: 1px solid #ccc;
  }
  [class *= col-] [class *= col-] {
   background-color: #f36;
   border:1px dashed #fff;
   color: #fff;
  }
 </style>
</head>
<body>
 <div class="container">
  <div class="row">
   <div class="col-md-8">
    我的里面嵌套了一个网格
    <div class="row">
     <div class="col-md-6">col-md-6</div>
     <div class="col-md-6">col-md-6</div>
    </div>
   </div>
   <div class="col-md-4">col-md-4</div>
  </div>
 </div>
</body>
</html>

效果图如下:

第一次接触神奇的Bootstrap网格系统

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

系列文章:

第一次接触神奇的Bootstrap基础排版https://3water.com/article/89278.htm
第一次接触神奇的Bootstrap表单https://3water.com/article/89330.htm

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
自己动手开发jQuery插件教程
Aug 25 Javascript
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
JSONP之我见
Mar 24 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
原生JS实现$.param() 函数的方法
Aug 10 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 #Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 #Javascript
第一次接触神奇的Bootstrap表单
Jul 27 #Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 #Javascript
基于jQuery实现页面搜索功能
Mar 26 #Javascript
JS中的数组方法笔记整理
Jul 26 #Javascript
jQuery实现日期联动效果实例
Jul 26 #Javascript
You might like
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
JS解析XML的实现代码
2009/11/12 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
浅谈Python基础之I/O模型
2017/05/11 Python
Python之os操作方法(详解)
2017/06/15 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
简单谈谈python基本数据类型
2018/09/26 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
实习期自我鉴定
2013/10/11 职场文书
小学庆六一活动方案
2014/02/28 职场文书
大学生学习计划书
2014/09/15 职场文书
2014年计生工作总结
2014/11/21 职场文书
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android