[學習筆記] bootstrap(六): nav導航欄和麪包屑導航

nav導航欄

<nav role="navigation" class="navbar navbar-default">
    <div class="container-fluid"></div>
    <div class="navbar-header">
        <a href="#" class="navbar-brand"> 大大的logo </a>
    </div>
    <div >
        <ul class="nav navbar-nav">
            <li> <a href="#" > 分類 </a> </li>
            <li> <a href="#" > 分類 </a> </li>
            <li> <a href="#" > 分類 <span class="caret"/> </a> </li>
        </ul>
    </div>
</nav>

響應式的導航欄

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target="#one">
                <span class="sr-only">切換導航</span>
                <span class="icon-bar"/>
                <span class="icon-bar"/>
                <span class="icon-bar"/>
            </button>
            <a href="#" class="navbar-brand"> BigLogo </a>
        </div>
        <div class="collapse navbar-collapse" id="one">
            <ul class="nav navbar-nav">
                <li> <a href="#"> 分類1 </a> </li>
                <li> <a href="#"> 分類2 </a> </li>
                <li> <a href="#"> 分類3 </a> </li>
                <li> <a href="#"> 分類4 </a> </li>
            </ul>
        </div>
    </div>
</nav>

具有不同對齊風格和固定的導航欄

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="#" class="navbar-brand"> 前端萬歲 </a>
        </div>
        <div>
            <ul class="nav navbar-nav navbar-right">
                <li> <a href="#" > <span class="glyphicon glyphicon-user"/>註冊</a></li>
                <li> <a href="#" > <span class="glyphicon glyphicon-log-in"/>登錄</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-left">
                <li> <a href="#" > <span class="glyphicon glyphicon-user"/>註冊</a></li>
                <li> <a href="#" > <span class="glyphicon glyphicon-log-in"/>登錄</a></li>
            </ul>

        </div>

    </div>
</nav>

麪包屑導航(BreadCrumb)

<ol class="breadcrumb">
    <li> <a href='#' > 首頁 </a> </li>
    <li> <a hef="#" > Java </a> </li>
    <li  class=active"> <a href="#"> Xxx文章 </a> </li>
</ol>

層次導航,讓我想起UC的極速模式的 X 級頁面