一:概念
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。
广泛在企业网站、博客、网站后台之类的网站使用
好处:
① :定义了许多CSS样式和js插件。开发者可以直接引用这些样式和插件。
② :响应式布局:同一套页面可以兼容不同分辨率的设备。 ③:移动设备优先 ④:浏览器支持 ⑤:容易上手
二:环境安装
1.下载Bootstrap库
下载地址:http://www.bootcss.com/
自行在官网中下载,下载的Bootstrap如下:
2.页面中引入库
①:bootstrap.min.css:Bootstrap核心样式【添加到head标签中】
②:jquery-3.3.1.js:jQuery库【注意:必须在Bootstrap核心库引入之前引入jQuery库】
③:bootstrap.min.js:Bootstrap核心库
导入的库如下:
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
三:Bootstrap CSS
概述:
①.H5文档类型:<!DOCTYPE html>
②.移动设备优先,在head中添加:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
解释:
③.布局容器
- 固定容器【class="container"】
固定宽度的,有间距的
- 流体容器【class="container-fluid"】
100%宽度的,没有间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--
viewport 视口
width=device-width 当前网页的宽度为设备的宽度
initial-scale 初始缩放比
-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--导入资源-->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<body>
<p>案例3:演示两种容器的区别</p>
<!--
container 固定宽度的
lg : large 大
md : middle 中等
sm : small 小
xs : extra small 超小
container-fluid 100%宽度
-->
<style>
.container {
background: yellow;
}
.container-fluid {
background: pink;
}
</style>
<div class="container">
<p>演示两种容器的区别</p>
<p>演示两种容器的区别</p>
<p>演示两种容器的区别</p>
<p>演示两种容器的区别</p>
</div>
<div class="container-fluid">
<p>演示两种容器的区别</p>
<p>演示两种容器的区别</p>
<p>演示两种容器的区别</p>
<p>演示两种容器的区别</p>
</div>
</body>
</html>
概念:Bootstrap提供了一套响应式、移动设备优先的流式网格系统
特点:会随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列
案例:查询按钮原生态实现对比Bootstrap方式实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对比原生态的button和Bootstrap的button区别</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
<script src="bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<style>
button{
/* 手势 */
cursor: pointer;
}
</style>
</head>
<body>
<button>原生态按钮</button>
<button class="btn btn-danger">警报按钮</button>
<button class="btn btn-default">默认按钮</button>
<button class="btn btn-info">一般信息按钮</button>
<button class="btn btn-warning">警告按钮</button>
<button class="btn btn-primary">首选项</button>
<button class="btn btn-link">链接按钮</button>
</body>
</html>
案例:首页导航&搜索区域原生态实现(div+css)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首页导航&搜索区域原生态实现</title>
<style type="text/css">
.dh {
/* 高度 */
height: 50px;
/* 背景颜色 */
background-color: #F8F9FA;
/* 行高 垂直居中 */
line-height: 50px;
}
.bt {
/* 左飘 */
float: left;
/* 左间距 */
margin-left: 50px;
}
.lj {
/* 右飘 */
float: right;
/* 右间距 */
margin-right: 50px;
}
.lj a {
/* 每隔间隔10个像素 */
margin-left: 10px;
}
.ss {
/* 背景颜色 */
background-color: #DCDCDC;
/* 高度 */
height: 100px;
/* 上右下左间距 */
margin: 20px 50px 0px 50px;
/* 水平居中 */
text-align: center;
/* 行高 */
line-height: 100px;
}
.ss button {
/* 字体颜色 */
color: white;
/* 背景颜色 */
background-color: #007BFF;
/* 去除边框 */
border: 0px;
/* 宽度 */
width: 50px;
/* 高度 */
height: 30px;
/* 设置边框圆角 */
border-radius: 4px;
}
.ss input {
/* 去除边框 */
border: 0px;
/* 宽度 */
width: 200px;
/* 高度 */
height: 25px;
}
</style>
</head>
<body>
<!-- 导航区域 -->
<div class="dh">
<div class="bt">您好,欢迎来到网上书店</div>
<div class="lj">
<a>首页</a>
<a>登录</a>
<a>注册</a>
<a>我的购物车</a>
</div>
</div>
<!-- 搜索区域 -->
<div class="ss">
<input type="text" />
<button>查询</button>
</div>
</body>
</html>
案例:首页导航&搜索区域Bootstrap实现&搭首页框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首页导航&搜索区域Bootstrap实现</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- 引入bootstrap的CSS -->
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
<!-- 分别引入jQuery的js和Bootstrap的js -->
<script src="bootstrap-3.3.7-dist/js/jquery-3.5.1.js" type="text/javascript" ></script>
<script src="./bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript" ></script>
<style type="text/css">
.navbar-collapse {
/* 1代表弹性扩大占用父容器剩余空间 0代表不占用 */
flex-grow: 0;
}
.ss {
/* 高度 */
height: 100px;
/* 背景颜色 */
background-color: #DCDCDC;
/* 上间距 */
margin-top: 20px;
}
.form-group {
/* 宽度 */
width: 300px;
/* 左间距 */
margin-left: auto;
/* 右间距 */
margin-right: auto;
/* 上间距 */
margin-top: 31px;
}
</style>
</head>
<body>
<!-- 导航条组件 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- 固定容器 -->
<div class="container">
<a class="navbar-brand" href="#">您好,欢迎来到网上书店</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" href="#">首页 <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#">登录</a>
<a class="nav-link" href="#">注册</a>
<a class="nav-link" href="#">我的购物车</a>
</div>
</div>
</div>
</nav>
<!-- 栅格系统实现首页框架 -->
<div class="container">
<!-- 第一行:搜索区域 -->
<div class="row ss">
<div class="col">
<form>
<div class="form-group">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="书籍关键字" aria-label="Recipient's username" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button" id="button-addon2">查询</button>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- 第二行 -->
<div class="row">
<div class="col-3" style="background-color: pink;">
左3-书籍分类
</div>
<div class="col-9" style="background-color: skyblue;">
<!-- 右9-轮播图&新书上架&热门书籍 -->
<div class="row">
<div class="col">
右9中第一行轮播图
</div>
</div>
<div class="row">
<!-- 右9中第二行新书上架 -->
<div class="col" style="background-color: darkorange;">
①新书上架
</div>
<div class="col" style="background-color: darkorange;">
②新书上架
</div>
<div class="col" style="background-color: darkorange;">
③新书上架
</div>
<div class="col" style="background-color: darkorange;">
④新书上架
</div>
<div class="col" style="background-color: darkorange;">
⑤新书上架
</div>
</div>
<div class="row">
<!-- 右9中第三行热门书籍 -->
<div class="col" style="background-color: plum;">
①热门书籍
</div>
<div class="col" style="background-color: plum;">
②热门书籍
</div>
<div class="col" style="background-color: plum;">
③热门书籍
</div>
<div class="col" style="background-color: plum;">
④热门书籍
</div>
<div class="col" style="background-color: plum;">
⑤热门书籍
</div>
</div>
</div>
</div>
</div>
</body>
</html>