【笔记】Bootstrap简单运用

Bootstrap介绍

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

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

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

课外了解知识: 该框架 Twitter公司的设计师 Mark Otto和 Jacob Thornton合作开发。
Bootstrap基础入门使用的都是自带CSS样式，高级开发中需要使用HTML5、CS53、动态CSS语言Less进行自定义开发，JavaEE课程中学习是“基础入门”。
中文官网：http: //www.bootcss.com/

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

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

  响应式布局，使得网站仅适用一套样式，就可以在不同分辨率下展示出不同的舒适效果,大大降低了网站开发维护成本，并且能带给用户更好的体验性

Bootstrap环境搭建

下载资源

• 中文官网地址：http://d.bootcss.com/bootstrap-3.3.5.zip
  
  同时要下载：jquery-1.11.3-min.js 的插件包。

注：完整版用于源码学习,但因为文件大小问题,不适合网络间传递（带min的为压缩版）
  压缩版用于网络发布,压缩版和完整版的唯一区别仅为压缩版将代码间的大量空格和回车换行删除掉了，节约了大量的空间，功能上完全相同,适用于网络间快速传递。但因为没有了空格和换行，源代码难以阅读。

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

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

布局容器

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

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

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

简述栅格系统

为了方便在布局容器中进行网页的布局操作。
BootStrap提供了一套专门用于响应式开发布局的栅格系统。
栅格系统将一行分为12列，通过设定元素占用的列数来布局元素在页面上的展示位置。
帮助手册位置：全局CSS样式—》栅格系统

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

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

• 栅格特点

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

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

  列元素的书写顺序，决定布局顺序，先写的列元素会被先布局到行上。
  列元素的占用列数，定义列元素的大小
  如果第一列的所有列数加起来超过12列，则最后的列元素会被分配到下一行。

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

border: 1px solid red; height: 100px

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

屏幕尺寸简述：

• large:lg ------大屏幕，一般PC尺寸
• medium:md ------中等屏幕，小PC尺寸
• small:sm:sm ------小屏幕，iPad尺寸
• x small:xs ------超小屏幕，智能手机尺寸

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

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

列偏移

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

列偏移	解释
.col-屏幕大小-offset-*	在指定屏幕尺寸下,向右偏移*个列

列表

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

列表样式	解释
list-inline	将列表所有元素放置于一行

示例：

<ul class="list-line">
	<li>BootStrap</li>
	<li>Android</li>
	<li>大数据</li>
</ul>

按钮

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

帮助手册位置：全局CSS样式—》按钮
任何元素加上以下样式都会变成对应按钮

轮播图

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

帮助手册位置：JavaScript插件—》Carousel
轮播图DIV的定时换图属性：
data -interval=”毫秒值”
注意:多个轮播图必须修改轮播图的ID

排版对齐方式

BootStrap提供统一的排版方式设置，方便开发人员对内容板式进行调整
帮助手册位置：全局CSS样式—》排版—》对齐

对齐方式	效果
.text-left	使元素内容靠左显示
.text-center	使元素内容居中显示
.text-right	使元素内容靠右显示

示例：

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

表单元素

帮助手册位置：全局CSS样式—》表单

示例：基本实例

分页条

帮助手册位置：组件—》分页
直接拷贝代码即可使用。

示例效果：