页面必须设置为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 &gt; 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]全局样式（一）的更多相关文章

  1. bootstrap 全局样式设置

    HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...

  2. bootstrap全局样式二

    加form-grope是为了以后更好的管理,一组form写一个form-grope 显示如下: 并排显示的话,给用户名前面再加一个div,再加horizontal,如下,并且加上control-lab ...

  3. bootstrap全局样式

    内联子标题: 显示如下: 主体副本: 显示如下: 对齐类: 显示如下: 强调类: 显示如下: 缩略语: 地址: 表格: 加一个class:“table-striped” js里面的奇数偶数行(odd) ...

  4. [Bootstrap]全局样式（五）

    辅助样式 1.情景文本色  .text-muted  .text-primary  .text-success  .text-info  .text-warning  .text-danger  {c ...

  5. [Bootstrap]全局样式（四）

    按钮 1.基本类.btn {display/padding/margin-bottom/font-size/border-radius/border} 作用于< a:role:button &g ...

  6. [Bootstrap]全局样式（三）

    表格 1.基本类  .table  {width/margin-bottom/}  {padding/border-top} e.g.:<table class="table" ...

  7. [Bootstrap]全局样式（二）

    具体排版 1.标题和标题类 <h1> ~<h6>和.h1~h6|副标题<small>和.small font-size                    mar ...

  8. bootstrap 全局样式

    reset.css html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% ...

  9. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

随机推荐

  1. JSP/ Servlet常见的中文乱码原因

    在开发中,我们经常遇到中文乱码的问题,比方: &浏览器中看到的 Jsp/Servlet 页面中的汉字成了 '?' ?  &浏览器中看到的 Servlet 页面中的汉字都成了乱码  &a ...

  2. 【M21】利用重载技术避免隐式类型转换

    1.考虑UPint 的加法+,UPint a, b, result; 为了使result = a+10; result= 10+a; 都能通过编译,操作符重载如下: const UPint opera ...

  3. CDOJ 1251 谕神的密码 贪心

    谕神的密码 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/1251 Descr ...

  4. HDU 5514 Frogs 容斥定理

    Frogs Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5514 De ...

  5. 飘逸的python - 编码杂症之在字符串前面加u

      有时候我们从其它地方接受的字符串经过艰难跋涉,它变了个样.比如收到的是'\u6253\u602a\u8005'而不是u'\u6253\u602a\u8005'. 明明肉眼看起来只需要加个u,但是怎 ...

  6. 奇妙华为3c手机, 出现安装未成功问题。

    1.我会命令adb uninstall 先卸载我们有签名的安装包. 2.用开发模式在手机上执行我们的应用. 3.然后測试就把手机拿走了,就用应用管理器把我们的应用卸载了. 4.继续装我们的开发包,死活 ...

  7. GitHub使用详解

    1.GitHub是什么? GitHub这个名词既可以是那个流行的代码分享和协作网站 https://github.com/,也可以是指Git客户端工具(与其他的Git客户端工具如GitEye类似,只不 ...

  8. ios开发——实用技术篇&Pist转模型详细介绍

    Pist转模型详细介绍 关于Plist转模型在iOS开发中是非常常见的,每开一一个项目或者实现一个功能都要用到它,所以今天就给大家讲讲Plist怎么转成模型数据, 前提:必须有一个Plist文件或者通 ...

  9. 使用Java编写并运行Spark应用程序

    我们首先提出这样一个简单的需求: 现在要分析某网站的访问日志信息,统计来自不同IP的用户访问的次数,从而通过Geo信息来获得来访用户所在国家地区分布状况.这里我拿我网站的日志记录行示例,如下所示: 1 ...

  10. __asm__ __volatile__("": : :"memory");

    参考:http://stackoverflow.com/questions/14950614/working-of-asm-volatile-memory asmvolatile("&quo ...