Bootstrap学习笔记系列1-------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 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
随机推荐
- [安卓] 18、一个简单的例子做自定义动画按钮和自定义Actionbar
在做安卓UI的时候有时候需自定义具有动画效果的按钮或需要自定义一下actionbar~ 本节用一个简单的demo讲如何自定义具有动画效果的按钮,以及个性化的actionbar 下面是效果: 其中: △ ...
- SVN修改已提交版本的注释
SVN提交文件后,发现注释写的不完整或不够明确,想再修改注释文字.通过View Project History dialog修改完成后,在提交时遇到如下错误:Repository has not be ...
- Visual Studio 2010 实用功能:使用web.config发布文件替换功能
当建立ASP.NET Web应用程序项目后,默认除了生成web.config外,还生成了web.debug.config与Web.Release.config.顾名思义,根据它们的命名我可以推测到他们 ...
- 大叔也说Xamarin~Android篇~监听返回键,单击返回某个webView,双击退出
回到目录 这个操作在原生android里是很容易实现的,在xamarin里也不难,在activity里有方法OnKeyDown,我们只需要重写一下就可以了,然后通过webView重新加载到要返回的页面 ...
- paip. 提升性能---hibernate的缓存使用 总结
paip. 提升性能---hibernate的缓存使用 总结 作者Attilax 艾龙, EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog ...
- 深度解析SDN——利益、战略、技术、实践(实战派专家力作,业内众多专家推荐)
深度解析SDN——利益.战略.技术.实践(实战派专家力作,业内众多专家推荐) 张卫峰 编 ISBN 978-7-121-21821-7 2013年11月出版 定价:59.00元 232页 16开 ...
- C#设计模式-工厂模式
引入人.工厂.和斧子的问题 原始社会时,劳动社会基本没有分工,需要斧子的人(调用者)只好自己去磨一把斧子,每个人拥有自己的斧子,如果把大家的石斧改为铁斧,需要每个人都要学会磨铁斧的本领,工作效率极低. ...
- 过滤器中的chain.doFilter(request,response)
Servlet中的过滤器Filter是实现了javax.servlet.Filter接口的服务器端程序,主要的用途是过滤字符编码.做一些业务逻辑判断等.其工作原理是,只要你在web.xml文件配置好要 ...
- 快速入门系列--Log4net日志组件
Log4net是阿帕奇基金会的非常流行的开源日志组件,是log4j的.NET移植版本,至今已经有11年的历史,使用方便并且非常稳定,此外很重要的一点是其和很多开源组件能很好的组合在一起工作,例如NHi ...
- Enterprise Solution 2.3
1. 登陆窗体和主界面增加语言选项,同时可记住用户登陆的语言和数据库. 2. 主界面的树功能可记住上次打开的模块菜单. 3. 修复主界面菜单生成问题和导航图区上下文菜单生成问题. 4. 增加自动更新功 ...