Bootstrap
概念:一个前端开发的框架,Bootstrap是基于html、css、Javascript的。
- 框架:框架是一个半成品软件,开发人员可以在框架基础上进行开发,简化编码。
- 好处:
① 定义了许多CSS样式和js插件。开发者可以直接引用这些样式和插件。
② 响应式布局:同一套页面可以兼容不同分辨率的设备。
快速入门
1.下载BootStrap
2.下载后有三个文件夹,将这三个文件夹复制到项目中
3.创建html页面,引入需要的东西
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例4:首页导航&搜索区域Bootstrap实现&搭首页框架</title>
<!-- 引入Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<!-- 支持手机端 -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<!-- 引入jQuery的类库 -->
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入Bootstrap -->
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
响应式布局
一个建立一个页面,就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架;
栅格布局:
把每一行布局分为12分,元素的占地宽度靠份数定义
栅格属性:
1.使用栅格必须放在.container中,或者.container-fluid中
2.每一行每一个row,弹性,主轴x,可以换行,有-15px的左右外边距
3.使用col-n,来声明元素在row中占几份