BootStrap 学习笔记一

作者: 红竹无泪
发布时间:2015-07-02 17:23:10

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 >    ...  </div>    //.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。  <div >    ...  </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 >    <div >.col-md-1</div>    <div >.col-md-1</div>    <div >.col-md-1</div>    <div >.col-md-1</div>    <div >.col-md-1</div>    <div >.col-md-1</div>    <div >.col-md-1</div>    <div >.col-md-1</div>    <div >.col-md-1</div>    <div >.col-md-1</div>    <div >.col-md-1</div>    <div >.col-md-1</div>  </div>  <div >    <div >.col-md-8</div>    <div >.col-md-4</div>  </div>  <div >    <div >.col-md-4</div>    <div >.col-md-4</div>    <div >.col-md-4</div>  </div>  <div >    <div >.col-md-6</div>    <div >.col-md-6</div>  </div>

5.栅格中常用到几种class

1).clearfix visible-xs-block //清除div的浮动样式 2).col-*-offset-* //向右移动(增加间距) 如<div >.col-md-4 .col-md-offset-4</div> 3).col-*-push-* //向后推动 可以实现与offset相同的效果 4).col-*-pull-* //向前拉 push和pull结合使用可以实现列排序 //例子 <div > <div >.col-md-9 .col-md-push-3</div> <div >.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" >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 >    ...  </blockquote>

 

个人学习,仅作记录!未完待续。。。。。。

标签: Bootstrap
来源:http://www.cnblogs.com/hzwl-2015/p/4253700.html

推荐: