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 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
随机推荐
- [ZigBee] 12、ZigBee之看门狗定时器——饿了就咬人的GOOD DOG
引言:硬件中的看门狗,不是门卫的意思,而是一只很凶的狗!如果你不按时喂它,它就会让系统重启!这反而是我们想要的功能~ 1.看门狗概述 看门狗定时器(WDT,Watch Dog Timer)是单片机的一 ...
- 两个Fragment之间如何传递数据
FragmentA启动FragmentB,做一些选择操作后,返回FragmentA,需要把FragmentB里面选择的数据传回来.有什么办法? Fragment之间不能直接通信,必须通过Activit ...
- 《OOC》笔记(2)——C语言实现trycatchfinally
本篇就偷个懒吧,实在打不起精神. #ifndef _TRY_THROW_CATCH_H_ #define _TRY_THROW_CATCH_H_ #include <stdio.h> #i ...
- linnux 3
kill [信号代码] 进程ID 以优雅的方式结束进程# kill -l PID-l选项告诉kill命令用好像启动进程的用户已注销的方式结束进程.当使用该选项时,kill命令也试图杀死所留下的子进程. ...
- lua table序列化和反序列化
function serialize(obj) local lua = "" local t = type(obj) if t == "number" then ...
- SpringSide 部署showcase项目出现 JAX-RS (REST Web Services) 2.0 can not be installed错误!
maven+springmvc错误 JAX-RS (REST Web Services) 2.0 can not be installed 项目problem提示错误 JAX-RS (REST Web ...
- React(二)实现双向数据流
<div id="app"></div> <script src="bower_components/react/react.min.js& ...
- (2)艺术创新思维的PS成果
一些艺术创新思维课的PS成果. (1)选择一首喜欢的歌并用图表示出来: (2)用形式美法则设计一张图来表示"痴心妄想"这四个词语,可以采用字体的变形,也可以采用词语的意境. ...
- Java 线程 — ScheduledThreadPoolExecutor
ScheduledThreadPoolExecutor 该类继承自ThreadPoolExecutor,增加了定时执行线程和延迟启动的功能,这两个功能是通过延时队列DelayedWorkQueue辅助 ...
- 抛弃强大的TFS ,借助于BugTracker.NET + Visual Source Safe + SourceLink搭建项目开发环境
微软公司的Team Foundation Server是个强大的项目管理工具,如果用.NET开发,它应该是首选的项目管理平台.TFS的成本比较高,而且和Visual Studio集成紧密.比如TSF有 ...