导航栏及导航按钮（三明治按钮）

我刚开始接触网页是在电脑上，而并非手机，所以，之前编写网页的时候，也一直遵循的是进行pc端的开发，那么，如果我们想在移动端查看网页的时候，在pc端上的网页是否能显示呢？当然可以，可是这样会造成一个特殊的情况，就是，网页于我们pc端上所看到的页面也些区别，一些板块的位置改变了，这就造成了网页不美观，更加严重的（比如编写网页的人排版只适合pc端），会导致页面中的一些标签等重叠，就显得不美观，因此，就推出了移动端。
像编写移动端和pc端两个页面可以使用多种方法：
1、比如media属性，我们可以编写一张pc端网页和一张移动端网页，然后用media，即媒体查询进行分辨率设置，让两张不同的网页在不同分辨率的情况下进行显示。
2、用bootstrap进行页面布局，我接下来着重要讲解的就是如何用bootstrap制作出美观的移动端。
当我们用手机查看一些页面的时候，是不是会发现，本来我在pc端上看到的导航和手机的不一样，并且多了一个按钮，当我点击按钮的时候，我在pc端上看到的导航上的ul就显示了。
pc端：

移动端：

上面的效果就是我们用手机浏览和pc浏览是的效果。

接下来，我们就来制作一下移动端的效果。因为使用bootstrap制作，因此，我们需要先引入bootstrap的文件 href=”http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css”

接下来，我们定义一个块，将之命名为navbar，即导航（bootstrap中的命名），然后我们添加一个按钮，即button

<div class="navbar-header">         <!--navbar-toggle是控制按钮横线 collaspsed是响应折叠插件             data-toggle="collapse"是button折叠控件 指向id为navbar的内容 没有这个属性 缩放后单击button就失效了             data-target指切换到哪一个元素    aria-expanded="false"初始化控件   -->                               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">            <span class="sr-only">Toggle navigation</span><!--sr-only 保证屏幕阅读器正确读取且不会影响 UI 的视觉呈现-->            <!--下面的span数量就是按钮中有几条横线-->            <span class="icon-bar"></span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>        </button>        <a class="navbar-brand" vbar</a> `  </div>

另外要写明的是navbar-header是bootstrap中的导航栏，因此，这是必不可少的一个属性，然后，我们要为导航添加内容了

<!--让导航按钮中的data-target="#navbar-menu"指向这里的id-->    <div id="navbar-menu" class="collapse navbar-collapse">        <ul class="nav navbar-nav">            <li class="active"><a href="#">Home</a></li>            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Page one <b class="caret"></b></a>                <ul class="dropdown-menu" aria-expanded="false">                     <!--dropdown-menu是下拉菜单效果-->                    <li>1</li>                    <li>2</li>                    <li>3</li>                </ul>            </li>            <li><a href="#">Page Two</a></li>        </ul>    </div></nav>

这就是一个完整的导航栏了。