Bootstrap響應式導航欄
一.建立一個導航欄的步驟css
1.<nav></nav>標籤添加 .navbar .navbar-defaulthtml
2.像<nav>內部添加一個標題<div> 帶有class .navbar-header，內部包含帶有 class navbar-brand的<a>元素--讓文本看起來大一號。jquery
3.爲導航欄添加鏈接 帶有class .nav .navbar-nav的無序列表ulbootstrap
二.建立一個響應式導航欄ide
1.<nav></nav>標籤添加 .navbar .navbar-defaultui
2.像<nav>內部添加一個標題<div> 帶有class .navbar-header，內部包含帶有 帶有class .navbar-togglespa
data-toggle="collapse" 告訴按鈕應該作什麼， data-taregt="#exmple-navbar" 指示要切換的是哪一個元素 的<button>orm
3.<button>加入三個 <span class="icon-bar"></span> 三條線 漢堡按鈕 ， <a class="navbar-brand" href="#">響應式導航</a> 導航標題htm
4.在帶有class .navbar-header，的div下面 ，插入一個div 帶有 class .collapse navbar-collapse,包裹要摺疊的內容。ip
5.在上一個div內部插入無序列表<ul class=nav navbar-nav">
正常
縮小後
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>響應式導航欄</title>
</head>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<body>
<nav class="nav navbar-default">
<div class="container-fluid">
<div class="navbar-header"><!--標題-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target = "#example-navbar">
<!--data-toggle告訴按鈕該作什麼,data-target="#example-navber"指示要切換的是哪一個元素-->
<span class="sr-only">切換導航</span><!--只對屏幕閱讀器可見-->
<span class="icon-bar"></span>
<span class="icon-bar"></span> <!--麪包按鈕,網頁縮小時出現-->
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">響應式導航</a>
</div>
<!---被摺疊的內容必須包裹在class .collapse navbar-collapse的div中-->
<div class="collapse navbar-collapse" id="example-navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">first</a></li>
<li><a href="#">second</a></li>
<li><a href="#">third</a></li>
<li class="divider"></li>
</ul>
</div>
</div>
</nav>
</body>
</html>
三.導航欄中的表單
form中添加 .navbar-form 確保表單適當的垂直對齊和在較窄的視口中的摺疊行爲。
把標籤和控件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。
.navbar-left對齊方式，決定導航欄中內容放在哪裏。
<html>
<head>
<meta charset="UTF-8">
<title>響應式導航欄</title>
</head>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header"><!--標題-->
<a class="navbar-brand">導航欄中的表單</a>
</div>
<div> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" /> </div> <button type="submit" class="btn btn-primary">查找</button> </form> </div> </div> </nav> </body> </html>
- 1. Bootstrap 響應式導航條
- 2. bootstrap-響應式導航條
- 3. 響應式導航欄
- 4. Bootstrap 導航欄
- 5. bootstrap 導航欄
- 6. bootstrap-導航欄
- 7. bootstrap導航欄
- 8. bootstrap實現響應式導航欄，摺疊隱藏效果
- 9. 使用bootstrap製做響應式導航欄
- 10. bootstrap v3 響應式導航欄目設計
- 更多相關文章...
- • jQuery Mobile 導航欄 - jQuery Mobile 教程
- • ionic 導航 - ionic 教程
- • 委託模式
- • TiDB 在摩拜單車在線數據業務的應用和實踐
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Bootstrap 響應式導航條
- 2. bootstrap-響應式導航條
- 3. 響應式導航欄
- 4. Bootstrap 導航欄
- 5. bootstrap 導航欄
- 6. bootstrap-導航欄
- 7. bootstrap導航欄
- 8. bootstrap實現響應式導航欄，摺疊隱藏效果
- 9. 使用bootstrap製做響應式導航欄
- 10. bootstrap v3 響應式導航欄目設計