BootStrap

1、bootstrap概述

1.1、什么是bootstrap？bootstrap的作用是什么？

基于HTML、css、JavaScript的前端框架

该框架已经定义了一套css样式和与样式对应的js代码。（对应的样式有对应的特效）

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

作用：

• ①BootStrap使得web开发更加快捷，高效
• ②BootStrap支持响应式开发，解决了移动互联网前端的开发问题

课外知识：

该框架有twitter公司的设计师Mark Otto 和Jacob Thornton合作开发。

BootStrap基础入门使用的都是自带css样式，高级开发中需要使用HTML、css、动态css语言Lss进行自定义开发，JAVAEE课程中学习是“基础入门”。

中文官网：http://www.bootcss.com/

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

• 响应式布局：一个网站的展示能够兼容多个终端（手机，平板，pc等）而不需要为每个终端单独坐一个展示版本。
• 此概念转为解决移动互联网浏览而生

响应式布局，使得网站仅使用一套样式，就可以在不同分辨率下展示出不同的舒适效果，

大大降低了网站开发维护成本，并且能给用户更好的体验性

2、bootstrap环境搭建

2.1、下载资源

中文官网：bhttp://www.bootcss.com/ootstrap-3.3.5.zip

注：（bootstrap.css）完整版用于源码学习，但因为文件大侠问题，不适合网络间传输

（bootstrap.min.css）压缩版用于网络发布，压缩版和完整版的唯一区别，仅为压缩版将代码间的大量空格和回车换行删掉了，节约了大量空间，功能上完全相同，使用于网络间快速传输。但因为没有了空格和换行，源代码难以阅读。

2.3、bootstrap的通用简洁模板

 viewport：视口（浏览器上网页内容  可视区域）

视口的常见属性设置

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

3、布局容器

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

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

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

4、栅格系统

为了方便在布局容器中进行网页的布局操作

bootstrap提供了一套专门用于响应式开发布局的栅格系统。

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

一个信息想占几个就在这12个格子里面设置，

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

作用：

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

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

 栅格特点：

• "行（row）"必须包含在  .container(固定宽度)或  .container-fluid(100%宽度)中
• 行使用的样式".row",列使用样式“col-*-*”  元素内容应当放置于“列（column）”内
• 基本的书写方式必须是：容器----行----列

    HTML表格：定义一个表格table---行---单元格

栅格参数：“col-屏幕尺寸-占用列数”

          例如：col-lg-4    某元素在一行中占四格

为了方便显示元素大小，我们为了展示元素都赋予了相同样式：
    
     问题：为什么自动分行了，说好的只占三个，结果还是占满了一行
    
     注：

• 一个row下，如果设置的col列数总和<=12,那么该row下元素在一行排列
• 一个row下，如果设置的col列>12，那么超出的元素会另起一行
• 一个row元素下可以分成12个列

4.3、栅格屏幕尺寸设置

栅格参数：“col-屏幕尺寸-占用列数”

 屏幕尺寸简述：

large：lg           大屏幕，一般pc

medium：md    中等屏幕，小尺寸pc

small：sm        小屏幕，ipad的尺寸

x small： xs      手机屏幕

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

若设置了某一个屏幕尺寸的样式，那么比该尺寸大的屏幕，就会沿用该设置：比该尺寸小的屏幕还是会默认占满一行（即12列col）

例如：设置了col-md-4，那么相当于也设置了 col-lg-4 。小于md的时，屏幕尺寸还是默认为col-sm-12或者col-xs-12 。

4.5、列偏移

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

.col-屏幕尺寸-offset-*   在指定屏幕尺寸下，向右移动*个列