学习使用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实战教程

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

Javascript 相关文章推荐
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
用js模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
Javascript函数式编程语言
Oct 11 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 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
html中select语句读取mysql表中内容
2006/10/09 PHP
Windows下安装Memcached的步骤说明
2010/04/25 PHP
php实现等比例压缩图片
2018/07/26 PHP
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
node中的session的具体使用
2018/09/14 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
python创建学生管理系统
2019/11/22 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
Python列表操作方法详解
2020/02/09 Python
python 如何区分return和yield
2020/09/22 Python
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
人事行政主管岗位职责
2013/12/22 职场文书
餐厅总厨求职信
2014/03/04 职场文书
个人承诺书
2014/03/26 职场文书
门面房租房协议书
2014/12/01 职场文书
学前教育见习总结
2015/06/23 职场文书
新党员入党决心书
2015/09/22 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers