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

jQuery 性能优化指南（3）

May 21 Javascript

获取3个数组不重复的值的具体实现

Dec 30 Javascript

js动态创建标签示例代码

Jun 09 Javascript

百度地图自定义控件分享

Mar 04 Javascript

详解Vue 非父子组件通信方法（非Vuex）

May 24 Javascript

10个经典的网页鼠标特效代码

Jan 09 Javascript

vue 使用eventBus实现同级组件的通讯

Mar 02 Javascript

Web安全之XSS攻击与防御小结

Dec 13 Javascript

实例讲解JS中pop使用方法

Jan 27 Javascript

vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】

Mar 06 Javascript

解决vant-UI库修改样式无效的问题

Nov 03 Javascript

实现AJAX异步调用和局部刷新的基本步骤

Mar 17 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