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

我刚开始接触网页是在电脑上，而并非手机，所以，之前编写网页的时候，也一直遵循的是进行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">                                
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">

            <span class="sr-only">Toggle navigationspan>
            
            <span class="icon-bar">span>
            <span class="icon-bar">span>
            <span class="icon-bar">span>
        button>
        <a class="navbar-brand" vbara>
 `
  div>

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

    <div id="navbar-menu" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Homea>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"> 
                    
                    <li>1li>
                    <li>2li>
                    <li>3li>
                ul>
            li>
            <li><a href="#">Page Twoa>li>
        ul>
    div>
nav>

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