BootStrap

1. bootstrap概述

1.1 什么是bootstrap？bootstrap的作用？

Bootstrap，基于HTML、CSS、JAVASCRIPT的前端框架。
该框架已经预定了一套CSS样式和与样式对应的JS代码。（对应的样式由对应的特效）

开发人员只需要编写HTML结构，添加bootstrap固定的class样式，就可以轻松完成指定效果的实现。

作用：
① BootStrap使得Web开发更加快捷
② BootStrap支持响应式开发，解决了移动互联网前端开发问题

1.2 什么是响应式布局？响应式布局解决的问题？

• 响应式布局：一个网站的展示能够兼容多个中断（手机、ipad、PC等），而不需要为每个终端单独做一个展示版本。
• 此概念专为解决移动互联网浏览而诞生的。
  响应式布局，使得网站仅使用一套样式，就可以在不同分辨率下展示出不同的舒适效果，大大降低了网站开发维护成本，并且能够带给用户更好的体验性

2.bootstrap环境搭建

2.1 下载资源

2.2 目录结构

2.3 bootstrap的通用简介模板

viewport：视口，即浏览器上网页的可视区域

视口作用：用于移动设备将大型页面进行比例缩放显示

视口的常见设置（了解）：

width	视口的宽度，大多数手机浏览器的宽度是980。 device-width表示采用设备的宽度。 例如：手机是5.5寸，那么视口也采用5.5寸宽度
initial-scale=1	移动设备上，打开页面时的初始化缩放级别。 取值：1-5 1表示100%，5表示500%
minimum-scale=1	移动设备上，页面可以最小缩放的级别。
maximum-scale=1	移动设备上，页面可以最大缩放的级别。
user-scalable=no	移动设备上，页面禁止缩放。 如果设置"user-scalable=no"，则"minimum-scale"和"maximum-scale"无效

3.布局容器

BootStrap必须需要至少一个布局容器，才能为页面内容进行封装和方便的样式控制。
相当于一个画板。

帮助手册位置：全局CSS样式 -> 概览 -> 布局容器

任意元素使用了布局容器，都会成为一个布局容器，建议使用div作为布局容器

.container	类用于固定宽度并支持响应式布局的容器 【特点】：居中，两端留白 <div class="container">...</div>
.container-fluid	类用于100%宽度，占据全部视口(viewport)的容器。 <div class="container-fluid>...</div>

4. 栅格系统

4.1 简述栅格系统

为了方便在布局容器中进行网页的布局操作。
BootStrap提供了一套专门用于响应式开发布局的栅格系统。

栅格系统将一行分为12列，通过设定元素占用的列数来布局元素在页面上的展示位置。

帮助手册位置：全局CSS样式------栅格系统

作用：可以让开发人员更加轻松进行页面布局，并且轻松进行响应式开发。

4.2 栅格系统的特点及入门案例

• 栅格特点
  “行（row）”必须包含在.container（固定宽度）或.container-fluid（100%%宽度）中
   
  行使用样式“.row”列使用样式“col-*-*” 元素内容应当放置于“列（column）”内
   
  基本的书写方式必须试：容器—行---列
  类似于HTML表格：定义一个表格—行---单元格
• 栅格参数：“col-屏幕尺寸-占用列数”

列元素的书写顺序，决定了布局顺序，先写的列元素会被先布局到行上。
列元素的占用列数，定义列元素的大小

注意：

• 一个row下，如果设置的col列数总和小于等于12，那么该row下元素在一行排列；
• 一个row下，如果设置的col列数总和大于12，那么超出的元素会另起一行排列；
• 行和列可以进行无限嵌套，嵌套方式必须为 列—行---列—行……
• 一个row元素下，有12列

4.3 栅格屏幕尺寸设置

屏幕尺寸简述：

• large：lg ------大屏幕，一般PC尺寸
• medium：md ------中等屏幕，小PC尺寸
• small：sm ------小屏幕，ipad尺寸
• x small：xs ------嘲笑屏幕，普通手机屏幕

为了方便显示元素大小，我们为展示元素都赋予了相同样式

4.4 设置屏幕尺寸时的注意事项

若设置某个屏幕尺寸的样式，那么比该尺寸大的屏幕，会沿用该设置；比该尺寸小的屏幕，会默认一个元素占12列的设置。

例如：设置了 col-md-4，那么相当于也设置了col-lg-4。其他屏幕尺寸均默认为col-sm-12，col-xs-12

4.5 列偏移

通常情况下我们需要将元素居中显示，需要左边空出一定的空白区域，这里我们就可以使用列偏移来达到效果。

col-屏幕尺寸-offet-*	在指定屏幕尺寸下，向右偏移*个列

 		<div class="col-xs-4  col-lg-offset-4" style="border: 1px solid red;">
 			1
 		</div>

5. 响应式工具

为针对性地在移动页面上展示和隐藏不同内容，bootStrap提供响应式工具。
为了让开发人员通过该工具决定，在何种屏幕尺寸下，隐藏或者显示某些元素

帮助手册位置：全局CSS样式—响应式工具

  		<div class="col-xs-4 visible-lg" style="border: 1px solid red;">
  			2
  		</div>

6.列表

BootStrap同样提供了实用的列表样式供开发人员使用
帮助手册位置：全局CSS样式—排版—列表

list-inline 将列表所有元素放置于一行

示例：

<ul class="list-inline">
	<li>小马利亚</li>
	<li>小马谷</li>
	<li>Rarity</li>
</ul>

7.按钮

BootStrap提供了丰富地按钮样式供开发人员使用。

帮助手册位置：全局CSS样式—按钮

8.导航条

BootStrap已经提供了完整地导航条实例，通常情况下，我们仅需要进行简答修改即可使用。

帮助手册位置：组件—导航条

9.轮播图

BootStrap已经提供了完整地轮播图实例，通常情况下，我们仅需要简单修改即可使用。

帮助手册位置：JavaScript插件—Carousel

轮播图DIV地定时换图属性：
data-interval="毫秒值"

注意：多个轮播图必须修改轮播图的ID，小圆点中的及左右控制按里的id也要改

10.排版-对齐方式

BootStrap提供统一的排版方式设置，方便开发人员对内容版式进行调整

帮助手册位置：全局CSS样式—排版—对齐

会将元素内所有的内容都进行排版设置
text-left 居左显示
text-center
text-right

示例：

<div class=“text-center">
	<img src="img/bc.jpg"/>
</div>

11.表单元素

全局CSS样式—表单

12.分页条

组件—分页

补充BootStrap：
如果对某个<li> 设置了禁用，那么最好把对应标签的href也删除，这样最为保险

13.综合案例

13.1 案例需求

请做出如图所示的页面。
要求：
1.页面顶部的三部分在PC屏幕上显示为一行，在移动设备屏幕上显示为一部分一行
2.导航条在大屏幕展示全部内容，在移动设备上需要将内容能够折叠/展开；
3.用户名/密码/确认密码不能为空，密码需要和确认密码一致，如果不符合，组织注册操作，并将错误信息展示给用户看

13.2 案例分析

利用栅格系统