免費(fèi)AI編程助手
關(guān)于學(xué)習(xí)編程語(yǔ)言很多人都說(shuō)如果有代碼和案例解析可以配套學(xué)習(xí)就好了，沒(méi)錯(cuò)在我們學(xué)習(xí)的時(shí)候如果有相對(duì)一些案例和代碼給我們使用的話(huà)這樣就會(huì)變得更加的快速學(xué)習(xí)，今天我們就來(lái)說(shuō)說(shuō)有關(guān)于“bootstrap導(dǎo)航欄代碼怎么編寫(xiě)？”這個(gè)問(wèn)題吧！下面是小編分享的一些相關(guān)的內(nèi)容希望對(duì)大家有所幫助，大家可以作為參考！
1.首先我們新建項(xiàng)目在我們的項(xiàng)目中連接我們的bootstrap框架的相關(guān)文件，當(dāng)然我們?cè)陂_(kāi)始編寫(xiě)代碼時(shí)，就應(yīng)該完成相關(guān)的框架，代碼如下：
<html>
<head>
<meta charset="utf-8">
<title>導(dǎo)航欄</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link rel="stylesheet">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
.body-content {
margin-top:20px;
padding-left: 15px;
padding-right: 15px;
}
</style>
<!-- HTML5 Shiv 和 Respond.js 用于讓 IE8 支持 HTML5元素和媒體查詢(xún) -->
<!-- 注意： 如果通過(guò) file:// 引入 Respond.js 文件，則該文件無(wú)法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">管理后臺(tái)</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 用戶(hù)管理</a></li>
<li><a href="#"><span class="glyphicon glyphicon-lock"></span> 管理員</a></li>
<li><a href="#"><span class="glyphicon glyphicon-list"></span> 欄目設(shè)置</a></li>
<li><a href="#"><span class="glyphicon glyphicon-cog"></span> 網(wǎng)站設(shè)置</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">
<span class="glyphicon glyphicon-envelop"></span> Alexander
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-log-out"></span> 退出
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-4">
側(cè)邊欄
</div>
<div class="col-lg-9 col-md-9 col-sm-8">
內(nèi)容區(qū)域
</div>
</div>
<hr>
<footer class="navbar navbar-fixed-bottom text-center bg-primary">
<p>? AlexanderZhao </p>
</footer>
</div>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 包括所有已編譯的插件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>我們來(lái)看看結(jié)果圖:
這樣我們就完成了導(dǎo)航欄的設(shè)置。
總結(jié)：以上這些就是有關(guān)于“bootstrap導(dǎo)航欄代碼怎么編寫(xiě)？”這個(gè)問(wèn)題的相關(guān)內(nèi)容，當(dāng)然如果你覺(jué)得哪里不夠好也可以分享你的想法和大家一同學(xué)習(xí)進(jìn)步。當(dāng)然有關(guān)于bootstrap這方面的相對(duì)應(yīng)的知識(shí)內(nèi)容我們都可以在Bootstrap3 入門(mén)課程中進(jìn)行學(xué)習(xí)和了解。
