基于Boostrap进行网页设计

作者: 未央花语 | 来源:发表于2019-05-16 19:05 被阅读0次

基于Boostrap进行网页设计
2019/5/13-人机交互实验十
基于Bootstrap进行网页设计
在Bootstrap开发框架中使用bootstrap-datep
实现一个响应式布局的网站——以NASA官网为例(未完)
美工切图设计技巧分享
优秀网页设计师必须掌握的七项基本技能
CSS 响应设计-网格视图
响应式网页设计
客户端（RTMP系列四）

1. 实验准备

熟悉界面设计的原则；
熟悉CSS/javascript的语法和编程；
学习boostrap 教程
https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html

2. 实验内容

设计MOCOM实验室的主页，有实验室介绍、科研信息展示等；

3.实验环境

JetBrains WebStorm 2018.3.5 x64 ： html+css，bootstrap;

4.实验步骤

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

1、导航栏

导航栏一般放在页面的顶部。
我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。
导航栏上的选项可以使用 <ul> 元素并添加 class="navbar-nav" 类；然后在 <li> 元素上添加 .nav-item 类， <a> 元素上使用 .nav-link 类；
导航栏可以固定在头部或者底部，我们使用 .fixed-top 类来实现导航栏的固定：

<nav class="navbar navbar-expand-sm bg-white navbar-light fixed-top">
    <a class="navbar-brand" href="#"><img src="images/logo.png" height=40" alt="logo"/></a>
    <ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link" href="#home">主页</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#introduce">实验室介绍</a>
    </li>
        <li class="nav-item">
            <a class="nav-link" href="#science">科研展示</a>
        </li>
    </ul>
    <form class="form-inline">
        <input class="form-control" type="text" placeholder="Search">
        <button class="btn btn-info" type="button">Search</button>
    </form>
    <a href="#" class="denglu btn btn-info" role="button">登录</a>
    <a href="#" class="zhuce btn btn-info" role="button">注册</a>
</nav>

设置导航栏品牌/logo:
.navbar-brand 类用于高亮显示品牌/Logo;
如果使用图片，可以使用 .navbar-brand 类来设置图片自适应导航栏

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

导航栏.png

导航栏的表单 <form> 元素使用 class="form-inline" 类来排版输入框与按钮：

<form class="form-inline">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-info" type="button">Search</button>
</form>

导航栏表单.png

2、按钮

Bootstrap 4 提供了不同样式的按钮。

<div class="container">

<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-link">链接</button>
</div>

按钮样式.png

经过基本导航栏的设置和按钮的学习，加上之前学习的css排版，我们可以设计出一个最终版导航栏：

最终导航栏.png

3、网格系统

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

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

网格系统规则

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

我们使用网格系统创建一个top-content:

<section id="home" class="top_cont_outer">
    <div class="top_cont_inner">
        <div class="container">
            <div class="top_content">
                <div class="row">
                    <div class="col-lg-5 col-sm-7">
                        <div class="top_left_cont">
                            <h3>厦门大学</h3>
                            <h2>移动计算与数据分析</h2>
                            <p> 我们的目标“做好的研究，学有用的技术，拥抱最美好的未来”。
                                "A good start is half way to success."  </p>
                            <a href="#introduce" class="learn_more2">Learn more</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

在<div class="top_cont_inner">放置一张图片，美观页面

.top_cont_inner{
background:url(../images/back1.png) no-repeat right bottom;
background-size: 50% 90%;
}

对LEARN MORE设置鼠标悬停，以及链接；

>a.learn_more2{
    font-family: 微软雅黑;
    display:block;
    font-size:16px;
    color:#ffffff;
    background:#49b5e7;
    width:178px;
    height:46px;
    line-height:46px;
    border-radius:3px;
    text-align:center;
    font-family:微软雅黑;
    text-transform:uppercase;
    font-weight: 600;
}
a.learn_more2:hover{
    background:#222222;
}

最终，我们的top-content的页面显示：

top-content.png

4、折叠

Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。
.collapse 类用于指定一个折叠元素 (实例中的 <div>); 点击按钮后会在隐藏与显示之间切换。
控制内容的隐藏与显示，需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 属性。
data-target="#id" 属性是对应折叠的内容 (<div id="demo">)。
注意: <a> 元素上你可以使用 href 属性来代替 data-target 属性:
默认情况下折叠的内容是隐藏的，你可以添加 .show 类让内容默认显示:
注意: 使用 data-parent 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。

<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>
           <p><strong>MOCOM的研究点包括:</strong><br>
            ▲模式识别：基于移动节点（汽车、行人等）的GPS数据，分析行为模式；发现城市生活的规律，并开发智能应用；<br>
            ▲分类和预测：基于主流深度学习平台(PyTorch,Tensorflow)和大规模轨迹数据，预测道路状态(流量和速度)；<br>
            ▲大数据平台：大数据的架构和数据分析方法，包括Hadoop、Spark等平台下的推荐、数据统计和分析等；<br>
            ▲ 深度学习和图嵌入：基于图卷积对路网(Road Network)进行网络嵌入，并开发新型算法；<br>
          </p>
        </div>
      </div>
    </div>
    <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>智能交通(Intelligent Transportation System)</strong>可以有效地利用现有交通设施、减少交通负荷和环境污染、保证交通安全、提高运输效率。 车载自组织网络又称“车联网”，它利用先进的信息和网络技术将车辆、行人、道路和路边设施等集成为一个有机的信息系统，以提供车辆安全、 交通控制、综合 信息和互联网接入等服务。</p>
          <p><strong>MOCOM的研究点包括:</strong><br>
            ▲基于大规模出租车轨迹的出租车路径推荐算法，出租车和乘客的预约匹配算法；<br>
            ▲车联网环境下的新型交通运输和出行方式研究，包括智能弹性公交和公车(Public Vehicle)调度算法；<br>
            ▲车联网环境下的消息分发、数据收集，内容查询，共享机制等研究，并进行网络模拟；<br>
          </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>边沿计算(Edge Computing)</strong>是云计算模式的延伸。边沿计算区别于那些将计算集中在远端或“天边”的云计算技术，在“地面”或网络边缘部署具有较强存储、 计算和通信能力的“边沿节点”，使得网络计算从网络的中心扩展到网络的边缘。</p>
          <p><strong>MOCOM的研究点包括:</strong><br>
            ▲在车联网环境下对边沿节点的数据进行过滤，分析本地数据并做预处理；<br>
            ▲基于边沿节点的高效查询处理、和事件检测；边沿节点与云平台的交互、协同与融合机制；<br>
            ▲城市计算框架下的边沿计算的典型应用场景，基于边沿计算的智能交通系统和路网<br>
          </p>
      </div>
    </div>
  </div>
</div>

最终的折叠效果：

折叠效果.png

5、轮播

关于轮播的类和描述：

轮播.png

代码：

<div id="demo" class="content3 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="images/数据分析.jpg" height="400" width="800"/></div>
            <div class="carousel-item">
                <img src="images/che.jpg" height="400" width="800"/></div>
            <div class="carousel-item">
                <img src="images/yun.png" height="400" width="800"/></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>

最终效果：

轮播图效果.png

6、标题、文本和链接卡片

我们可以在头部元素上使用 .card-title 类来设置卡片的标题。
.card-text 类用于设置卡片正文的内容。 .card-link 类用于给链接设置颜色。

<div class="container">
  <h2>标题、文本和链接</h2>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">Some example text. Some example text.</p>
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link">Another link</a>
    </div>
  </div>
</div>

卡片样例：

卡片样例.png

在卡片的基础上，加上轮播图的效果，就可以做轮播卡片啦：

<div class="science0">
<section id="science">
    <div class="container">
        <h2>科研成果</h2>
        <div id="demo1" class="content4 carousel slide" data-ride="carousel">
            <!-- 指示符 -->
            <ul class="carousel-indicators">
                <li data-target="#demo1" data-slide-to="0" class="active"></li>
                <li data-target="#demo1" data-slide-to="1"></li>
                <li data-target="#demo1" data-slide-to="2"></li>
            </ul>

            <!-- 轮播图片 -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <div class="keyan3">
                        <div class="keyan container">
                            <h5>轨迹数据的挖掘和可视化</h5>
                            <div class="card">
                                <div class="card-body">
                                    <p class="card-text">轨迹数据就是时空环境下，通过对一个或多个移动对象运动过程的采样所获得的数据信息，包括采样点位置、采样时间、速度等，这些采...</p>
                                    <a href="#" class="card-link">更多</a>
                                </div>
                            </div>
                        </div>
                        <div class="keyan2 container">
                            <h5>打车推荐</h5>
                            <div class="card">
                                <div class="card-body">
                                    <p class="card-text"> 以手机为代表的移动智能终端已经成为人们生活之中不可缺少的一部分。为了缓解“打车难”的问题，手机打车软件应运而生... </p>
                                    <a href="#" class="card-link">更多</a>
                                </div>
                            </div>
                        </div>
                        <div class="keyan1 container">
                            <h5>车载网络数据收集 </h5>
                            <div class="card">
                                <div class="card-body">
                                    <p class="card-text">车载自组织网络(Vehicular Ad-hoc Network，VANET)又称“车载网络”或“车联网”，是利用先进的信息和网络技术，将车辆、行人、道路...</p>
                                    <a href="#" class="card-link">更多</a>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="keyan3">
                            <div class="keyan container">
                                <h5>直播流媒体技术</h5>
                                <div class="card">
                                    <div class="card-body">
                                        <p class="card-text">项目将研究当前的直播流媒体平台技术，包括： easyDarwin 流媒体服务器的配置、使用 ； 移动...</p>
                                        <a href="#" class="card-link">更多</a>
                                    </div>
                                </div>
                            </div>
                            <div class="keyan2 container">
                                <h5>Xiamen Taxi Dataset</h5>
                                <div class="card">
                                    <div class="card-body">
                                        <p class="card-text">The Xiamen taxi trajectory datasets consist one-month trajectory data of almost 5,000 taxicabs in Xiamen... </p>
                                        <a href="#" class="card-link">更多</a>
                                    </div>
                                </div>
                            </div>
                            <div class="keyan1 container">
                                <h5>WebGIS 地图展示 </h5>
                                <div class="card">
                                    <div class="card-body">
                                        <p class="card-text"> “WebGIS ”技术研究    研究基于ArcGis的地理信息的创建、地图共享、分析等技术。    将基于ArcG...</p>
                                        <a href="#" class="card-link">更多</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="keyan3">
                            <div class="keyan container">
                                <h5>叫车需求预测</h5>
                                <div class="card">
                                    <div class="card-body">
                                        <p class="card-text">本次报告介绍叫车需求预测的相关内容，了解在未来一定的时间段和地区范围内的用户轿车的需求数量，是平衡出租车服务的关键...</p>
                                        <a href="#" class="card-link">更多</a>
                                    </div>
                                </div>
                            </div>
                            <div class="keyan2 container">
                                <h5>城市车辆感知</h5>
                                <div class="card">
                                    <div class="card-body">
                                        <p class="card-text"> 移动传感和通信技术的最新进展引发了利用移动传感器网络作为大规模和细粒度城市传感的解决方案。这种感知模式通常被称为机会感知... </p>
                                        <a href="#" class="card-link">更多</a>
                                    </div>
                                </div>
                            </div>
                            <div class="keyan1 container">
                                <h5>快速使用Linux </h5>
                                <div class="card">
                                    <div class="card-body">
                                        <p class="card-text">本次报告主要简单地介绍如何安装以及使用Linux，以及特别的Linux使用案例如使用make指令、使用shell脚本、使用ssh指令等...</p>
                                        <a href="#" class="card-link">更多</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            <!-- 左右切换按钮 -->
            <a class="carousel-control-prev" href="#demo1" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#demo1" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>
        </div>
    </div>
</section>
</div>

再稍微对这个div进行CSS排版
最终效果：

科研成果.png

7、图片卡片

我们可以给 <img> 添加 .card-img-top（图片在文字上方）或 .card-img-bottom（图片在文字下方来设置图片卡片：

<div class="container">
  <h2>图片卡片</h2>
  <p>图片在头部 (card-img-top):</p>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%">
    <div class="card-body">
      <h4 class="card-title">John Doe</h4>
      <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
  </div>
<div>

图片卡片样例：

图片卡片.png

我们可以通过图片卡片制作名片。

最后，给网页加一个footer，就可以完成一个完整的网页啦。

基于Boostrap进行网页设计
1. 实验准备熟悉界面设计的原则；熟悉CSS/javascript的语法和编程；学习boostrap 教程h...
2019/5/13-人机交互实验十
引言 -基于Boostrap进行网页设计环境用vs code进行编辑html文件具体过程实验题目 2.1：...
基于Bootstrap进行网页设计
一、前言 1、实验目的：熟悉界面设计的原则；熟悉CSS/javascript的语法和编程；学习bootstr...
在Bootstrap开发框架中使用bootstrap-datep
在基于Boostrap的Web开发中，往往需要录入日期内容，基于Boostrap的插件中，关于日期的录入可以使用b...
实现一个响应式布局的网站——以NASA官网为例(未完)
响应式响应式网页设计是一种解决问题的途径，它建议设计和开发应该根据用户行为和环境（基于屏幕大小，平台和方向）进行...
美工切图设计技巧分享
在网页美工切图设计之前，我们先基于ps进行新建文件设置，在设置的时候需要注意以下几点： 1.一定要做好网页宽度的设...
优秀网页设计师必须掌握的七项基本技能
网页设计既是一门科学也是一门艺术。网页设计工作一半基于正确的编程和设计技巧，另一半则基于是否对美与不美有着直...
CSS 响应设计-网格视图
什么是网格视图?很多网页都是基于网格设计的，这说明网页是按列来布局的。使用网格视图有助于我们设计网页。这让我们向...
响应式网页设计
1.响应式网页设计的定义响应式Web设计（Responsive Web Design）简称：RWD，基于HTML...
客户端（RTMP系列四）
客户端设计本项目为满足多平台监控需求，设计了Linux、Android和网页客户端。其中网页客户端基于JWp...