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网格系统的工作原理

  • 行必须放置在 .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网格系统的更多相关文章

  1. bootstrap学习笔记系列4------bootstrap按钮

    按钮标签 在<a>,<button>或input元素上使用按钮class.但是为了避免跨浏览器的不一致性,建议使用<button>标签. <!DOCTYPE ...

  2. Bootstrap学习笔记系列3-------Bootstrap简单表单显示

    表单布局 垂直或基本表单 基本的表单结构时BootStrap自带的,创建基本表单的步骤如下: 向父<form>元素添加role = "form": 为了获取最佳的间距, ...

  3. bootstrap学习笔记<八>(bootstrap核心布局风格——栅格系统)

    栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...

  4. bootstrap学习笔记<一>(bootstrap用法)

    首先引入bootstrap官网链接:http://www.bootcss.com/ bootstrap 3下载地址:http://v3.bootcss.com/getting-started/#dow ...

  5. Bootstrap学习笔记系列5------Bootstrap图片显示

    通过添加一下的class来实现bootstrap对图片的支持 img-round 通过border-radius:6px 来获得图片圆角 img-circle 通过border-radius:50%来 ...

  6. Bootstrap学习笔记系列7-----Bootstrap简单背景CSS及其他辅助类

    背景 通过添加下列类,可以快捷的变换背景颜色,如果是链接的话,鼠标移动上去会变暗 bg-primary 被修饰元素将会应到primary类,显示吃淡蓝色,文本颜色会变成白色. bg-success 被 ...

  7. Bootstrap学习笔记系列6-----Bootstrap文本显示

    通过对文本或者链接添加下面的类,会使其展示不同的颜色,如果文本是个链接,鼠标移动到文本上,颜色会变暗. text-muted柔和的文本(深色) text-primary 表示基础的文本(蓝色) tex ...

  8. Bootstrap学习笔记系列2-------Bootstrap简单表格处理

    标签 <table> 为表格添加基础样式 <thead> 表格标题行的容器元素,用来识别列 <tbody> 表格主提中的表格行的容器元素 <tr> 单行 ...

  9. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

随机推荐

  1. [安卓] 18、一个简单的例子做自定义动画按钮和自定义Actionbar

    在做安卓UI的时候有时候需自定义具有动画效果的按钮或需要自定义一下actionbar~ 本节用一个简单的demo讲如何自定义具有动画效果的按钮,以及个性化的actionbar 下面是效果: 其中: △ ...

  2. SVN修改已提交版本的注释

    SVN提交文件后,发现注释写的不完整或不够明确,想再修改注释文字.通过View Project History dialog修改完成后,在提交时遇到如下错误:Repository has not be ...

  3. Visual Studio 2010 实用功能:使用web.config发布文件替换功能

    当建立ASP.NET Web应用程序项目后,默认除了生成web.config外,还生成了web.debug.config与Web.Release.config.顾名思义,根据它们的命名我可以推测到他们 ...

  4. 大叔也说Xamarin~Android篇~监听返回键,单击返回某个webView,双击退出

    回到目录 这个操作在原生android里是很容易实现的,在xamarin里也不难,在activity里有方法OnKeyDown,我们只需要重写一下就可以了,然后通过webView重新加载到要返回的页面 ...

  5. paip. 提升性能---hibernate的缓存使用 总结

    paip. 提升性能---hibernate的缓存使用 总结 作者Attilax  艾龙,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog ...

  6. 深度解析SDN——利益、战略、技术、实践(实战派专家力作,业内众多专家推荐)

    深度解析SDN——利益.战略.技术.实践(实战派专家力作,业内众多专家推荐) 张卫峰 编   ISBN 978-7-121-21821-7 2013年11月出版 定价:59.00元 232页 16开 ...

  7. C#设计模式-工厂模式

    引入人.工厂.和斧子的问题 原始社会时,劳动社会基本没有分工,需要斧子的人(调用者)只好自己去磨一把斧子,每个人拥有自己的斧子,如果把大家的石斧改为铁斧,需要每个人都要学会磨铁斧的本领,工作效率极低. ...

  8. 过滤器中的chain.doFilter(request,response)

    Servlet中的过滤器Filter是实现了javax.servlet.Filter接口的服务器端程序,主要的用途是过滤字符编码.做一些业务逻辑判断等.其工作原理是,只要你在web.xml文件配置好要 ...

  9. 快速入门系列--Log4net日志组件

    Log4net是阿帕奇基金会的非常流行的开源日志组件,是log4j的.NET移植版本,至今已经有11年的历史,使用方便并且非常稳定,此外很重要的一点是其和很多开源组件能很好的组合在一起工作,例如NHi ...

  10. Enterprise Solution 2.3

    1. 登陆窗体和主界面增加语言选项,同时可记住用户登陆的语言和数据库. 2. 主界面的树功能可记住上次打开的模块菜单. 3. 修复主界面菜单生成问题和导航图区上下文菜单生成问题. 4. 增加自动更新功 ...