大家好哇~，今天学的是前端框架！
根据案例讲解的哦
首先是要下载Bootstrap库 网址：http://v4.bootsc.com/
ps:记得在页面引入库
目录：
一、查询按钮源生态现实对比Bootstrap方式实现
二、首页导航&搜索区域原生态实现
三、首页导航&搜索区域Bootstrap实现&搭首页框架
思维导图，简洁明了：
一、查询按钮源生态现实对比Bootstrap方式实现
第一个案例：
<title>案例1：查询按钮源生态现实对比Bootstrap方式实现</title>
<style type="text/css">
.aa{
background-color:#1979CA ;/* 背景颜色 */
color: white;/* 字体颜色 */
border: 0px;/* 去除边框 */
width: 50px;/* 宽度 */
height: 30px;/* 高度 */
border-radius: 4px;/* 设置边框圆角 */
}
</style>
<!-- 支持手机端 -->
<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="css/bootstrap.css" />
</head>
<body>
<!-- 固定容器 -->
<div class="container">
<button class="aa">查询</button>
<hr color="#007BFF" />
<!-- Bootstrap的按钮 -->
<button class="btn btn-outline-success">搜索</button>
</div>
<!-- 引入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>
</html>二、首页导航&搜索区域原生态实现
案例二：
<style type="text/css">
.dh{
height: 50px;
background-color: #F5F8F6;
line-height: 50px;/* 居中垂直 */
}
.bt{
float: left;/* 左浮动 */
margin-left: 50px;/* 左间距 */
font-size: 20px;
}
.an{
float: right;/* 右浮动 */
margin-right: 50px;/* 右间据 */
}
.an a{
margin-left: 10px;/* 有间隔 */
}
.ss{
height: 100px;
background-color: #DBDBDA
text-align:center;/* 水平居中 */
line-height: 100px;/* 行高 */
margin: 30px 50px 10px 50px;/* 上右下左间距 */
}
.ss input{
border: 0px;/* 去除边框 */
}
.ss button{
background-color:#1979CA ;/* 背景颜色 */
color: white;/* 字体颜色 */
border: 0px;/* 去除边框 */
width: 50px;/* 宽度 */
height: 30px;/* 高度 */
border-radius: 4px;/* 设置边框圆角 */
}
</style>
</head>
<body>
<!-- 导航区域 -->
<div class="dh">
<div class="bt">您好，欢迎冤大头来到卓京传销</div>
<div class="an">
<a>首页</a>
<a>登录</a>
<a>注册</a>
<a>我的购物车</a>
</div>效果：
三、首页导航&搜索区域Bootstrap实现&搭首页框架
案例三：
直接在网站cop的代码 css
<body>
<!-- 导航区域：导航条组件 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container"></div>
<a class="navbar-brand" href="#">shaby,mad,fiveone festival not sffrenjege</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="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</nav>
<!-- 栅格搭建主页框架 -->
<div class="container">
<!-- 第一行：第一列 -->
<div class="row" style="background-color: pink;">
<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-outline-secondary" type="button" id="button-addon2">查询</button>
</div>
</div>
</div>
</form>
</div>
</div>
最后出来的效果：
