编程 Javascript

学习使用bootstrap3栅格系统

Posted in Javascript onApril 12, 2016

一、bootstrap开发环境搭建
1. 下载bootstrap, http://www.bootcss.com/
2. 下载jquery, 通过IE直接访问http://code.jquery.com/jquery-2.0.3.min.js
3. 在html页面中导入bootstrap与jquery的js,css文件，.viewport的<meta>标签，这个标签可以修改在大部分的移动设备上面的显示，加如 if lt IE 9...等是为了在ie9以下的兼容。
模板如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Insert title here</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
 <![endif]-->
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
 <div class="container">
  
 </div>
</body>
</html>

二. 栅格系统
1. boostrap把桌面分隔成由12行 * n 列的表格进行布局，这是boostrap进行而已的核心。
2. .row 进行行级划分，必须包含在 .container下。
3. col-xx-*进行列级划分，如下图

学习使用bootstrap3栅格系统

<div class="container">
  <div class="row">
   <div class="col-md-3">1</div>
   <div class="col-md-3">2</div>
   <div class="col-md-3">3</div>
   <div class="col-md-3">4</div>
  </div>
  <div class="row">
   <div class="col-md-3">5</div>
   <div class="col-md-3">6</div>
   <div class="col-md-3">7</div>
   <div class="col-md-3">8</div>
  </div>
 </div>

4.列偏移，通过 col-xx-offset-*来实现

<div class="container">
  <div class="row">
   <div class="col-md-3">1</div>
   <div class="col-md-3">2</div>
   <div class="col-md-3">3</div>
   <div class="col-md-3">4</div>
  </div>
  <div class="row">
   <div class="col-md-3">5</div>
   <div class="col-md-3">6</div>
   <div class="col-md-3 col-md-offset-3">7</div>
  </div>
 </div>

5. 列排序，能过.col-xx-push-* 和 .col-xx-pull-* 实现列的向左或向右排序

<div class="container">
  <div class="row">
   <div class="col-md-3">1</div>
   <div class="col-md-3">2</div>
   <div class="col-md-3 col-md-push-3">3</div>
  </div>
  <div class="row">
   <div class="col-md-3">5</div>
   <div class="col-md-3">6</div>
   <div class="col-md-3 col-md-pull-2">7</div>
  </div>
 </div>

6. 列嵌套，row嵌套在col中即可。

<div class="row">
   <div class="col-md-3">1</div>
   <div class="col-md-3">2</div>
   <div class="col-md-3">3</div>
   <div class="col-md-3">
    <div class="row">
     <div class="col-md-1">5</div>
     <div class="col-md-1">6</div>
     <div class="col-md-1">7</div>
    </div>
   </div>
  </div>

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

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

学习使用bootstrap3栅格系统

- Author -

威哥V5

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS IE和FF兼容性问题汇总

Feb 09 Javascript

ExtJS Ext.MessageBox.alert()弹出对话框详解

Apr 02 Javascript

关于JS控制代码暂停的实现方法分享

Oct 11 Javascript

javascript实现全角与半角字符的转换

Jan 07 Javascript

Javascript简单实现面向对象编程继承实例代码

Nov 27 Javascript

扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框

Feb 21 Javascript

使用Angular CLI进行单元测试和E2E测试的方法

Mar 24 Javascript

JavaScript链式调用实例浅析

Dec 19 Javascript

vue基于viewer实现的图片查看器功能

Apr 12 Javascript

JavaScript实现打砖块游戏

Feb 25 Javascript

vue和H5 draggable实现拖拽并替换效果

Jul 29 Javascript

Nuxt的动态路由和参数校验操作

Nov 09 Javascript

分享两段简单的JS代码防止SQL注入

Apr 12 #Javascript

DIV随滚动条滚动而滚动的实现代码【推荐】

Apr 12 #Javascript

原生js实现百叶窗效果及原理介绍

Apr 12 #Javascript

CascadeView级联组件实现思路详解(分离思想和单链表)

Apr 12 #Javascript

jquery中实现时间戳与日期相互转换

Apr 12 #Javascript

Angular.js与Bootstrap相结合实现表格分页代码

Apr 12 #Javascript

JS代码防止SQL注入的方法(超简单)

Apr 12 #Javascript

You might like

PHP中，文件上传

2006/12/06 PHP

php不使用copy()函数复制文件的方法

2015/03/13 PHP

php获取Google机器人访问足迹的方法

2015/04/15 PHP

thinkphp3.2.3 分页代码分享

2016/07/28 PHP

PHP从零开始打造自己的MVC框架之路由类实现方法分析

2019/06/03 PHP

使用ImageMagick进行图片缩放、合成与裁剪(js+python)

2013/09/16 Javascript

JS实现切换标签页效果实例代码

2013/11/01 Javascript

使用Chrome调试JavaScript的断点设置和调试技巧

2014/12/16 Javascript

深入理解JavaScript中的对象

2015/06/04 Javascript

jQuery通过ajax方法获取json数据不执行success的原因及解决方法

2016/10/15 Javascript

JS实现的简单拖拽功能示例

2017/03/13 Javascript

Angular中ng-repeat与ul li的多层嵌套重复问题

2017/07/24 Javascript

迅速了解一下ES10中Object.fromEntries的用法使用

2019/03/05 Javascript

解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题

2019/10/11 Javascript

基于Vue中的父子传值问题解决

2020/07/27 Javascript

Python调用C++程序的方法详解

2017/01/24 Python

Python之reload流程实例代码解析

2018/01/29 Python

Python数据分析之获取双色球历史信息的方法示例

2018/02/03 Python

使用pandas的box_plot去除异常值

2019/12/10 Python

利用python中集合的唯一性实现去重

2020/02/11 Python

通过python检测字符串的字母

2020/02/18 Python

浅谈Python中re.match()和re.search()的使用及区别

2020/04/14 Python

浅析python 动态库m.so.1.0错误问题

2020/05/09 Python

PyCharm2019.3永久激活破解详细图文教程，亲测可用（不定期更新）

2020/10/29 Python

html5的canvas元素使用方法介绍(画矩形、画折线、圆形)

2014/04/14 HTML / CSS

美国体育用品商店：Rally House（NCAA、NFL、MLB、NBA、NHL和MLS）

2018/01/03 全球购物

俄罗斯GamePark游戏商店网站：购买游戏、游戏机和配件

2020/03/13 全球购物

捷克多品牌在线时尚商店：ANSWEAR.cz

2020/10/03 全球购物

打架检讨书100字

2014/01/08 职场文书

给水工程专业毕业生自荐信

2014/01/28 职场文书

旅游与环境专业求职信

2014/06/05 职场文书

学雷锋志愿者活动总结

2014/06/27 职场文书

电子商务专业求职信

2014/07/10 职场文书

教师师德师风个人整改方案

2014/09/18 职场文书

学前班幼儿评语大全

2014/12/29 职场文书

Minikube搭建Kubernetes集群

2022/03/31 Servers