Bootstrap
概述：
是最受欢迎的HTML,CSS和JS框架,用于开发响应式布局,移动设备优先的WEB项目.
Bootstrap是基于jquery开发的,在使用时需要引入jquery的js文件.
响应式:一个网页可以兼容多种终端
JQuery是对js的封装
下载BootStrap:
www.bootcss.com官网地址
模板☆
1:导入BootStrap的css
2:导入jquery的js文件(1.8+)
3:导入BootStrap的js
4:设置视口(支持移动设备)
<meta name="viewport" content="width=dvice-width,initial-scale=1">
5:添加一个局部容器
给div设置一个class属性:
class="containner"固定宽度
class="container-fluid"类似于100%
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--4.添加视口--> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <!--1.导入Bootstrap的css文件--> <link href="css/bootstrap.css" rel="stylesheet"> <!--2.导入jQuery的js文件--> <script src="js/jquery-3.2.1.min.js"></script> <!--3.导入bootstrap的js文件--> <script src="js/bootstrap.min.js"></script> </head> <body> <div style="border: solid 1px red;height: 20px;"></div> <!--5.添加布局容器--> <div class="container-fluid"> <div style="border: 1px solid red;height: 20px;"></div> </div> <div class="container"> <div style="border: 1px solid red;height: 20px;"></div> </div> </body> </html>
