如何在bootstrap中添加汉堡包菜单
16lz
2021-01-22
I need some help with bootstrap nav. I want it to be toggled via a hamburger icon on mobile.
我需要一些bootstrap导航的帮助。我想通过移动设备上的汉堡包图标切换它。
Here it is on codepen: http://codepen.io/sadman/pen/hfGwv (link invalid)
这是在codepen:http://codepen.io/sadman/pen/hfGwv(链接无效)
.navbar,
.navbar-inverse {
border-radius: 0;
border: none;
margin-bottom: 0;
min-height: 80px;
}
.nav li {
display: inline;
color: white;
}
.navbar-inverse .navbar-nav>li>a {
color: #ffffff;
font-family: Lato;
font-size: 1.7em;
font-weight: 300;
padding: 30px 25px 33px 25px;
}
.navbar-inverse .navbar-nav li a:hover {
background-color: #444444;
transition: 0.7s all linear;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<ul class="nav navbar-nav">
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
</nav>
更多相关文章
- jQuery更改活动类图标的状态
- 将一个youtube iframe放在另一个具有关闭图标的框架上
- 在导航图标css下包装文本。
- android Editview中加小图标或者文字实现
- android 百度地图路线规划去掉节点图标
- 在Android主屏幕上删除启动器图标(就像Google Play一样)
- Android实现桌面图标通知数量角标
- android MPChart图标使用详解
- Eclipse工程图标左下角报错