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>
个人学习，仅作记录！未完待续。。。。。。