BootStrap 是一个用于构建响应式(根据用户设备不同做出响应)网站的前端框架, 2011 年 8 月发布的,发布之后就迅速走红。无论你想构建应用程序、博客还是CMS网站,Bootstrap 都完美适用,只要你想得到, 它都能行。Bootstrap 把 HTML、CSS 和 JavaScript 组合起来,为构建稳定的网站提供了基础设施,也能提高开发效率。基于默认的网格系统,布局变成了小菜一碟,按钮、导航和表格也都活脱脱地赏心悦目。十几个 JavaScript 插件更为我们赋予网站交互能力提供了强大保障。
BootStrap适用于全栈开发,JQueryUI和EasyUI适合于后台界面开发。
1、响应式布局
响应式,就是页面可以根据用户设备不同(如:分辨率大小)对页面效果做出一些响应,它实现的关键是CSS中的"@media"属性。
示例:调整页面变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 300px;
background-color: red;
}
/* 当页面宽度大于等于800时,内部的样式就会生效。 */
@media (min-width: 800px) {
.pg-header{
background-color: green;
}
}
</style>
</head>
<body>
<div class="pg-header"></div>
</body>
</html>
2、BootStrap的应用
需要先进行下载,然后再在项目中导入。
1.下载用于生产的 BootStrap包
https://v3.bootcss.com/getting-started/#download
2.解压缩文件夹之后,把bootstrap文件夹拷贝到项目目录,然后在页面中引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BT</title>
<!--引入BootStrap的样式,提供了大量的样式-->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<h1>欢迎使用BootStrap</h1>
<script src="jquery-3.4.1.min.js"></script>
<!--引入BootStrap的js,提供了一些动态效果。注意:必须先引入jQuery-->
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>
3.CDN
如果使用CDN的话,无需下载BootStrap就可以直接在页面引入。
3、BootStrap样式
1.布局容器
响应式布局,当页面宽度变化时,内容的宽度会发生变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
background-color: blue;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
</style>
</head>
<body>
<div style="height:48px;background-color:red">
<div class="container">...</div>
</div>
</body>
</html>
2.顶部导航条
基础导航条