Bootstrap网格系统学习笔记

Bootstrap网格系统学习笔记

简单网格

先上代码再解释

<!DOCTYPE html>

<html>

   <head>

      <title>Bootstrap 模板</title>

      <meta charset="utf-8">

      <!-- 引入 Bootstrap -->

      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

   </head>

   <body>

      <div class="container">

         <div class="row">

            <div class="col-md-6" style="background-color: #FFFF00">

            <p>第一块区域</p>

            </div>

            <div class="col-md-6" style="background-color: #99fF66">

            <p>第一块区域</p>

            </div>

         </div>

      </div>

      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->

      <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

      <!-- 包括所有已编译的插件 -->

      <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

   </body>

</html>

CSS和JS的引用

Bootstrap需要引用bootstrap.min.css这个样式表，jquery.min.js，bootstrap.min.js。
jquery的引用要放在bootstrap的引用的前面。
可以不用下载这些文档，直接使用百度CDN上公开的类库入口来实现上述代码,，这样仅凭一个记事本类软件就能实现。

例如bootstrap.min.css利用连接 http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css；

jquery利用连接 http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js

bootstrap.min.js利用连接 http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js

BootStrap网格系统的工作原理

行必须放置在 .container class 内，以便获得适当的对齐和内边距。

代码的第一个 <div> 的类设置为 container 的目的就是为此，并且代码中的 div.row 也必须放在 div.container 中就是为了获得对齐和内边距。
使用行来创建列的水平组，内容应该放在列内，且唯有列可以是行的直接子元素
预定义的网格类（比较简单）是通过.row和.col-xs-4之类的代码来快速实现的。col-xs-4 表示创建一个横跨四格的列（一共是12列）

这里xs的含义是超小型设备；如果换成.col-sm-4 则表示在小型平板电脑上的四格宽度的列；md 代表中型设备；lg 表示台式机之类的大型设备

详细请见表格：

超小设备手机（<768px）	小型设备平板电脑（≥768px）	中型设备台式电脑（≥992px）	大型设备台式电脑（≥1200px）
网格行为	一直是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的
最大容器宽度	None (auto)	750px	970px
Class 前缀	.col-xs-	.col-sm-	.col-md-
列数量和	12	12	12
最大列宽	Auto	60px	78px
间隙宽度	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）
可嵌套	Yes	Yes	Yes
偏移量	Yes	Yes	Yes
列排序	Yes	Yes	Yes

网格系统是通过想要横跨的12个可用的列来实现的。各列的总和不用等于12，但是如果想做一个对齐的效果，则要将col横跨的列数达到12个。如果要创建三个相等的列则要使用三个.col-sm-4

BootStrap的响应式

如果要让这个实例同时支持大型设备，小型设备和中型设备则须这样定义列的代码

<div class="col-sm-3 col-md-6 col-lg-4">

    ...

</div>

<div class="col-sm-9 col-md-6 col-lg-8">

    ...

</div>

这样在手机上，它将左边25% 右边75%的布局，在平板电脑上是50%/50%的布局。在大型视口的设备上，它将是33%/66%的布局。

偏移列

如果我们就想错落有致按照自己喜欢的方法摆放列的，就要用到偏移列的。使用 .col-md-offset-* 类。这些类就会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11,大家可以尝试下面的代码

<!DOCTYPE html>

<html>

   <head>

      <title>Bootstrap 模板</title>

     <meta charset="utf-8">

      <!-- 引入 Bootstrap -->

      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

   </head>

   <body>

      <div class="container">

         <div class="row">

            <div class="col-md-6 col-md-offset-3" style="height: 100px;background-color: #00FFFF">

            </div>

            <div class="col-md-2 col-md-offset-3" style="height: 100px;background-color: #33FF99">

            </div>

            <div class="col-md-6 col-md-offset-3" style="height: 100px;background-color: #66FF66">

            </div>

            <div class="col-md-2 col-md-offset-3" style="height: 100px;background-color: #99FF33">

            </div>

            <div class="col-md-6 col-md-offset-3" style="height: 100px;background-color: #FFFF00">

            </div>

      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->

      <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

      <!-- 包括所有已编译的插件 -->

      <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

   </body>

</html>

嵌套列

在内容中可以嵌套默认的网格，也很简单，就是在一个div.col-md-*添加一个新的div.row，并在row中添加新的col就OK了。同样的，小盒子的列数也不能超过12

<!DOCTYPE html>

<html>

   <head>

      <title>Bootstrap 模板</title>

     <meta charset="utf-8">

      <!-- 引入 Bootstrap -->

      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

   </head>

   <body>

      <div class="container">

         <div class="row">

            <div class="col-md-6" style="height: 100px;background-color: #330033">

            </div>

            <div class="col-md-6" style="height: 100px;background-color: #3399FF">

            </div>

         </div>

         <div class="row">

            <div class="col-md-6" style="height: 100px;background-color: #99FF33">

            </div>

            <div class="col-md-6" style="height: 100px;background-color: #99FFCC">

               <div class="row">

                  <div class="col-md-6" style="height: 50px;background-color: #330033">

                  </div>

                  <div class="col-md-6" style="height: 50px;background-color: #99FF33">

                  </div>

               </div>

               <div class="row">

                  <div class="col-md-6" style="height: 50px;background-color: #99FFCC">

                  </div>

                  <div class="col-md-6" style="height: 50px;background-color: #3399FF">

                  </div>

               </div>

            </div>

         </div>

      </div>

      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->

      <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

      <!-- 包括所有已编译的插件 -->

      <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

   </body>

</html>

列排序

列排序可以允许我们以一种顺序编写列，以另一种顺序显示列。这就可以让我们用脚本来让列进行动态的移动。

