bootstrap

【BootStrap的概述】

• BootStrap的概念

• 什么是响应式:

响应式页面设计：一套页面可以适配不同的设备.(PC,PAD,手机).

• BootStrap的中文网：

http://www.bootcss.com/

• 下载BootStrap

• BootStrap的结构：

*全局CSS

*BootStrap定义了一套CSS的样式表.

*组件

*BootStrap定义的一套按钮，导航条...

*JS插件

*BootStrap定义的一套JS的插件.

• BootStrap的入门开发：

<metacharset="UTF-8">

<!--BootStrap设计的页面支持响应式的-->

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

<title></title>

<!--引入BootStrap的CSS-->

<linkrel="stylesheet" href="../../css/bootstrap.css"type="text/css"/>

<!--引入JQuery的JS文件：JQuery的JS文件要在BootStrap的js的文件的前面引入-->

<scripttype="text/javascript" src="../../js/jquery-1.11.3.min.js"></script>

<!--引入BootStrap的JS的文件-->

<scripttype="text/javascript" src="../../js/bootstrap.js"></script>

补充说明:

meta:

width:可视区域的宽度，值可为数字或关键词device-width

height:同width

intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放

maximum-scale=1.0,minimum-scale=1.0;可视区域的缩放级别，

maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。

user-scalable:是否可对页面进行缩放，no禁止缩放

【BootStrap布局容器】

【BootStrap的栅格系统】

响应式的设计：

的样式：媒体查询

栅格样式：

*设备的分辨率大于1200使用lg样式

*设备的分辨率大于992< 1200 使用md样式

*设备的分辨率大于768< 992 使用sm样式

*设备的分辨率小于768使用xs样式

将一行分成12列.定义div元素样式的和加一起等于12即可.

【BootStrap的全局CSS】

定义了一套CSS

*对页面中的元素进行定义:

*列表元素，表单，按钮，图片...