前端小白系列——Bootstrap重现捕鱼猎人页面

最新推荐文章于 2022-09-12 05:08:01 发布

丨小确幸丨

最新推荐文章于 2022-09-12 05:08:01 发布

阅读量466

点赞数

分类专栏：前端 bootstrap javascript 文章标签： bootstrap 响应式

本文链接：https://blog.csdn.net/Small_Wchen/article/details/75110382

版权

javascript 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

bootstrap

3 篇文章 0 订阅

订阅专栏

之前写了一个纯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设计网页的难点已经基本上描述完了，代码资源我会尽快上传，各位有空给我挑个刺互相学习。加油~

丨小确幸丨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端小白系列——Bootstrap重现捕鱼猎人页面

之前写了一个纯CSS的捕鱼猎人仿写页面，还是很容易发现没有媒体查询和完整的响应式页面体系，HTML和CSS能够完成的事情还是有限的。使用Bootstrap设计页面涉及到的难点主要是针对不同的分辨率设置不同的显示，另外这个页面还涉及到JS选项卡切换和简单的jQuery动画，总体来说页面设计比较简单。
复制链接

扫一扫

专栏目录