第一次接触神奇的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 相关文章推荐
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
Javascript 页面模板化很多人没有使用过的方法
Jun 05 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
Vue如何从1.0迁移到2.0
Oct 19 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
vue实现图书管理系统
Dec 29 Vue.js
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文件上传之多文件上传的实现思路
2016/01/27 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
详解Python中的元组与逻辑运算符
2015/10/13 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
一道python走迷宫算法题
2018/01/22 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
如何编写python的daemon程序
2021/01/07 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
造价工程师个人求职信
2013/09/21 职场文书
小学新教师个人总结
2015/02/05 职场文书
汽车销售员工作总结
2015/08/12 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
Python 制作自动化翻译工具
2021/04/25 Python
react中的DOM操作实现
2021/06/30 Javascript
python ConfigParser库的使用及遇到的坑
2022/02/12 Python
Win11查看设备管理器
2022/04/19 数码科技