Bootstrap学习笔记（四）

这一节主要介绍组件中的导航栏、导航条。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>

---

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