[Bootstrap]全局样式（一）
页面必须设置为html5文档类型
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>
适应移动设备
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
排版/链接
scaffolding.less：
body{background-color:#fff／@font-family-base/@font-size-base/@line-height-base}
a(@link-color/@link-hover-color)
Normalize.css
栅格系统
容器：
.container(固定宽度响应式)/.container-fluid(百分比自适应)
不能互相嵌套（有padding的原因）
行：
.row
必须包含在容器.container或.container-fluid中
行内可以且只可以创建列(column)
列：
.col-*-*
内容放在列中
列与列之间的间隔有.col-*-*中的padding属性设置
第一个＊为xs、sm、md和lg，第二个＊为1-12
列数大于12，多余的列另起一行(本质上是浮动引起的换行)
媒体查询
超小屏幕(小于768)
无媒体查询代码——移动优先原则
容器宽度.container为自动
小屏幕(大于768)
@media (min-width:@screen-sm-width:768){}
容器宽度.container为720
中等屏幕(大于992)
@media(min- width:@screen-md-width:992){}
容器宽度.container为970
大屏幕(大于1200)
@media(min-width:@screen-lg-width:1200){}
容器宽度.container为1170
大屏幕媒体查询类覆盖小屏幕设备类
实例
1、根据媒体查询，相应宽度的屏幕展示相应的类(堆叠／水平排列)
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
2、.col数大于12，包含多余列的元素另起一行
<div class="row">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>
3、col-**-offset-*列偏移(通过margin-left设置偏移)
4、col-**-push-*(通过left值改变位置)和col-**-pull-*(通过right值改变位置)改变列排序
[Bootstrap]全局样式（一）的更多相关文章
- bootstrap 全局样式设置
HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...
- bootstrap全局样式二
加form-grope是为了以后更好的管理,一组form写一个form-grope 显示如下: 并排显示的话,给用户名前面再加一个div,再加horizontal,如下,并且加上control-lab ...
- bootstrap全局样式
内联子标题: 显示如下: 主体副本: 显示如下: 对齐类: 显示如下: 强调类: 显示如下: 缩略语: 地址: 表格: 加一个class:“table-striped” js里面的奇数偶数行(odd) ...
- [Bootstrap]全局样式（五）
辅助样式 1.情景文本色 .text-muted .text-primary .text-success .text-info .text-warning .text-danger {c ...
- [Bootstrap]全局样式（四）
按钮 1.基本类.btn {display/padding/margin-bottom/font-size/border-radius/border} 作用于< a:role:button &g ...
- [Bootstrap]全局样式（三）
表格 1.基本类 .table {width/margin-bottom/} {padding/border-top} e.g.:<table class="table" ...
- [Bootstrap]全局样式（二）
具体排版 1.标题和标题类 <h1> ~<h6>和.h1~h6|副标题<small>和.small font-size mar ...
- bootstrap 全局样式
reset.css html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% ...
- bootstrap全局CSS样式学习
参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...
随机推荐
- 【M16】谨记80-20法则
1.开始编写代码时,不要过多考虑效率,而应该首先考虑逻辑的清晰性和代码的可读性. 2.后期通过测试找到效率的瓶颈所在,而不是靠猜测.然后,针对性地去解决.也就是80%的时间去解决这20%的代码.
- 理解 __declspec(dllexport)和__declspec(dllimport)
1.解决的问题: 考虑下面的需求,使用一个方法,一个是提供者,一个是使用者,二者之间的接口是头文件.头文件中声明了方法,在提供者那里方法应该被声明为__declspec(dllexport),在使用者 ...
- NFA与DFA
正则表达式匹配,包含两个东西,一个是表达式,一个文本. NFA(Nondeterministic Finite Automaton),不确定有穷自动机,表达式主导,NFA去吃文本,贪婪算法吃下去,如果 ...
- Nhibernate中 Many-To-One 中lazy="proxy" 延迟不起作用的原因
2010-07-15 12:10 by 彭白洋, 322 阅读, 0 评论, 收藏, 编辑 NHibernate中 Many-To-One 中lazy="proxy" 延迟不起作用 ...
- oc-06-无参方法的调用
// 12-[掌握]无参方法声明实现及调用 #import <Foundation/Foundation.h> //类的声明 @interface Person : NSObject { ...
- MySQL锁系列1
http://www.cnblogs.com/xpchild/p/3782311.html MySQL的锁:MySQL内部有很多种类的锁,按照用途不同,可以分为两类:1. 保护内存结构的锁,实现同 ...
- 网络IPC：套接字之寻址
在学习用套接字做一些有意义的事情之前,需要知道如何确定一个目标通信进程. 进程的标识有两个部分:计算机的网络地址可以帮助标识网络上想与之通信的计算机,而服务可以帮助标识计算机上特定的进程. 1.字节序 ...
- java_文件类
例一:创建文件 package java文件类; import java.io.File; import java.io.IOException; public class aasd { public ...
- 称球问题(zt)
下面说的这个问题可能大家都看到过,它是这么描述的: 现在有n(n>=2)个球,n个球外观一模一样,但是重量有区别,其中有且仅有一个球的重量比其它n-1个球要重,现在有一个天平,天平是完好无损的, ...
- CASS转ARCGIS
本文转载千浪兄弟博客 1.先看看这张图:CASS的扩展属性 ("south" (1000 . "310000")) 对应图斑属性编码“310000”,(&quo ...