BootStrap学习笔记一

来源：互联网发布：淘宝客服打字要多快编辑：程序博客网时间：2024/05/17 07:24

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>

0 0