Bootstrap組件之響應式導航條
響應式導航條:在PC和平板中默認要顯示所有的內容;但在手機中導航條中默認只顯示“LOGO/Brand”,以及一個“菜單折疊展開按鈕”,只有單擊折疊按鈕后才顯示所有的菜單項。
基礎class: .navbar
1、Bootstrap中導航條的按位置:
1)頂部導航條
2)底部導航條
Bootstrap中導航條的按顏色:
1)淺色底深色的字 .navbar-default
2)深色底淺色的字 .navbar-inverse
Bootstrap中導航條的按定位:
1)相對定位position: relative 默認值
2)固定定位position: fixed .navbar-fixed-top/bottom
2、導航條的結構:
<div class="navbar 顏色 定位">
<div class="container">
<!--導航條的頭部:商標+按鈕-->
<div class="navbar-header">
<a class="navbar-brand">
<button class="navbar-toggle">
</div>
<!--導航條折疊菜單:菜單、按鈕、搜索框、鏈接、文本...-->
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<form class="navbar-form">
<button class="navbar-btn">
<span class="navbar-text">
<a class="navbar-link navbar-text">
</div>
</div>
</div>
- 上一篇 ?Bootstrap歷練實例:響應式導航,帶有表單
- 下一篇 ?bootstrap的導航改造