我刚开始接触网页是在电脑上,而并非手机,所以,之前编写网页的时候,也一直遵循的是进行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>
这就是一个完整的导航栏了。