编程 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 相关文章推荐

几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()

Jun 02 Javascript

JavaScript XML和string相互转化实现代码

Jul 04 Javascript

详解js闭包

Sep 02 Javascript

跟我学习javascript的定时器

Nov 19 Javascript

AngularJS教程 ng-style 指令简单示例

Aug 03 Javascript

js实现瀑布流效果（自动生成新的内容）

Mar 16 Javascript

原生JavaScript实现的简单放大镜效果示例

Feb 07 Javascript

微信小程序实现的绘制table表格功能示例

Apr 26 Javascript

快速搭建Node.js(Express)用户注册、登录以及授权的方法

May 09 Javascript

微信小程序表单验证插件WxValidate的二次封装功能（终极版）

Sep 03 Javascript

layui switch 开关监听弹出确定状态转换的例子

Sep 21 Javascript

vue element table中自定义一些input的验证操作

Jul 18 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

phpmyadmin里面导入sql语句格式的大量数据的方法

2010/06/05 PHP

一个简单的网页密码登陆php代码

2012/07/17 PHP

php对mongodb的扩展(初出茅庐)

2012/11/11 PHP

PHP引用的调用方法分析

2016/04/25 PHP

Extjs ajax同步请求时post方式参数发送方式

2009/08/05 Javascript

Jsonp 跨域的原理以及Jquery的解决方案

2010/05/18 Javascript

js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色

2010/05/27 Javascript

20款非常优秀的 jQuery 工具提示插件推荐

2012/07/15 Javascript

一个简单的jQuery计算器实现了连续计算功能

2014/07/21 Javascript

基于replaceChild制作简单的吞噬特效

2015/09/21 Javascript

jQuery视差滚动效果网页实现方法经验总结

2016/09/29 Javascript

浅谈jQuery中的eq()与DOM中element.[]的区别

2016/10/28 Javascript

JS自定义滚动条效果简单实现代码

2020/10/27 Javascript

基于iScroll实现下拉刷新和上滑加载效果

2017/07/18 Javascript

vue+vuecli+webpack中使用mockjs模拟后端数据的示例

2017/10/24 Javascript

vue实现点击展开点击收起效果

2018/04/27 Javascript

ES6中let 和 const 的新特性

2018/09/03 Javascript

vue数据响应式原理知识点总结

2020/02/16 Javascript

JavaScript ES6 Class类实现原理详解

2020/05/08 Javascript

vue-model实现简易计算器

2020/08/17 Javascript

[01:37]全新的一集《真视界》——TI7总决赛

2017/09/21 DOTA

Python的Django框架中设置日期和字段可选的方法

2015/07/17 Python

安装ElasticSearch搜索工具并配置Python驱动的方法

2015/12/22 Python

Python基于百度云文字识别API

2018/12/13 Python

Python3 pip3 list 出现 DEPRECATION 警告的解决方法

2019/02/16 Python

python实现两张图片拼接为一张图片并保存

2019/07/16 Python

Django 数据库同步操作技巧详解

2019/07/19 Python

tensorflow 固定部分参数训练,只训练部分参数的实例

2020/01/20 Python

自我鉴定书范文

2013/10/02 职场文书

结婚喜宴主持词

2014/03/14 职场文书

工程力学专业自荐信范文

2014/03/17 职场文书

道德大讲堂实施方案

2014/05/14 职场文书

教学改革问题查摆整改措施

2014/09/27 职场文书

初三数学教学反思

2016/02/17 职场文书

jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()

2021/03/31 jQuery

关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)

2022/04/04 Python