第六节:BootStrap

BootStrap

BootStrap 由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个简洁、直观、强悍的CSS/HTML前端开发框架,让web开发更迅速、简单。

使用BootStrap 可以将它预先下载到电脑上并放入静态文件中,也可以通过直接在HTML文件里导入cdn链接进行使用,cdn链接可以直接使用各种搜素哦引擎轻松获得。

一、Bootstrap布局

1、概览

1.移动设备优先

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

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

在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。注意,这种方式我们并不推荐所有网站使用,还是要看你自己的情况而定!

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

2.Normalize.css

BootStrap内置了Normalize.css

3.布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
...
</div>

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

<div class="container-fluid">
...
</div>

2、栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列

1. 栅格系统简介

栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 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。

· 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

· 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。

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

*超小屏幕 手机 (<768px)* *小屏幕 平板 (≥768px)* *中等屏幕 桌面显示器 (≥992px)* *大屏幕 大桌面显示器 (≥1200px)*
.container 最大宽度 None (自动) 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
最大列(column)宽 自动 ~62px ~81px ~97px

· 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-md-栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-lg-不存在, 也影响大屏幕设备。

2.栅格参数

3. 栅格系统使用

使用单一的一组 .col-md-* 栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列。所有“列(column)必须放在 ” .row 内。

<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>

4.不同屏幕设置不同宽度

 
.col-xs-12 .col-sm-6 .col-md-8
 
.col-xs-6 .col-md-4
 
.col-xs-6 .col-sm-4
 
.col-xs-6 .col-sm-4
   
 
.col-xs-6 .col-sm-4

5.列偏移

使用 .col-md-offset- 类可以将列向右侧偏移。这些类实际是通过使用 选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。

<div class="row">
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
 <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
 <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
 <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

6.列位置移动

通过使用 .col-md-push- 和 .col-md-pull- 类就可以很容易的改变列(column)的顺序。

<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>

3、排版

1.标题

HTML 中的所有标题标签,

均可使用。另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式。

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

在标题内还可以包含 标签或赋予 .small 类的元素,可以用来标记副标题。

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

2.突出显示

通过添加 .lead 类可以让段落突出显示。

<p class="lead">...</p>

3.对齐

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

4.改变大小写

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

5.引用

<blockquote>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
<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>

6.列表

无样式列表

<ul class="list-unstyled">
 <li>...</li>
</ul>

内联列表

<ul class="list-inline">
 <li>...</li>
</ul>

水平排列的内联列表

<dl class="dl-horizontal">
 <dt>...</dt>
 <dd>...</dd>
</dl>

4、代码

1.内联代码

通过 标签包裹内联样式的代码片段。

For example, <code><section></code> should be wrapped as inline.

2.用户输入

通过 标签标记用户通过键盘输入的内容。

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

3.代码块

多行代码可以使用

 标签。为了正确的展示代码,注意将尖括号做转义处理。

<pre><p>Sample text here...</p></pre>

还可以使用 .pre-scrollable 类,其作用是设置 max-height 为 350px ,并在垂直方向展示滚动条。

4.变量

通过 标签标记变量。

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

5.程序输出

通过 标签来标记程序输出的内容。

<samp>This text is meant to be treated as sample output from a computer program.</samp>

5、表格

1.基本

为任意

标签添加 .table 类可以为其赋予基本的样式

<table class="table">
...
</table>

2.条纹状表格

<table class="table table-striped">
...
</table>

3.带边框的表格

<table class="table table-bordered">
...
</table>

4.鼠标悬停

<table class="table table-hover">
...
</table>

5.紧缩表格

<table class="table table-condensed">
...
</table>

6.状态类

通过这些状态类可以为行或单元格设置颜色。

*Class* *描述*
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作

7.响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。

6、 表单

1.基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的