溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
廢話不多說，直接上代碼。
<body ><!--若采用浮動，則需要加-->
<nav class="navbar navbar-default navbar-static-top">
<!--navbar navbar-default:首先聲明是一個導航欄，然后聲明用導航欄的default樣式
可以通過navbar-default、navbar-inverse，navbar-collapse等為導航欄設置整體樣式
navbar-fixed-top,將導航欄浮動 navbar-static-top，將導航欄固定
更多搭配，自行配置！
-->
<div class="container">
<a href="#" class="navbar-brand"><img src="img/logo.png" ></a>
<!-- logo位置，href是網站首頁的地址 -->
<div class="navbar-header"><!-- 設置為 頭部文件-->
<button class="navbar-toggle" data-toggle= "collapse" data-tatget"#zhankai-btn">
<!--navbar-toggle:首先聲明一個，折疊按鈕.
data-toggle:聲明打開對象
collapse：聲明打開方法：折疊
data-tatget:聲明目標對象，這里根據id做關聯
該折疊功能，存在js版本，js加載的順序，瀏覽器等原因，點擊失效的問題
-->
<span>>>></span>
</button>
</div>
<div class="collapse navbar-collapse" id="zhankai-btn">
<!-- collapse navbar-collapse：定義一個根據不同屏幕可以折疊的導航欄
將可以折疊的內容，放于折疊容器中
-->
<ul class="nav navbar-nav">
<!--nav navbar-nav:首先聲明是一個導航內容，然后聲明該內容屬于navbar -->
<li class="active"><a href="#">首頁</a></li><!--active為當前激活狀態 -->
<li><a href="#">視頻</a></li>
<li><a href="#">圖片</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">教程</a></li>
<li><a href="#">關于</a></li>
<li><a href="#">下載</a></li>
<li><a href="#">家園</a></li>
</ul>
<form class="navbar-form navbar-left" name="" action="" onsubmit="return XXXX">
<!-- 按照現實中的情況制作一個搜索框
navbar-form:聲明這是一個導航欄中的form表單,navbar-left左對齊
-->
<input type="text" placeholder="請輸入查找的內容" class="form-control"/>
<button type="submit">
<span class="glyphicon glyphicon-search"></span>
<!--glyphicon glyphicon-search:先聲明使用Bootstrap圖標，然后聲明使用搜索圖標 -->
</button>
</form>
<a href="#" class="btn navbar-btn btn-primary btn-xs navbar-right">現在報名</a>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登錄</a></li>
<li><a href="#">注冊</a></li>
</ul>
</div>
</div>
</nav>
<div class="container alert-danger"><!--alert-danger給該div一個醒目色塊-->
<h4>網站內容可以柵格布局</h4>
<p>
以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！
以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！
以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！
以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！
以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！
</p>
</div>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
</body>演示效果：
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
