一、概念
1.BootStrap
一个前端开发的框架,来自 Twitter,是目前很受欢迎的前端框架,基于 HTML、CSS、JavaScript,简洁灵活,使得 Web 开发更加快捷。
2.框架
一个半成品软件,开发人员可以在框架基础上,再在进行二次开发,已达到优化编码,提升用户体验感。
3.BootStrap的优点
① 定义了很多的css样式和js插件,开发人员可以直接使用这些样式和插件来制作页面,以得到丰富的页面效果。
②响应式布局,即 同一套页面可以兼容不同分辨率的设备。
二、使用简介
1.下载
可以通过百度搜索BootStrap中文网下载BootStrap
2.搭建项目
在下载好的BootStrap中点击第一个文件夹“bootstrap-3.3.7-dist”
该文件夹中三个文件夹
拷入工程中
3. 配置html页面
在bootstrap文档中往下拉可以看到测试代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
将代码精简为
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">//设置了编码
<meta http-equiv="X-UA-Compatible" content="IE=edge">//设置了IE的值
<meta name="viewport" content="width=device-width, initial-scale=1">//设置视口,相当于一个窗口
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title>
//上面代码中两个为了兼容IE而引入的script可以删掉
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">//改用本地的,能加快速度
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好,世界!</h1>
</body>
</html>