文章详细描述了如何在HTML中使用BootstrapCSS和jQuery来创建响应式导航栏，包括不同屏幕尺寸下的样式调整和媒体查询的运用。同时提供了Bootstrap下载和组件选择的步骤。
一、代码区域
<title>Document</title>
<!-- bootstrap的参考网址：https://v4.bootcss.com/ -->
<!-- 先引入 bootstrap的css样式 -->
<link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
<style>
.form-inline .btn {
border: 1px solid transparent;
}
<!-- 浏览器屏幕宽度小于 500px -->
@media(min-width:500px) {
.logo {
font-size: 10px;
/* color: red; */
}
.list {
border-bottom: 1px solid #ccc;
}
}
<!-- 浏览器屏幕宽度在 500px至 991px之间 -->
@media(min-width:501px) and (max-width:991px) {
.logo {
font-size: 20px;
}
}
<!-- 浏览器屏幕宽度在 992px至 1199px之间 -->
@media(min-width:992px) and (max-width:1199px) {
.logo {
font-size: 28px;
}
}
@media (min-width:1200px) {
.logo {
font-size: 35px;
}
}
.nav-link {
color: #6F6F6F !important;
}
.nav-link:hover {
color: skyblue !important;
}
/* .search-img:hover{
background-color: skyblue !important;
} */
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0 mx-auto">
<li class="nav-item active ">
<a class="nav-link logo" href="#">云悦读<span class="sr-only">(current)</span></a>
</li>
</ul>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link list" href="#">首页<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link list" href="#">悦读<span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link list" href="#">悦图<span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link list" href="#">关于<span class="sr-only"></span></a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<button class="btn btn-outline-success my-2 my-sm-0 " type="submit"></button>
</form>
</div>
<img class="search-img" style="width: 20px; height: 20px; float: right;" src="./assest/search.png" alt="">
</nav>
</div>
<!-- 然后引入 jquery -->
<script src="./libs/jQuery/jQuery.min.js"></script>
<!-- 接着引入 bootstrap的 jquery -->
<script src="./libs/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
代码实现效果参考地址：云悦读 - 阅读使人自由
二、所需资源（jquery的库在资源绑定上）
下载bootstrap组件的步骤：
1.打开bootstrap的官网并点击 “Bootstrap v4 中文文档”，参考地址：Bootstrap中文网
2.点击 “查看安装文档”
3.点击 “下载Bootstrap源码”
4.在组件中，点击 “导航条",并点击代码右上角的复制按钮进行代码Copy，根据自己项目需求做适当调整即可。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
