Bootstrap:用于更快,方便的进行网页的开发
运用Bootstrap前所需做的准备
1. 引入Bootstrap的CSS(层叠样式表)
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
2.在body结束标签(</body>)前分别引入JQuery与Bootstrap的类库
<!-- 引入JQuery的类库 -->
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
<!-- 引入Bootstratp的类库 -->
<script src="js/bootstrap.js" type="text/javascript" charset="UTF-8"></script>
注意:需先引入JQuery的类库,再引入Bootstrap的类库
<!-- 支持手机端 --> (检查代码时手机端看的更清晰)
<meta name="viewport" content="width=device-width,initial-scale=1,
minimum-maximum-scale=1,scale=1,user-scalable=no" />
案例1: 查询按钮原生态实现对比Bootstrap方式实现
(1)、原生态实现按钮
代码
效果
(2)、Bootstrap实现按钮
代码
效果同上
案例2:首页导航
代码示例: <a></a>里内容根据需求修改即可
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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>
效果图:
案例3:搜索区域
代码:
效果: