基于Boostrap和Vue设计网页

1.实验准备

熟悉界面设计的原则；
熟悉CSS/javascript的语法和编程；
学习boostrap 教程和Vue.js

2.实验内容

设计某个公司/社团的网站主页，有介绍、新闻、以及其他的展示。

3.实验步骤

一、了解Bootstrap和Vue.js

Boostrap:

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。

Vue.js:

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。
Vue 只关注视图层，采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试。

二、原型设计

首先先对要画的网页进行一个原型设计，由于是公司的主页，因此最主要的功能就是介绍这个公司的业务还有一些新闻，在初步设计后，我的原型图大致为：

image

接着就可以开始尝试用boostrap 教程和Vue.js来实现。

三、实验步骤

1、首先我们在<head>中先引入boostrap和Vue
.js，其中顺序不要变：

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

2、顶端文字跑马灯效果：

image

跑马灯的效果将用Vue.js来实现，在body中用box定义一个滚动框，在这个框中再用divList定义一个滚动文字的列表，并设置宽高等：

    <div id="box" style="overflow:hidden;height:22px;">
    <div id="divList" style="height: 21px;width: 9999px;">
        <div class="news">欢迎访问我公司网页！</div>
        <div class="news">欢迎访问我公司网页！</div>
        <div class="news">欢迎访问我公司网页！</div>
        <!-- 将第一条信息复制 -->
        <div class="news" id="copyDiv">欢迎访问我公司网页！</div>
    </div>
    </div>

然后在CSS样式中，设置news的float和width:

        .news {
        float: left;
        width: 300px;
    }

最后在js中写跑马灯的实现，用定时器timer来计时滚动，判断复制的信息是否到达box的最左边来进行无限循环。

    <script language="javascript" type="text/javascript">
    window.onload = function () {
        var box = document.getElementById('box');
        var divList = document.getElementById('divList');
        var copyDiv = document.getElementById('copyDiv');
        var copyDivW = copyDiv.clientWidth;
        var speed = 10;    //移动速度，值越大速度越慢
        function marquee() {
            if (copyDiv.offsetLeft - box.scrollLeft <= 0) {//判断复制的信息是否到达box的最左边
                box.scrollLeft -= divList.offsetWidth - copyDivW
            } else {
                box.scrollLeft++
            }
        }
        var timer = setInterval(marquee, speed);//设置定时器

    }
</script>

3、导航栏
接着用boostrap来实现一个导航栏，导航栏一般放在页面的顶部。
我们可以使用navbar类来创建一个标准的导航栏，后面紧跟: navbar-expand-xl|lg|md|sm类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。导航栏上的选项可以使用 <ul> 元素并添加 class=navbar-nav类；然后在 <li> 元素上添加 nav-item类，<a> 元素上使用nav-link类；
导航栏可以用bg-dark和navbar-dark来设置导航的样式：

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <a class="navbar-brand" href="#"><img src="img/logo.png" height=40" alt="logo" /></a>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">主页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">介绍</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">新闻</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">展示</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">招聘</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">理念</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">详情</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">登录</a>
            </li>
        </ul>
    </div>
</nav>

其中，navbar-brand类用于显示品牌logo，如果使用图片，可以使用navbar-brand类来设置图片自适应导航栏:

<a class="navbar-brand" href="#"><img src="img/logo.png" height=40" alt="logo" /></a>

效果如图：

image

4、轮播图片：
查阅Boostrap教程，大概了解到有这几个类：

image

依照这些类和教程上给的示例模仿写一个类似的轮播：

    <div id="demo" class="carousel slide" data-ride="carousel">

    <!-- 指示符 -->
    <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
    </ul>

    <!-- 轮播图片 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="img/1.jpg" width="1550px" height="500px">
            <div class="carousel-caption">
            </div>
        </div>
        <div class="carousel-item">
            <img src="img/2.jpg" width="1550px" height="500px">
            <div class="carousel-caption">
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg" width="1550px" height="500px">
            <div class="carousel-caption">
            </div>
        </div>
    </div>
    <!-- 左右切换按钮 -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

实现效果如图：

image

5、网格

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
我们也可以根据自己的需要，定义列数：

image

Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。
网格类
Bootstrap 4 网格系统有以下 5 个类:
.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于
768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
网格系统规则
Bootstrap4 网格系统规则:

网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
使用行来创建水平的列组。
内容需要放置在列中，并且只有列可以是行的直接子节点。
预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
列通过填充创建列内容之间的间隙。这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
网格列是通过跨越指定的 12 个列来创建。例如，设置三个相等的列，需要使用用三个.col-sm-4 来设置。
Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子）而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列。

我们可以结合网格和 Bootstrap4 的.card 与.card-body类来创建一个简单的卡片：

   <div class="pic">
    <div class="row">
        <div class="col-sm-3 col-md-3">
            <div class="card" style="width:300px">
                <img class="card-img-top" src="img/3.png" alt="Card image" style="width:100%">
                <div class="card-body">
                    <h4 class="card-title">全军武器装备采购</h4>
                    <p class="card-text">关于建立装备预研共用技术领域基金类项目快速支持机制（试行）的公告通知</p>
                    <a href="#" class="btn btn-primary">See Profile</a>
                </div>
            </div>
        </div>
        <div class="col-sm-3 col-md-3">
            <div class="card" style="width:300px">
                <img class="card-img-top" src="img/4.png" alt="Card image" style="width:100%">
                <div class="card-body">
                    <h4 class="card-title">人才招聘</h4>
                    <p class="card-text">
                        新起点 更优才<br />
                        中国航天科工2020校园招聘<br />
                        盛装启航！
                    </p>
                    <a href="#" class="btn btn-primary">See Profile</a>
                </div>
            </div>
        </div>

        <div class="col-sm-3 col-md-3">
            <div class="card" style="width:300px">
                <img class="card-img-top" src="img/5.png" alt="Card image" style="width:100%">
                <div class="card-body">
                    <h4 class="card-title">企业对外投资</h4>
                    <p class="card-text">创新对外投资方式，促进国际产能合作，加快培育国际经济合作和竞争新优势</p>
                    <a href="#" class="btn btn-primary">See Profile</a>
                </div>
            </div>
        </div>
    </div>
</div>

实现效果如图：

image

这一块用于展示这个企业的主要业务和人才招聘；

6、折叠

Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。
.collapse 类用于指定一个折叠元素 (实例中的<div>); 点击按钮后会在隐藏与显示之间切换。
控制内容的隐藏与显示，需要在 <a>或<button> 元素上添加data-toggle="collapse" 属性。data-target="#id" 属性是对应折叠的内容 (<div id="demo">)。
注意: <a> 元素上你可以使用 href 属性来代替 data-target 属性:
这里同样结合网格，实现

 <div class="row">
    <div class="col-sm-3 col-md-6">
        <div class="zhedie">
            <div class="card">
                <div class="card-header">
                    <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
                        企业大脑
                    </a>
                </div>
                <div id="collapseTwo" class="collapse" data-parent="#accordion">
                    <div class="card-body">
                        <p><strong>企业大脑</strong>企业大脑的决策分析符合现代企业多维度的管理方式，符合产业延伸的需求，能够在决策效率、经营掌控、战略落地、降本提效、资源调配等方面提供科学的管理信息中心、决策支持系统，使管理者更贴近业务，使管理精细化成为可能。</p>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
                        云端应用工作室
                    </a>
                </div>
                <div id="collapseThree" class="collapse" data-parent="#accordion">
                    <div class="card-body">
                        <p><strong>云端应用工作室</strong>云端应用工作室是一款基于INDICS平台的“企业制造过程支持系统”，支持企业从需求分析、方案设计到售后服务全生命周期的研发制造过程，其中主要功能模块包括业务建模、工程BOM、智能排程、智能运营等，通过打通全链条的业务流程，帮助企业构建模型驱动的研制模式。</p>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <a class="collapsed card-link" data-toggle="collapse" href="#collapseFour">
                        企业驾驶舱
                    </a>
                </div>
                <div id="collapseFour" class="collapse" data-parent="#accordion">
                    <div class="card-body">
                        <p><strong>企业驾驶舱</strong>企业驾驶舱为企业提供经营基础数据、全场景数据指标体系、重点指标预警通知等，是为企业经营管理层提供云化的指挥、决策、控制等功能的商务智能系统。</p>
                    </div>
                </div>
            </div>
            <div id="accordion" class="content1">
                <div class="card">
                    <div class="card-header">
                        <a class="card-link" data-toggle="collapse" href="#collapseOne">
                            企业上云服务站
                        </a>
                    </div>
                    <div id="collapseOne" class="collapse show" data-parent="#accordion">
                        <div class="card-body">
                            <p>
                                <strong>企业上云服务站</strong>为上云企业提供一站式上云服务，为政府推进企业上云工作提供抓手，为智能化改造集成商提供协同服务
                            </p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

实现效果如图：

image

7、链接列表组

要创建一个链接的列表项，可以将 <ul> 替换为 <div> ， <a> 替换 <li>。如果你想鼠标悬停显示灰色背景就添加.list-group-item-action 类
代码如下：

        <div class="col-sm-9 col-md-6">
        <div class="container" style="margin-top:30px">
            <h2>新闻</h2>
            <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action">国资委：两会国企新声第一辑：转型升级高质量发展</a>
                <a href="#" class="list-group-item list-group-item-action">全球首家新冠病毒灭活疫苗临床试验！央企国药中国生物武汉所！</a>
                <a href="#" class="list-group-item list-group-item-action">中国航天科工两位代表现场聆听总书记重要讲话 表示非常温暖 倍感振奋 </a>
                <a href="#" class="list-group-item list-group-item-action">技能人才是制造业转型升级的关键 ——来自中国航天科工的全国人大代表畅谈高技能人才培养</a>
                <a href="#" class="list-group-item list-group-item-action">坚决打赢脱贫攻坚战中的航天科工行动</a>
            </div>



        </div>
    </div>

实现效果如下：

image

8、最后再增加一个页尾，然后完善下就完成了一个公司页面：

    <div class="col-sm-12" style="height:70px;background-color:rgb(201, 201, 201);text-align: center">
    <p>Copyright©2018版权所有 中国航天科工集团有限公司 备案序号:京ICP备05067351号 京公网安备11040102100081号</p>
</div>

页尾效果如图：

image

整个网页最后的实现效果为：

image

[图片上传失败...(image-6307a3-1628321072949)]

image

4.实验心得

1、Boostrap和vue.js提供的组件很丰富而且实现起来很容易，值得深入学习。
2、vue.js还需要再深入学习下，在这里只用到了一点点。

基于Boostrap和Vue设计网页