http://www.cnblogs.com/hzwl-2015/p/4253700.html
BootStrap学习笔记一:
学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists
1.HTML5文档类型
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>
2.为了确保适当的绘制和触屏缩放,需要在 <head>
之中添加 viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
3.两种容器
//.container 类用于固定宽度并支持响应式布局的容器。 <div class="container"> ... </div> //.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。 <div class="container-fluid"> ... </div>
注意:二者不能嵌套
4.栅格系统
Bootstrap 栅格系统的工作原理:
- “行(row)”必须包含在
.container
(固定宽度)或.container-fluid
(100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。 - 通过“行(row)”在水平方向创建一组“列(column)”。
- 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
- 类似
.row
和.col-xs-4
这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 - 通过为“列(column)”设置
padding
属性,从而创建列与列之间的间隔(gutter)。通过为.row
元素设置负值margin
从而抵消掉为.container
元素设置的padding
,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding
。 - The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
- Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three
.col-xs-4
. - 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
- Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any
.col-md-
class to an element will not only affect its styling on medium devices but also on large devices if a.col-lg-
class is not present.
//类前缀 .col-xs- //超小屏幕 手机 (<768px) .col-sm- //小屏幕 平板 (≥768px) .col-md- //中等屏幕 桌面显示器 (≥992px) .col-lg- //大屏幕 大桌面显示器 (≥1200px) //后可跟0,1,2、、12 如col-xs-4 //上例子 <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>
5.栅格中常用到几种class
1).clearfix visible-xs-block //清除div的浮动样式 2).col-*-offset-* //向右移动(增加间距) 如<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> 3).col-*-push-* //向后推动 可以实现与offset相同的效果 4).col-*-pull-* //向前拉 push和pull结合使用可以实现列排序 //例子 <div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>
6.常见的几种内联样式
。<mark></mark> //标记 。<small></small>//字体大小为父容器字体大小的85% 。<del></del> //删除的文档 。<s></s> //无用的文档,效果与del标签一样 。<ins></ins>//插入的文档 。<u></u>//下划线 效果与ins标签一样 。<strong></strong>//着重 。<em></em>// 斜体
7.常用的文本样式
//对齐 。.text-left //左对齐 。.text-center //中间对齐 。.text-right //右对齐 。.text-justify //会根据父容器的大小自动换行 。.text-nowrap//不会自动换行 //改变大小写 。.text-lowercase//转成小写 。.text-uppercase//转成大写 。.text-capitalize//保持原状 //缩略语 <abbr title="attribute">attr</abbr>//样式:鼠标移上去会有?且attr上有颜色较淡的虚线下划线 <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>//首字母缩略语 //说明:html中的其他标签如p标签等都可以设置title属性,但样式效果不及BootStrap丰富 <p title="p title">attr</p> //引用 <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> //右对齐的引用 <blockquote class="blockquote-reverse"> ... </blockquote>