Bootstrap学习笔记（八） 导航栏&分页

导航

Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式
1.标签页
**注意 ：**nav-tabs 类依赖 .nav 基类

<ul class="nav nav-tabs">
    <li class="active"><a href="#">python</a></li>
    <li><a href="#">c++</a></li>
    <li><a href="#">java</a></li>
</ul>

2.胶囊式标签页

<ul class="nav nav-pills">
    <li class="active"><a href="#">python</a></li>
    <li><a href="#">c++</a></li>
    <li><a href="#">java</a></li>
</ul>

3.两端对齐的标签页

<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">python</a></li>
    <li><a href="#">c++</a></li>
    <li><a href="#">java</a></li>
</ul>

4.路径导航标签页

 xxxxxxxxxx <ul class="breadcrumb">    <li class="active"><a href="#">python</a></li>    <li><a href="#">c++</a></li>    <li><a href="#">java</a></li></ul>

导航条

添加 .navbar-fixed-top 类可以让导航条固定在顶部,添加 .navbar-fixed-bottom 类可以让导航条固定在底部

<div class="navbar navbar-default navbar-fixed-top">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">python</a></li>
        <li><a href="#">c++</a></li>
        <li><a href="#">java</a></li>
    </ul>
</div>

<div class="navbar navbar-inverse navbar-fixed-bottom">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">python</a></li>
        <li><a href="#">c++</a></li>
        <li><a href="#">java</a></li>
    </ul>
</div>

分页

<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li class="active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>