标签：
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 栅格系统的工作原理：
.container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。.row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。.col-xs-4..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>
个人学习，仅作记录！未完待续。。。。。。
标签：
原文地址：http://www.cnblogs.com/hzwl-2015/p/4253700.html
