之前写了一个纯CSS的捕鱼猎人仿写页面,还是很容易发现没有媒体查询和完整的响应式页面体系,HTML和CSS能够完成的事情还是有限的。现在来看看对应的Bootstrap版本应该如何入手。首先,先下载最新的bootstrap包,并在文档中使用它,这里为方便起见,我直接引用相应的cdn文件;然后来看一下使用Bootstrap完成页面编码的难点,第一就是不同屏幕大小对应的不同显示,使用Bootstrap
中的.hidden-xs
类可以完成这部分内容,第二的话就是JavaScript
的多选项卡切换(这些其实都不算难点…只能说是相对需要付出努力的东西),第三的话就是我在之前的博客写到的使用jQuery实现图片的展开和收起;说完这些,最后可以进行代码分析了~
关于第一个问题,我举出以下代码为例,即可展示Bootstrap
中常用的响应式设计的编码:
<!-- 只在PC端显示 -->
<div class="banner hidden-xs">
<img src="images/banner.jpg">
</div>
<!-- 只在移动端显示 -->
<div class="banner-mobile visible-md visible-xs">
<img src="images/banner-mobile.png">
</div>
这段代码应该属于Bootstrap
的典型应用之一,针对不同设备产生不同的行为。使用的时候也是简单粗暴,对不同的设备对应的代码加上hidden-**
和visible-**
即可实现响应式设计。
在这里我顺便说一下,响应式和自适应的区别:
- 响应式设计(Responsive Design):建立一个网页,通过
CSS Media Query
和Content-Based Breakpoint
等技术来改变网页的大小以适应不同分辨率的屏幕。 - 自适应设计(Adaptive Design):为不同类别的设备建立不同的网页,检测到设备分辨率大小后调用响应的网页。
从以上定义看出区别了吗?在响应式设计中网页和屏幕分辨率是一对多的关系,一份代码中对应了多种分辨率的相应解决方案;而在自适应设计中,网页和屏幕分辨率是一一对应的关系,每一份代码对应一种分辨率,同时也因此,在只针对某一类或某几类分辨率设计响应网页大小的时候,自适应设计可以减少载入等待的时间、提高网页的响应速度。更多具体分析可见知乎-响应式和自适应的区别。
至于第二个问题,JavaScript
实现选项卡的切换,首先考虑使用<ul>
存储选项卡标题,使用不同id的<div>
存储标题对应选项。然后再对其加入JavaScript
操作,以下我给出我自己写的渣渣代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab 切换</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #333;
}
a:hover {
text-decoration: underline;
color: #1E1478;
}
#menu {
display: block;
width: 500px;
height: 300px;
margin: 20px;
background-color: #ddd;
}
#tab {
display: block;
overflow: hidden;
}
#tab li a{
display: inline-block;
float: left;
padding: 10px;
}
#tab a:hover,
#tab a.selected {
margin-bottom: -3px;
text-decoration: none;
background-color: #ccc;
border-bottom: 3px solid #ccc;
}
.tab-content {
display: none;
height: 249px;
margin-top: -3px;
padding: 5px;
border: 3px dashed #fff;
}
.news-list li{
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="menu">
<ul id="tab">
<li><a href="#" class="selected">新闻</a></li>
<li><a href="#">活动</a></li>
<li><a href="#">公告</a></li>
</ul>
<div id="menu-content">
<div class="tab-content" style="display: block">
<ul class="news-list">
<!-- 新闻列表 -->
<li><a href="#">[攻略]盘点那些你不得不知的《捕鱼猎人》玩法技巧</a></li>
<li><a href="#">[攻略]盘点那些你不得不知的《捕鱼猎人》玩法技巧</a></li>
<li><a href="#">[攻略]盘点那些你不得不知的《捕鱼猎人》玩法技巧</a></li>
</ul>
</div>
<div class="tab-content">
<ul class="news-list">
<!-- 活动列表 -->
<li><a href="#">[活动]《捕鱼猎人》新浪媒体女神节礼包 限量领取</a></li>
<li><a href="#">[活动]《捕鱼猎人》新浪媒体女神节礼包 限量领取</a></li>
<li><a href="#">[活动]《捕鱼猎人》新浪媒体女神节礼包 限量领取</a></li>
</ul>
</div>
<div class="tab-content">
<ul class="news-list">
<!-- 公告列表 -->
<li><a href="#">[公告]3D手游《捕鱼猎人》首测开启 下载体验赢iPhone7</a></li>
<li><a href="#">[公告]3D手游《捕鱼猎人》首测开启 下载体验赢iPhone7</a></li>
<li><a href="#">[公告]3D手游《捕鱼猎人》首测开启 下载体验赢iPhone7</a></li>
</ul>
</div>
</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<script>
window.onload = function () {
var tab = document.getElementById("tab");
var links = tab.getElementsByTagName("a");
var menu = document.getElementById("menu-content");
var items = menu.getElementsByTagName("div");
for (var i = 0; i < links.length; i ++) {
links[i].index = i;
links[i].onclick = function () {
for (var j = 0; j < items.length; j ++) {
links[j].className = "";
items[j].style.display = "none";
}
this.className = "selected";
items[this.index].style.display = "block";
// 防止点击标题返回顶端
return false;
};
}
};
</script>
</body>
</html>
这里注意到我加了一句return false;
来防止锚点回到默认定位。本来我是没有注意到这个问题的,但是我设计页面的时候,发现每次点击列表标题就会回到顶端,也是困扰了我一段时间,后来才知道是因为我的超链接里面的href
属性都是设置的href="#"
,而#默认是页面顶端的锚点,所以每次我点击列表标题的时候都会默认回到页面顶端,添加了那句代码之后就没有问题了~
至于第三个难点,可以移步到我的另一篇博客jQuery实现图片的展开与收起来看,这里就不再赘述了。
到目前为止,Bootstrap设计网页的难点已经基本上描述完了,代码资源我会尽快上传,各位有空给我挑个刺互相学习。加油~