.col-md-push-*和.col-md-pull-*来改变内置网格的顺序。其中*的范围是从1-11；

<!DOCTYPE html>

<html>

   <head>

      <title>Bootstrap 模板</title>

      <meta charset="utf-8">

      <!-- 引入 Bootstrap -->

      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

   </head>

   <body>

      <div class="container">

         <div class="row">

            <div id="left" class="col-md-6" style="height: 100px;background-color: #FF3333;color:white;">

               我是第一个

            </div>

            <div id="right" class="col-md-6" style="height: 100px;background-color: #3333CC;color:white">

               我是第二个

            </div>

         </div>

      </div>

      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->

      <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

      <!-- 包括所有已编译的插件 -->

      <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

      <script type="text/javascript">

         $(document).ready(function(){

            $("#left").click(function(){

               $(this).addClass("col-md-push-6");

               $("#right").addClass("col-md-pull-6");

            })

         })

      </script>>

   </body>

</html>

Bootstrap学习笔记系列1-------Bootstrap网格系统的更多相关文章

bootstrap学习笔记系列4------bootstrap按钮
按钮标签在<a>,<button>或input元素上使用按钮class.但是为了避免跨浏览器的不一致性,建议使用<button>标签. <!DOCTYPE ...
Bootstrap学习笔记系列3-------Bootstrap简单表单显示
表单布局垂直或基本表单基本的表单结构时BootStrap自带的,创建基本表单的步骤如下: 向父<form>元素添加role = "form": 为了获取最佳的间距, ...
bootstrap学习笔记<八>（bootstrap核心布局风格——栅格系统）
栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...
bootstrap学习笔记<一>（bootstrap用法）
首先引入bootstrap官网链接:http://www.bootcss.com/ bootstrap 3下载地址:http://v3.bootcss.com/getting-started/#dow ...
Bootstrap学习笔记系列5------Bootstrap图片显示
通过添加一下的class来实现bootstrap对图片的支持 img-round 通过border-radius:6px 来获得图片圆角 img-circle 通过border-radius:50%来 ...
Bootstrap学习笔记系列7-----Bootstrap简单背景CSS及其他辅助类
背景通过添加下列类,可以快捷的变换背景颜色,如果是链接的话,鼠标移动上去会变暗 bg-primary 被修饰元素将会应到primary类,显示吃淡蓝色,文本颜色会变成白色. bg-success 被 ...
Bootstrap学习笔记系列6-----Bootstrap文本显示
通过对文本或者链接添加下面的类,会使其展示不同的颜色,如果文本是个链接,鼠标移动到文本上,颜色会变暗. text-muted柔和的文本(深色) text-primary 表示基础的文本(蓝色) tex ...
Bootstrap学习笔记系列2-------Bootstrap简单表格处理
标签 <table> 为表格添加基础样式 <thead> 表格标题行的容器元素,用来识别列 <tbody> 表格主提中的表格行的容器元素 <tr> 单行 ...
Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

随机推荐

IOS 多线程04-GCD详解底层并发 API
注:本人是翻译过来,并且加上本人的一点见解. 前言想要揭示出表面之下深层次的一些可利用的方面.这些底层的 API 提供了大量的灵活性,随之而来的是大量的复杂度和更多的责任.在我们的文章常见的后台实践 ...
MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法
返回目录说在前有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都 ...
js 图片轮播（一）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
Liferay7 BPM门户开发之37: Liferay7下的OSGi Hook集成开发
hook开发是Liferay客制扩展的一种方式,比插件灵活,即可以扩展liferay门户,也能对原有特性进行更改,Liferay有许多内置的服务,比如用hook甚至可以覆盖Liferay服务. 可作为 ...
Spring注意事项(各部分理解)
(1),每一个bean属性,就是一个普通的java类. 类有属性,有方法,如何交给容器管理.(注解的方式,xml方式配置) (2),通过Bean来实例化对象的方式 1.通过构造器(一般是无参的默认构造 ...
JS原生第二篇（帅哥）
1.1 Javascript 作用 1. 网页特效 2. 用户交互 3. 表单验证 Js 就是可以用来控制结构和样式 . 1.2 体验js 认识常用的三个输出语句. 都属于 ...
让BI告诉你：圣诞老人去哪了？
刚看到一篇关于圣诞节BI分析的文章,觉得很有意思,特来翻译了下和大家一起分享(可惜的是文章发布的时间有点久). 伴随着圣诞节即将到来的日子,POWER BI团队来回答大家最为关注的一个问题:圣诞老人到 ...
Microsoft Naive Bayes 算法——三国人物身份划分
Microsoft朴素贝叶斯是SSAS中最简单的算法,通常用作理解数据基本分组的起点.这类处理的一般特征就是分类.这个算法之所以称为“朴素”,是因为所有属性的重要性是一样的,没有谁比谁更高.贝叶斯之名 ...
如何对SharePoint网站进行预热(warmup)以提高响应速度
问题描述 SharePoint Server是一个易于使用的协作平台,目前在越来越多的企业中被应用开来.SharePoint Server是通过网站的形式向最终用户提供服务的,而这个网站是基于ASP. ...
Hadoop阅读笔记（二）——利用MapReduce求平均数和去重
前言:圣诞节来了,我怎么能虚度光阴呢?!依稀记得,那一年,大家互赠贺卡,短短几行字,字字融化在心里:那一年,大家在水果市场,寻找那些最能代表自己心意的苹果香蕉梨,摸着冰冷的水果外皮,内心早已滚烫.这一 ...

Bootstrap学习笔记系列1-------Bootstrap网格系统

Bootstrap网格系统 学习笔记