1. 程式人生 > >bootstrap導航條組件

bootstrap導航條組件

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導航條組件