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

转换json格式的日期为Javascript对象的函数

Jul 13 Javascript

Javascript公共脚本库系列(一): 弹出层脚本

Feb 24 Javascript

jquery实现图片等比例缩放以及max-width在ie中不兼容解决

Mar 21 Javascript

JS不能跨域借助jquery获取IP地址的方法

Aug 20 Javascript

基于jQuery实现简单的折叠菜单效果

Nov 23 Javascript

js日期插件dateHelp获取本月、三个月、今年的日期

Mar 07 Javascript

浅谈js的ajax的异步和同步请求的问题

Oct 07 Javascript

jquery二级目录选中当前页的css样式

Dec 08 Javascript

微信小程序HTTP接口请求封装的实现

Feb 21 Javascript

ES2020 已定稿,真实场景案例分析

May 25 Javascript

vuex管理状态仓库使用详解

Jul 29 Javascript

JS实现手风琴特效

Nov 08 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