bootstrap導航條組件
阿新 • • 發佈:2018-07-22
als str false inverse png color some collect 表單
一、導航條模板(官方文檔)
<nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
二、分析導航條模板結構
①navbar導航模塊 ,類navbar-default 表示默認樣式(灰白),還可以是navbar-inverse(反色,黑白),兩種主題
class="navbar navbar-inverse"
②container-fluid 表示的是導航的內容容器是流式布局,如果設置成container就是響應式布局
③navbar-header是商標和切換按鈕部分,切換按鈕只有在一定屏幕下才會出現
④類名:collapsed 樣式
- data-toggle="collapse" 申明是什麽組件=collapse折疊組件(collapse是bootstrap的另外一個組件)
- data-target="#bs-example-navbar-collapse-1" 控制的目標元素=選擇器(與後面的id值相對於)
- 需要註意的是如果是超鏈接,可以把選擇器寫在href屬性裏,如下面這個例子:
<button data-toggle="collapse" data-target=".box">切換</button> <a href=".box" data-toggle="collapse" >切換</a> <div class="box"> 內容<br> 內容<br> 內容<br> 內容<br> 內容<br> </div>
⑤其他的屬性像:aria-expanded="false" ,aria-* ,class="sr-only" 代表都是提供給屏幕閱讀器使用的(盲人閱讀器),可以考慮去掉這類屬性和類
⑥dropdown下拉菜單組件,navbar-form搜索表單區域,後面的一些都是相似的內容
三、精簡版導航條模板
<nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- 導航標題和切換按鈕 --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">標題</a> </div> <!-- 鏈接、下拉菜單、搜索區域 --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <!-- 鏈接 --> <li class="active"><a href="#">鏈接1</a></li> <li><a href="#">鏈接2</a></li> <!-- 下拉菜單 --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"> 下拉菜單 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">系列1</a></li> <li><a href="#">系列2</a></li> <li><a href="#">系列3</a></li> <li><a href="#">系列4</a></li> <li><a href="#">系列5</a></li> </ul> </li> </ul> <!-- 表單區域 --> <form class="navbar-form navbar-left"> <div class="form-group"><input type="text" class="form-control" placeholder="Search"></div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div> </nav>
四、使用組件
①使用組件一般都是先分析組件的結構,然後分析選擇器,結合自己的需求,覆蓋樣式
②樣式的覆蓋,首先需要拷貝bootstrap的css源碼(比如這個導航條組件,你需要拷貝的是前綴是.navbar的那部分css樣式)
③然後需要正確定位到所有元素的選擇器,並且能保證優先級比源碼高,針對功能進行樣式的覆蓋
④最後必然會產生一些冗余的代碼,可以保留(為了以後補充一些功能),也可以選擇刪除(減少代碼,提高效率)
bootstrap導航條組件