Bootstrap组件_导航条(默认样式的导航条,品牌)
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap组件_导航条(默认样式的导航条,品牌)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>導航條</title><link rel="stylesheet" href="bootstrap.min.css"><script src="jquery-1.12.1.js"></script><script src="bootstrap.min.js"></script>
</head>
<body><nav class="navbar navbar-default"><div class="container-fluid"><div class="navbar-header"><a class="nav-brand"><img src="baidu.png" style="height:50px" width="86px"></a></div><ul class="nav navbar-nav"><li class="active"><a href="#">Link<span class="sr-only"></span></a></li><li><a href="#">Link</a></li><li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button">下拉菜單<span class="caret"></span><ul class="dropdown-menu" role="menu"><li><a href="#">1</a></li><li><a href="#">1</a></li><li><a href="#">1</a></li><li><a href="#">1</a></li></ul></a></li></ul></div></nav>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>導航條</title><link rel="stylesheet" href="bootstrap.min.css"><script src="jquery-1.12.1.js"></script><script src="bootstrap.min.js"></script><style>/*body {padding-top: 65px;}*/body {padding-bottom: 65px;}</style>
</head>
<body><nav class="navbar navbar-default navbar-static-bottom"><div class="container-fluid"><div class="navbar-header"><a class="nav-brand"><img src="baidu.png" style="height:50px" width="86px"></a></div><ul class="nav navbar-nav"><li class="active"><a href="#">Link<span class="sr-only"></span></a></li><li><a href="#">Link</a></li><li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button">下拉菜單<span class="caret"></span><ul class="dropdown-menu" role="menu"><li><a href="#">1</a></li><li><a href="#">1</a></li><li><a href="#">1</a></li><li><a href="#">1</a></li></ul></a></li></ul><form class="navbar-form navbar-left" role="search"><div class="form-group"><input type="text" class="form-control" placeholder="請輸入要搜索的內容"></div><button type="submit" class="btn btn-default">提交</button></form><button type="button" class="btn btn-default navbar-btn navbar-right">Sign in</button><p class="navbar-text">歡迎來到<a href="#" class="navbar-link">聲訊臺</a></p></div></nav>hellohellohellohello <br>hellohellohellohello <br>
</body>
</html>
?
總結
以上是生活随笔為你收集整理的Bootstrap组件_导航条(默认样式的导航条,品牌)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Spring核心系列之Spring中的事
- 下一篇: Bootstrap组件_分页