Bootstrap 初步(一)
1 概览
/*@version Bootstrap3*/
1.1 HTML5文档类型
Bootstrap 使用到的HTML/CSS元素和属性需要将页面设置为HMTL5文档类型,格式如下:
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 ... 4 </html>
1.2 移动设备优先
从V3.0开始,Bootstrap 是移动设备优先的.
为了确保适当的绘制和触屏缩放,需要在<head>之中添加viewport元数据标签
<meta name="viewport" content="width=device-width, initial-scale=1">
禁止缩放功能,让用户只能滚动屏幕,需要设置meta属性为user-scalable=no
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
1.3 布局容器
Bootstrap需要为页面内容和栅格系统包裹一个.container容器
- .container 类用于固定宽度并支持响应式布局(一个网站能够兼容多种终端)的容器
- .container-fluid类用于100%宽度，占据全部视口(viewport)的容器
1.4 栅格系统
1.4.1 简介
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局.
1.4.2 布局
栅格系统通过行(row)和列(column)的组合来创建布局,原理如下:
(1)行(row)必须包含在容器.container(固定宽度)或.container-fluid(100%宽度)中.
(2)内容应当放置于"列(column)"内,并且只有"列(column)"可以作为行(row)"的直接子元素.
(3)如果一"行(row)"中包含了的"列(column)"大于 12,多余的"列(column)"所在的元素将被作为一个整体另起一行排列.
1.4.3 媒体查询
在栅格系统中,在Less文件中使用以下进行媒体查询.
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
1.4.4 栅格参数
超小(<768) .container最大宽度是自动的 .col-xs-
小屏(>768) .container是750px .col-sm-
中屏(>992) .container是970px .col-md-
大屏(>1200).container是1170px .col-lg-
1 <!----- 一行12列 都占1列 --------------------> 2 <div class="row"> 3 <div class="col-md-1">.col-md-1</div> 4 <div class="col-md-1">.col-md-1</div> 5 <div class="col-md-1">.col-md-1</div> 6 <div class="col-md-1">.col-md-1</div> 7 <div class="col-md-1">.col-md-1</div> 8 <div class="col-md-1">.col-md-1</div> 9 <div class="col-md-1">.col-md-1</div> 10 <div class="col-md-1">.col-md-1</div> 11 <div class="col-md-1">.col-md-1</div> 12 <div class="col-md-1">.col-md-1</div> 13 <div class="col-md-1">.col-md-1</div> 14 <div class="col-md-1">.col-md-1</div> 15 </div> 16 <!------------ 一行两列 一个占8列 一个占4列---------> 17 <div class="row"> 18 <div class="col-md-8">.col-md-8</div> 19 <div class="col-md-4">.col-md-4</div> 20 </div> 21 <!-------------一行三列 都占4列-------------> 22 <div class="row"> 23 <div class="col-md-4">.col-md-4</div> 24 <div class="col-md-4">.col-md-4</div> 25 <div class="col-md-4">.col-md-4</div> 26 </div> 27 <!----------- 一行两列 都占6列----------------> 28 <div class="row"> 29 <div class="col-md-6">.col-md-6</div> 30 <div class="col-md-6">.col-md-6</div> 31 </div>
1.4.5 Responsive column resets
当每列的高度不一致时,就应该消除浮动,官网上的例子如下:
1 <div class="row"> 2 <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 3 <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 4 5 <!-- Add the extra clearfix for only the required viewport --> 6 <div class="clearfix visible-xs-block"></div> 7 8 <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 9 <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 10 </div>
我在自己电脑上测试结果是全部都在一行,如官网上显示的那样.具体的小屏结果和解释可参考链接:http://www.25kx.com/art/2653508
1.4.6 列偏移
.col-md-offset-*将列向右偏移*个列
eg. .col-md-offset-4 是将.col-md-4 向右偏移4个列,其他的可类比.
1.4.7 嵌套列
通过添加一个新的.row元素和一系列.col-sm-* 元素到已经存在的.col-sm-*(或者.col-md-*) 元素内。被嵌套的(row)所包含的列(column)的个数不能超过12(其实，没有要求你必须占满12列)
1.4.8 列排序
.col-md-push-* 往左移*列
.col-md-pull-* 往右移*列
1.5 排版
1.5.1 标题
<h1>到<h6>均可使用还是使用 h1~h6类. 标题内可以包含<small>或者使用small类
<div class="h#">Bootstrap heading</div>
1.5.2 页面主题
Bootstrap全局设置font-size为14px,line-height为1.428
1.5.3 中心内容
lead类 class="lead"可以让段落突出显示
mark <mark></mark> 内联文本元素
del <del></del> 被删除的元素
s <s></s> 无用文本
ins <ins></ins>插入文本
u <u></u> 待下划线文本
strong <strong></strong> 着重
em <em> </em> 斜体
1.5.4
对齐 text-left/center/right/justify/nowrap
改变大小写 text-lowercase/uppercase/capitalize(首字母大写)
缩略语
<abbr> 需要为改元素设置title属性 <abbr title="chenjingran">cjr</abbr>
首字母缩略语 为abbr添加initialism类 <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
地址 <address> 在每行结尾处添加<br>
引用 <blockquote> </blockquote>
选项:可以使用blockquote-reverse使引用向右对齐
为引用添加说明用<footer>并用cite说明来源
1 <blockquote> 2 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> 3 <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> 4 </blockquote>
列表
无序列表 ul>li
有序列表 ol>li
无样式列表 <ul class="list-unstyled"><li>...</li></ul>
内联列表 将所有元素放在同一行 <ul class="list-inline"><li>...</li></ul>
描述 <dl> <dt>...</dt><dd>...</dd></dl>
设置class="dl-horizontal"让<dl>内的短语及其描述排在一行
