基于Boostrap进行网页设计

1. 实验准备

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">

<h2>按钮样式</h2>
<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-dark">黑色</button>

<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，就可以完成一个完整的网页啦。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,445评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,889评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,047评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,760评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,745评论 5赞 367
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,638评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,011评论 3赞 398
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,669评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,923评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,406评论 4赞 320
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,995评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2赞 342

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1赞 92
  • Bootstrap（基础二）
    第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意，在Bootstrap框架中的下拉菜单组件是一个独立的组件，根...
    凛0_0阅读 4,931评论 0赞 66
  • Jump Start Bootstrap 中文版 第3章
    第3章 探索Bootstrap组件 在这一章，我们将开始使用Bootstrap的一些非常有用的HTML组件。诸如按...
    海上名月阅读 923评论 1赞 6
  • bootstrap组件
    一、小图标 1.如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。 实例 2.带有字...
    溺于眼里星河阅读 850评论 0赞 0
  • 安卓和ios设计规范、material design 设计规范
    使用sketch最重要的一点是设计好控件的规范。 为做好设计规范需要对色彩进行编号，比如:color_a”_1，c...
    youyeath阅读 26,113评论 2赞 237