Bootstrap学习笔记（四）

版权声明：本文为博主原创文章，未经博主允许不得转载。如果对你有帮助，那真是再好不过啦~ https://blog.csdn.net/SCU_Cindy/article/details/73719307

这一节主要介绍组件中的导航栏、导航条。Navigation。在实际项目中，导航栏是很常见的一种组件。学好这个总没差，早晚用得到。

导航的创建

标签页、胶囊式标签页、两端对齐式标签页、禁用的链接、下拉菜单。

• html代码

<div class="container">
    <ul id="myTab" class="nav nav-tabs" role="tablist">
    < ! -- Role属性的添加会避免一些不必要的问题。-->
        <li role="presentation" class="active"><a href="#">Home</a></li>
        <li role="presentation" ><a href="#">Hello</a></li>
        <li role="presentation" ><a href="#">World</a></li>
    </ul>
</div>

• js代码

<script src="jquery-3.1.0.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script>
        $("#myTab a").click(function(e){
            e.preventDefault();
            $(this).tab("show");
        })
    </script>

1. 标签页：class="nav nav-tabs"
2. 胶囊式标签页：class="nav nav-pills"
3. 两端式对齐标签页：class="nav nav-tabs nav-justified"
4. 禁止点击：class="disabled"

5. 下拉菜单Tabs with dropdowns

   

<div class="container">
    <ul id="myTab" class="nav nav-pills nav-justified" role="tablist">
        <li role="presentation" class="active"><a href="#">Home</a></li>
        <li role="presentation" ><a href="#">Hello</a></li>
        <li role="presentation" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">World <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li role="presentation"><a href="#" role="menuitem" tabindex="-1">A</a></li>
                <li role="presentation"><a href="#" role="menuitem" tabindex="-1">B</a></li>
                <li role="presentation"><a href="#" role="menuitem" tabindex="-1">C</a></li>
            </ul>
        </li>
    </ul>
</div>

导航条的使用

这部分主要了解基本的导航、表单、文本、非导航的链接、组件排列、固定在顶端/底端、反色的导航条以及路径导航等。

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Cindy</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav" id="mytab">
                <li class="active"><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
            </ul>

            <form class="navbar-form navbar-left" role="navigation">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Search</button>
            </form>

            <ul class="nav navbar-right navbar-nav">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Click<span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Hello1</a></li>
                        <li><a href="#">Hello2</a></li>
                        <li><a href="#">Hello3</a></li>
                        <li><a href="#">Hello4</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

• 固定在顶端/底端，使用下面代码设置class

 <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">

• 反色的导航条

<nav class="navbar navbar-inverse" role="navigation">

• 路径导航

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <ol class="breadcrumb">
        <li><a href="#">Homex</a></li>
        <li><a href="#">Library</a></li>
        <li><a href="#">Data</a></li>
    </ol>
</nav>

---

关于导航组件就总结到这里，希望对你有所帮助。记得点赞，么么哒。