首页 > 代码库 > Bootstrap 初步(一)

Bootstrap 初步(一)

1 概览

     /*@version Bootstrap3*/

     1.1  HTML5文档类型

Bootstrap 使用到的HTML/CSS元素和属性需要将页面设置为HMTL5文档类型,格式如下:

1 <!DOCTYPE html>2 <html lang="zh-CN">3   ...4 </html>

     1.2 移动设备优先

从V3.0开始,Bootstrap 是移动设备优先的.

为了确保适当的绘制和触屏缩放,需要在<head>之中添加viewport元数据标签

            

<meta name="viewport" content="width=device-width, initial-scale=1">
View Code

 

            禁止缩放功能,让用户只能滚动屏幕,需要设置meta属性为user-scalable=no

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
View Code         

     1.3 布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器

    1. .container 类用于固定宽度并支持响应式布局(一个网站能够兼容多种终端)的容器
    2. .container-fluid类用于100%宽度,占据全部视口(viewport)的容器      

     1.4 栅格系统

1.4.1 简介

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局.

1.4.2 布局

   栅格系统通过行(row)和列(column)的组合来创建布局,原理如下:

(1)行(row)必须包含在容器.container(固定宽度)或.container-fluid(100%宽度)中.

(2)内容应当放置于"列(column)"内,并且只有"列(column)"可以作为行(row)"的直接子元素.

(3)如果一"行(row)"中包含了的"列(column)"大于 12,多余的"列(column)"所在的元素将被作为一个整体另起一行排列. 

1.4.3 媒体查询

在栅格系统中,在Less文件中使用以下进行媒体查询.

/* 超小屏幕(手机,小于 768px) *//* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) *//* 小屏幕(平板,大于等于 768px) */@media (min-width: @screen-sm-min) { ... }/* 中等屏幕(桌面显示器,大于等于 992px) */@media (min-width: @screen-md-min) { ... }/* 大屏幕(大桌面显示器,大于等于 1200px) */@media (min-width: @screen-lg-min) { ... }

 

 

1.4.4 栅格参数

超小(<768) .container最大宽度是自动的    .col-xs-

小屏(>768) .container是750px            .col-sm-

中屏(>992) .container是970px            .col-md-

大屏(>1200).container是1170px           .col-lg-

 

 1 <!-----  一行12列  都占1列 --------------------> 2 <div class="row"> 3   <div class="col-md-1">.col-md-1</div> 4   <div class="col-md-1">.col-md-1</div> 5   <div class="col-md-1">.col-md-1</div> 6   <div class="col-md-1">.col-md-1</div> 7   <div class="col-md-1">.col-md-1</div> 8   <div class="col-md-1">.col-md-1</div> 9   <div class="col-md-1">.col-md-1</div>10   <div class="col-md-1">.col-md-1</div>11   <div class="col-md-1">.col-md-1</div>12   <div class="col-md-1">.col-md-1</div>13   <div class="col-md-1">.col-md-1</div>14   <div class="col-md-1">.col-md-1</div>15 </div>16 <!------------ 一行两列 一个占8列 一个占4列--------->17 <div class="row">18   <div class="col-md-8">.col-md-8</div>19   <div class="col-md-4">.col-md-4</div>20 </div>21 <!-------------一行三列  都占4列------------->22 <div class="row">23   <div class="col-md-4">.col-md-4</div>24   <div class="col-md-4">.col-md-4</div>25   <div class="col-md-4">.col-md-4</div>26 </div>27 <!----------- 一行两列 都占6列---------------->28 <div class="row">29   <div class="col-md-6">.col-md-6</div>30   <div class="col-md-6">.col-md-6</div>31 </div>

 

1.4.5 Responsive column resets

当每列的高度不一致时,就应该消除浮动,官网上的例子如下:

 

 1 <div class="row"> 2   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 3   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 4  5   <!-- Add the extra clearfix for only the required viewport --> 6   <div class="clearfix visible-xs-block"></div> 7  8   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 9   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>10 </div>

 

我在自己电脑上测试结果是全部都在一行,如官网上显示的那样.具体的小屏结果和解释可参考链接:http://www.25kx.com/art/2653508

1.4.6 列偏移

.col-md-offset-*将列向右偏移*个列

eg. .col-md-offset-4 是将.col-md-4 向右偏移4个列,其他的可类比.

1.4.7 嵌套列

通过添加一个新的.row元素和一系列.col-sm-* 元素到已经存在的.col-sm-*(或者.col-md-*) 元素内。被嵌套的(row)所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列)

1.4.8 列排序

.col-md-push-* 往左移*列

.col-md-pull-* 往右移*列

 

     1.5 排版

1.5.1 标题

<h1>到<h6>均可使用还是使用 h1~h6类. 标题内可以包含<small>或者使用small类

<div class="h#">Bootstrap heading</div>
View Code

1.5.2 页面主题

Bootstrap全局设置font-size为14px,line-height为1.428

1.5.3 中心内容

lead类 class="lead"可以让段落突出显示

mark <mark></mark> 内联文本元素

del  <del></del> 被删除的元素

s  <s></s> 无用文本

ins <ins></ins>插入文本

u <u></u> 待下划线文本

strong <strong></strong> 着重

em <em> </em> 斜体

1.5.4 

对齐   text-left/center/right/justify/nowrap

改变大小写  text-lowercase/uppercase/capitalize(首字母大写)

缩略语

<abbr>  需要为改元素设置title属性 <abbr title="chenjingran">cjr</abbr>

首字母缩略语 为abbr添加initialism类 <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

地址 <address> 在每行结尾处添加<br>

引用 <blockquote> </blockquote>

选项:可以使用blockquote-reverse使引用向右对齐

       为引用添加说明用<footer>并用cite说明来源

1 <blockquote>2   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>3   <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>4 </blockquote>

列表

无序列表 ul>li

有序列表 ol>li

无样式列表 <ul class="list-unstyled"><li>...</li></ul>

内联列表 将所有元素放在同一行  <ul class="list-inline"><li>...</li></ul>

描述  <dl> <dt>...</dt><dd>...</dd></dl>

设置class="dl-horizontal"让<dl>内的短语及其描述排在一行

 

Bootstrap 初步(一)