bootstrap之导航栏

   之前一直在菜鸟教程上学bootstrap，貌似懂了，但又没懂，因为上面的教程不会告诉你每个类的作用，以及结构排版原因，更像是例子给你，照做就好，至于能理解多少就看你个人了，本人愚钝，遂去慕课上看视频，终于才懂了些。

响应式导航栏：

先放图：

电脑全部展开页面：

 

手机关闭页面：

 

手机展开页面：

 

<nav class="navbar navbar-default navbar-inverse">  //最外层
    <div class="container">                   //container 用于导航栏内容居中
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>                             //汉堡按钮
            <p class="navbar-brand">文字logo</p>   //你的Logo,可以放图片
        </div>
        <div class="navbar-collapse collapse">    //结合折叠组件collapse使用
            <ul class="nav navbar-nav ">          //最常见内容，放普通文本链接
                <li><a href="#">普通文本链接1</a></li>
                <li><a href="#">普通文本链接1</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">   //下拉菜单，这里加了右对齐
                <li><a href="#">我右对齐了</a></li>
                <li><a href="#">我右对齐了</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        我是下拉菜单 <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-header"><p>我是dropwodn-header</p></li>  //设置分类header
                        <li><a href="#">内容1</a></li>
                        <li><a href="#">内容2</a></li>
                        <li class="divider"></li>          //分隔线
                        <li><a href="#">我的上下是分割线</a></li>
                        <li class="divider"></li>
                        <li><a href="#">另一个分离的链接</a></li>
                    </ul>
                </li>
            </ul>
            <form action="#" class="navbar-form">   //放搜索框，一定要放在最后，不然会显示两行
                <div class="form-group">
                    <input type="text" class="form-control">
                </div>
                <button class="btn btn-success">search</button>
            </form>
        </div>
    </div>
</nav>

首先最外围：navbar翻译过来是导航栏，这没什么好说的，navbar-inverse ，这个类是把导航栏设为黑底白字，navbar-fixed-top是将导航栏固定在顶部（navbar-fixed-bottom固定在底部），这里有个问题，固定在顶部会将导航栏下面内容覆盖，解决办法，给body设置padding-top:70px即可。

第二层： class='container'   这里可以将container替换为container-fluid,区别在于container-fluid的内容会靠边显示，container的内容会居中显示。

整个导航栏分为两部分：

一.导航栏头部：

导航栏头部包含两部分：1.那三条横线组成的图标（又叫汉堡图标）

                                        2.你的商标，我这里放了个p标签，你可以放图片，记得里面添加.nvabar-brand

导航栏要实现展开收缩，得依赖collapse组件，所以你的class里面有collapse-toggle，翻译过来就是折叠切换按钮，html允许开发者自定义标签属性，且常以data开头，data-toggle意思是数据切换，具体干嘛的我也不知道，data-target用于指定data-toggle是为谁服务的，其值是选择器-id或者class。这里的值是.navbar-collapse ，意思是这个汉堡按钮点击后类是.navbar-collapse的元素div就会响应。

第二部分，导航栏的具体内容:

具体内容就比较丰富了：

1.直接放文本，ul里面放li即可，如果想把导航栏在右边，加个navbar-right 即可。

2.放搜索框，这里有必要说下，尽量把搜索框放在最后，不然导航栏可能会出现两行。

3.下拉列表框或者下拉按钮 ,直接放在li里面即可

以上有些内容可能有误，如果错误，忘指正。

刚才发现个问题：手机端菜单栏展开后点击空白地方菜单栏不会自动收缩，原生js可以通过监听点击动作实现收缩，但我相信bootstrap肯定封装了更简单的办法，今天太晚了，明天再看怎么回事。

点击链接自动关闭请参考：https://www.cnblogs.com/Wudj/p/9108649.html