Bootstrap 前言
bootstrap 是目前最受欢迎的前端框架,bootstrap 是基于HTML CSS JavaScript 的,他灵活简单,使web 开发起来更加的简单。
安装Bootstrap
①登录Bootstrap 官网 输入:https://v4.bootcss.com/
点击下载Bootstrap
②下载Bootstrap
在这里我选择的是源文件,因为它将Bootstrap 生产文件包含在其中,当然这个文件会比较大些,大家可以酌情考虑,
③解压后点击
点击dist
将css 以及js 导入相应的文件夹中
接下来就你的Bootstarp 就可以用了,一起来看看它的具体用法吧!
案例1:查询按钮原生态实现对比bootstrap方式实现
常规方式实现:实现思路 我们可以先定义一个按钮,然后再调用定义的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.aa{
background-color:#007BFF;
color: white;
border: 0px;
width: 60px;
height: 40px;
font-size: 18px;
border-radius: 2px;
}
</style>
</head>
<body>
<button class="aa">查询</button>
</body>
</html>
bootstrap方式实现:在头部引入bootstrap的层叠样式,在body导入jquery 以及bootstrap的script
(注意在先导入jQuery 再导入bootstrap,因为bootstrap 依赖于 jquery 的库)定义按钮调用bootstrap为我们写好的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<button class="btn btn-secondary">查询</button>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
两者对比:常规实现一个有想法的按钮需要很多的样式去实现,会比较麻烦,也比较费时
而通过bootstarp 实现只需要调用bootstrap的样式就行了,对不熟悉前端的小伙伴真的很友好