BootStrap是什么?
Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。
BootStrap官网中文介绍:http://www.bootcss.com/
BootStrap 的特点
Bootstrap是基于HTML5和CSS3开发的,它在jQuery的基础上进行了更为个性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。个人理解: 可以使用BootStrap框架开发一个响应式的页面,可以同时使用与pc端,pad端和手机端,并且不影响浏览的效果。
下载BootStrap
去官网下载对应的版本
BootStrap的结构:
1、 全局CSS
*BootStrap定义了一套CSS的样式表.
2、组件
*BootStrap定义的一套按钮,导航条...
3、JS插件
*BootStrap定义的一套JS的插件.
BootStrap的入门开发
引入4个外部的文件,先后顺序不能反
<meta charset="UTF-8">
<!--BootStrap设计的页面支持响应式的 -->
<meta name="viewport"content="width=device-width, initial-scale=1">
<title></title>
<!--引入BootStrap的CSS-->
<link rel="stylesheet"href="../../css/bootstrap.css" type="text/css"/>
<!--引入JQuery的JS文件:JQuery的JS文件要在BootStrap的js的文件的前面引入-->
<script type="text/javascript"src="../../js/jquery-1.11.3.min.js" ></script>
<!--引入BootStrap的JS的文件-->
<script type="text/javascript"src="../../js/bootstrap.js" ></script>
【BootStrap布局容器】
【BootStrap的栅格系统】
响应式的设计:
* CSS3的样式:媒体查询(即:根据不同设备的宽度定义了不同的样式)
栅格样式:
* 设备的分辨率大于 1200 使用lg样式
* 设备的分辨率大于 992 < 1200 使用md样式
* 设备的分辨率大于768 < 992 使用sm样式
* 设备的分辨率小于 768 使用xs样式
将一行分成12列.定义div元素 样式的和加一起等于12 即可.
【BootStrap的全局CSS】
定义了一套CSS
* 对页面中的元素进行定义:
* 列表元素,表单,按钮,图片...
代码实现:
使用BootStrap布局网站的首页:
需求:
使用BootStrap布局网站的首页.
步骤分析:
Ø 步骤一:新建一个html页面.引入bootStrap的相应js和css
Ø 步骤二:定义一个整体的div,将整体的div分成8个部分.
Ø 步骤三:完成每个部分的显示.
代码实现: