第一次接触神奇的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 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
javascript静态的url如何传递
May 03 Javascript
在html页面上拖放移动标签
Jan 08 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 Javascript
JavaScript中的style.display属性操作
Mar 27 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
Node.js 路由的实现方法
Jun 05 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 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
世界收音机发展史
2021/03/01 无线电
JS获取父节点方法
2009/08/20 Javascript
9个JavaScript评级/投票插件
2010/01/18 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
使用python绘制二元函数图像的实例
2019/02/12 Python
pandas.cut具体使用总结
2019/06/24 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
新闻专业个人求职信
2013/12/19 职场文书
大专会计自我鉴定
2014/02/06 职场文书
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
路政管理求职信
2014/06/18 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
独生子女证明范本
2015/06/19 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
python用字节处理文件实例讲解
2021/04/13 Python
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS