1、什么是Bootstrap
Bootstrap
来自 Twitter，是目前很受欢迎的前端框架。
Bootstrap
是基于 HTML、 CSS 、JavaScript 的，它简洁灵活，
使得 Web 开发更加快捷。是一个CSS/HTML 框架。
2.为什么学Bootstrap
1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
2. 响应式布局。
同一套页面可以兼容不同分辨率的设备。
3.兼容性
①.移动设备优先
②.浏览器支持
③.容易上手
3.安装和使用
1. 下载Bootstrap
下载路径：
2. 在项目中将这三个文件夹复制
下载完成之后的 Bootstrap 的目录大致如下：
但是我们需要dist 这个目录里面的东西
不过一般情况下我们都不太会去使用它的js文件，而只会使用它css相关的东西，我们来看css里面的东西
我们只需要 boostrap.css 这个文件。而 boostrap.min.css ，由于我们可能会涉及到后期定制，这两个版本可能都不是我们的最终上线版本。带 .map 的叫做“ 资源映射 ”文件。
3. 创建html页面，引入必要的资源文件
注（jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边）
</head>
<body>
<button class="aa">查询</button>
<hr color="red">
<button class="btn btn-primary">查询</button>
<!-- 先引入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>下面是文章的思维导图：
***响应式布局：
* 同一套页面可以兼容不同分辨率的设备。
* 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
* 步骤：
1. 定义容器。相当于之前的table、
* 容器分类：
1. container：两边留白
2. container-fluid：在每一种设备都是100%宽度
2. 定义行。相当于之前的tr 样式：row
3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
* 设备代号：
1. xs：超小屏幕 手机 (<768px)：col-xs-12
2. sm：小屏幕 平板 (≥768px)
3. md：中等屏幕 桌面显示器 (≥992px)
4. lg：大屏幕 大桌面显示器 (≥1200px)
* 注意：
1. 一行中如果格子数目超过12，则超出部分自动换行。
4.案例：
案例一：演示Bootstrap页面在手机浏览器中展示效果
效果图：
jquery
这里我们可以看到样式变动过大出现的美观问题。
BootStrap
jquery
代码区：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>案例3：首页导航&搜索区域原生态实现（div+css）</title>
<style type="text/css">
.dh{
background-color: #F8F9FA;/* 背景颜色 */
width: 100%;/* 宽度 */
height: 50px;/* 高度 */
}
.bt{
float: left;/* 左飘 */
font-size: 18px;/* 字体大小 */
line-height: 50px;/* 行高 */
margin-left: 50px;/* 左间距 */
}
.lj{
float: right;/* 右飘 */
line-height: 50px;/* 行高 */
margin-left: 50px;/* 右间距 */
}
.lj a{
margin-left: 10px;/* 让a标签之间隔开 */
}
.ss{
background-color: #DCDCDC;/* 背景颜色 */
height: 100px;/* 高度 */
margin: 20px 50px 0px 50px; /* 上右下左 */
text-align: center;/* 水平居中 */
line-height: 100px;/* 跟高度保持一致 垂直居中 */
}
.ss input{/* 文本框 */
border: 0px;/* 无边框 */
width: 200px;/* 宽度 */
height: 30px;/* 高度 */
}
.ss button{
background-color:#007BFF;/* 背景颜色 */
color: white;/* 字体颜色 */
border: 0px;/* 无边框 */
width: 55px;/* 宽度 */
height: 35px;/* 高度 */
font-size: 18px;/* 字体大小 */
border-radius: 4px;/* 设置外边圆角 */
}
</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：
代码区：
<html>
<head>
<meta charset="utf-8">
<title>案例4：首页导航&搜索区域Bootstrap实现&搭首页框架</title>
<!-- 引入Bootstrap的CSS（层叠样式表） -->
<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" />
<style type="text/css">
.navbar-collapse{
flex-grow: 0;/* 1代表弹性扩大占用父容器剩余空间 设置为0表示不占用 在固定容器中 */
}
.ss{
background-color: #DCDCDC;/* 背景颜色 */
height: 100px;/* 高度 */
margin-top: 20px;/* 上间距 */
}
.form-group{
width: 300px;/* 宽度 */
margin-top: 31px;/* 上间距 */
margin-left: auto;/* 右边距自适应 自动 */
margin-right: auto;/* 左边距自适应 自动 */
}
</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="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">首页<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">登录</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">注册</a>
</li>
<li class="nav-item">
<a class="nav-link">我的购物车</a>
</li>
</ul>
</div>
</div>
</nav>
2202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
