【Web:Bootstrap框架】简单实现理解

希望这篇博客可以让你了解什么是Bootstrap框架框架及其使用，感谢阅读！

Bootstrap

1.Bootstrap框架

Bootstrap是前端开发中比较受欢迎的框架，简洁且灵活。它基于HTML、CSS和JavaScript，HTML定义页面元素，CSS定义页面布局，而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件，用起来简单，粗暴

2.Bootstrap案例

案例：结合Bootstrap框架，实现如下页面
说明：这里我们先做这个页面，后面学习到servlet后，我会写一篇我们自己实现一个简易网页的博客，而这张页面就是我们的封面

划分页面：

我们在实现页面前，肯定要大致了解和划分页面，我们页面最上面是一个：搜索栏；搜索栏下面是一个：轮播图（图片自动切换）；搜索栏下面左下是一个瀑布流，搜索栏右下是两个相同的展示框！

在实现上面案例之前，我们先来了解了解Bootstrap框架使用及给提供的一些样式和组件

2.1 导入Bootstrap框架

1、下载链接

链接：https://pan.baidu.com/s/1jRlbVPW72woloqlo-U9Prg  提取码：4897

下载完成后，解压打开文件夹：
在这里插入图片描述

然后你的目录下会多出：bootstrap3文件夹，这个文件下的文件我们不需要去动它，这些都是bootstrap框架的内部包，都是实现Bootstrap框架所需的一些东西
还会多出一个template文件夹，我们可以看到这个文件下有两个文件，一个是:starter.html；一个是：template.html;template是模板的意思，由于页面要用到Bootstrap3，这个Bootstrap框架，那template.html就是对页面进行设置，还要引入相应的文件

template.html：
template.html就是一个模板页面，我们在使用Bootstrap3做页面的时候，现在有现成的页面：template.html，我们要做的就是复制粘贴模板框架，然后根据我们的业务去更改框架的实现部分，但这个模板有很多注释，粘贴不便，所以template文件夹下的starter.html的去掉了template.html的注释，方便我们使用！

下面，让我们练练手，熟悉熟悉

2.2 用模板第一个bootstrap页面

1、复制 template文件夹下的starter.html 粘贴到你自己文件夹后改名字！
说明： 以下所有的练习栗子，我们都是这样做的，复制 template文件夹下的starter.html 然后粘贴，这就是自己的模板，我们都是在自己的模板下练习的！

starter.html ：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Template</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>
</head>
<body>
  Bootstrap 模版
</body>
<script type="text/javascript" src="../bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="../bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script>
</html>

怎么验证你的框架是否引入成功，在bod里面添加两个div如下：

运行结果如下就成功了，框架是没有问题的！
我们来简单说下这个工作原理啊：我们给上面 div2添加一个了效果：有高度，背景颜色，有边框，有圆角，有内边距等一堆的样式，而我们这里只需要添加一个class="well"；这个 class 就是为Bootstrap框架类选择器而工作的，Bootstrap框架根据这个class类选择器找到页面中元素，然后把 well 这个样式效果实现当前元素上
像上面的 class 添加的样式效果，Bootstrap框架可能有成千多个，我们不需要去背，我们只需要学会查看文档，然后拿过来用就好了：Bootstrap框架中文文档
界面如下：

我们能用到的就是：全局CSS样式和组件

全局CSS样式: 是对HTML中现有的一些标签做了重新的定义,包括:按钮/图片/表单等页面元素
组件: 多个页面元素的组合称为组件

下面我们来用用，试试手

2.3 全局css样式

全局 CSS 样式
设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统

栗子：
我们来打开Bootstrap框架中文文档，点击全局css样式，选择右侧的：按钮如下：
在这里插入图片描述
按钮样式：

我们来使用下Bootstrap框架给我们提供的按钮及样式，复制粘贴上述代码，到我们的模板下body里面：

<h3>"可作为按钮使用的标签"</h3>
<a class="btn btn-default" href="">按钮1</a>
<input class="btn btn-default" type="button" value="按钮2">
<input class="btn btn-default" type="submit" value="按钮3">
<button class="btn btn-default">按钮4</button>
<br>
<a class="btn btn-danger" href="">按钮1</a>
<input class="btn btn-primary" type="button" value="按钮2">
<input class="btn btn-success" type="submit" value="按钮3">
<button class="btn btn-warning">按钮4</button>
<br>
<a class="btn btn-danger btn-lg" href="">按钮1</a>
<input class="btn btn-primary btn-sm" type="button" value="按钮2">
<input class="btn btn-success" type="submit" value="按钮3">
<button class="btn btn-warning btn-xs">按钮4</button>
</body>

运行如下：
在这里插入图片描述

2.4 组件

组件
无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能

下面我以字体图标为栗,为什么叫字体图标呢，因为图标的大小是跟随字体大小动态变化的：

我们来打开Bootstrap框架中文文档，选择上面的：组件如下：
在这里插入图片描述
怎么用，在我们的模板页面写一个 行内元素； 然后把你要用的图标下的代码粘贴复制到你的行内元素，下面我以 span这个行内元素为栗：

运行结果：

虽然结果是出来了，但是不美观，因为图标和我们行内元素的文本部分没有对齐，因为这个字体图标对我们中文的支持不是很好，下面介绍另一个字体图标：
1、点击：Font Awesome 中文网
2、点击图标库

在这里插入图片描述
3、点击你想使用的图标

4、看到使用方法，我们需要的就是复制粘贴：class=“xxxx”，这部分到我们的行内元素里面

那我们随便找一个图标来测试一下，这里我还是用：span 行内元素

运行结果：

下面我们来说说响应式布局

2.5 响应式布局

响应式布局：根据不同的设备显示不同的样式。通俗点：访问网站的时候，我们可以手机访问，也可以用电脑、平板访问，那这个网站就要根据我们访问设备的不同来给用户对应的页面大小！

1、我们来打开Bootstrap框架中文文档，选择上面的：全局CSS样式，选择右侧的栅栏系统：
在这里插入图片描述
2、向下找到：媒体查询

媒体查询：是Bootstrap框架中实现响应式布局的实现方式
怎么实现呢？
上面图中已经把实现方式和参数都给了，我们需要做的就是复制粘贴上面框中的四行代码到我们的模板中，写上对应的参数就好

3、在我们模板 head标签里面加上：style便签，把复制的上述四行代码粘贴进来，写上对应参数

在这里插入图片描述
运行结果：
大家自己运行，改变窗口大小，就会发现窗口改变，窗口颜色样式也会改变！

2.6 栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局

1、我们来打开Bootstrap框架中文文档，选择上面的：全局CSS样式，下拉找到栅格系统
2、实例：几种效果
在这里插入图片描述
3、实现上述效果的代码

列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
container： 内容居中

我们写个栗子来看看，还是写在自己的Bootstrap中，如下：

  <style>
    div>div{
    
    
      border: 1px solid red;
    }
  </style>
</head>
<body>
<!--创建一行两等份-->
<div class="row">
  <div class="col-md-6">占6列</div>
  <div class="col-md-6" >占6列</div>
</div>
<!--创建一行三等份-->
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<!--container：内容居中-->
<div class="container">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<!--列偏移 如果以一行列数不足12列的时候，就可能用到列偏移-->
<div class="row">
  <div class="col-md-8 col-md-offset-2">占8列</div>
</div>
</body>

运行结果：
在这里插入图片描述
说明：container就是让内容相对于窗口长度是居中的，那也就是窗口不论怎么变化，加了container元素内容始终是居中的；列偏移就是当一行列数不足12列时，我们可以让此行列偏移指定列数

2.6 响应式栅格系统

2.6.1 响应式设备

栅格参数：
在这里插入图片描述
我们可以根据上面的不同设备的参数，来自定义不同设备下一行显示的元素个数：

div里面的练习写在我们模板的body里面

<div class="row">
  <!--中等显示器一行6个 pad显示4个  手机显示2个-->
  <div class="col-md-2 col-sm-3 col-xs-6">刘德华</div>
  <div class="col-md-2 col-sm-3 col-xs-6">刘德华</div>
  <div class="col-md-2 col-sm-3 col-xs-6">刘德华</div>
  <div class="col-md-2 col-sm-3 col-xs-6">刘德华</div>
  <div class="col-md-2 col-sm-3 col-xs-6">刘德华</div>
  <div class="col-md-2 col-sm-3 col-xs-6">刘德华</div>
  <div class="col-md-2 col-sm-3 col-xs-6">刘德华</div>
  <div class="col-md-2 col-sm-3 col-xs-6">刘德华</div>
</div>

运行结果：大家自己改变窗口的大小，中等显示器一行6个 pad显示4个手机显示2个

下面我们来说说响应式图片，大家自己先找一个图片，放在和自己模板同目录下

2.6.2 响应式图片

我们来打开Bootstrap框架中文文档，选择上面的：全局CSS样式，下拉找到：响应式图片

1、响应式图片：在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放
用法：<img src="..." class="img-responsive" alt="Responsive image">
2、Bootstrap 版本 3 中还给我们提供了图片样式，我们一起开看看

用法：

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

栗子：
div里面的练习写在我们模板的body里面

<div class="row">
  <!--响应式图片-->
  <div class="col-md-3 col-sm-6" ><img src="1.jpg" class="img-responsive img-rounded" alt=""></div>
  <div class="col-md-3 col-sm-6"><img src="1.jpg" class="img-responsive img-circle" alt=""></div>
  <div class="col-md-3 col-sm-6"><img src="1.jpg" class="img-responsive img-circle" alt=""></div>
  <div class="col-md-3 col-sm-6"><img src="1.jpg" class="img-responsive img-thumbnail" alt=""></div>
</div>

运行结果：
大家自己改变窗口大小，来感受响应式图片及其样式
在这里插入图片描述

2.6.3 响应式组件

我们来打开Bootstrap框架中文文档，选择上面的：组件，右侧找到：缩略图
在这里插入图片描述
Bootstrap 版本 3 中给我们提供了两种缩略图样式：默认样式和自定义样式，下面我们分别看看

1、默认样式

实现：

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

2、自定义样式

实现：

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

栗子：我们把上面的两端代码复制粘贴到我们模板中的 body里面，然后稍作修改，换成我们自己的图片：

<h3>缩略图组件</h3>
<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="1.jpg" alt="...">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="1.jpg" alt="...">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="1.jpg" alt="...">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="1.jpg" alt="...">
    </a>
  </div>
</div>
<h3>自定义缩略图</h3>
<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="1.jpg" alt="...">
      <div class="caption">
        <h3>小姐姐</h3>
        <p>暮光之城女主</p>
        <p><a href="#" class="btn btn-primary" role="button">点赞</a>
          <a href="#" class="btn btn-default" role="button">收藏</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="1.jpg" alt="...">
      <div class="caption">
        <h3>小姐姐</h3>
        <p>暮光之城女主</p>
        <p><a href="#" class="btn btn-primary" role="button">点赞</a>
          <a href="#" class="btn btn-default" role="button">收藏</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="1.jpg" alt="...">
      <div class="caption">
        <h3>小姐姐</h3>
        <p>暮光之城女主</p>
        <p><a href="#" class="btn btn-primary" role="button">点赞</a>
          <a href="#" class="btn btn-default" role="button">收藏</a></p>
      </div>
    </div>
  </div>
</div>

运行结果：
在这里插入图片描述

综上Bootstrap框架框架就介绍到这里，Bootstrap框架就是把常用的样式给我们封装起来，方便使用，下面我们开始利用上面的这些知识来实现案例页面

3. 实现案例

在这里插入图片描述
大家准备好大概10多张图片，我们会用到!
这是我们实现页面需要的素材图片，大家下载后，导入实现页面的目录下：

链接：https://pan.baidu.com/s/1bT-3JO5Yt6zXvYlfM4CTBg 
提取码：1826

1、创建
还是先创建模板：复制template文件夹下的starter.html，粘贴到我们的目录下，然后改名字

xxx.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Bootstrap Template</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>
</head>
<body>
<!--Bootstrap 模版-->
</body>
<script type="text/javascript" src="../bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="../bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script>
</html>

2、代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Template</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--在webapp下添加bts.css文件  然后把                            底下这个也换成：bt3-->
    <link rel="stylesheet" type="text/css" href="../bootstrap3/css/bt3.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>

    <style>
        body {
    
    
            background-color: #2e2e2e;
        }
        /*给导航条设置颜色*/
        .navbar {
    
    
            background-color: black;
            border: none; /*去掉边框*/
            margin-top: 10px;
        }

        /*鼠标移入颜色*/
        .nav.navbar-nav > li > a:hover {
    
    
            color: #ffc600;
        }

        .navbar-brand > img {
    
    
            position: relative; /*相对定位*/
            bottom: 12px;
        }

        form > input {
    
    
            background-color: #383838;
            color: #a9a8a8;
            padding: 10px 20px;
            height: 30px;
            border-radius: 30px;
            border: none;
            position: relative;
            top: 10px;

            outline: none; /*去掉点击后的边框*/
        }
        form > button {
    
    
            background-color: rgba(0, 0, 0, 0);
            border: none;
            color: gray;

            position: relative;
            top: 10px;
            right: 40px;
        }
        /*添加瀑布流样式*/
        .grid-item{
    
    
            width: 200px;/*设置每个元素的宽度为：200px*/
            margin: 0 10px 10px 0;
        }
        /*浏览最多样式*/
        .list-group-item{
    
    
            background-color: black;
            color: #ffc600;
            border: none;
        }
        .list-head{
    
    
            background-color: #ffc600;
            color: black;
        }
        /*给轮播图添加下外边距*/
        #myCarousel{
    
    
            margin-bottom: 10px;
        }
        .well{
    
    
            background-color: black;
            border: none;
            color: #ffc600;
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>
<body>
<!--添加头部，内容居中 -->
<header class="container">
    <!--添加导航条-->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <img alt="Brand" src="images/logo.png">
                </a>
            </div>
            <!--分类列表-->
            <ul class="nav navbar-nav">
                <li><a href="">首页</a></li>
                <li><a href="">手绘</a></li>
                <li><a href="">次时代</a></li>
                <li><a href="">雕刻</a></li>
                <li><a href="">室内设计</a></li>
                <li><a href="">地图编辑</a></li>

                <li>
                    <form action="">
                        <input type="text" placeholder="Search">
                        <button type="submit">
                            <span class="fa fa-search"></span>
                        </button>
                    </form>
                </li>
            </ul>
            <!--右侧列表-->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="">管理员入口</a></li>
            </ul>

        </div>
    </nav>
</header>

<section class="container">
    <!--轮播图开始-->
    <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="images/banner0.jpg" alt="First slide">
                <div class="carousel-caption"></div>
            </div>
            <div class="item">
                <img src="images/banner1.jpg" alt="Second slide">
                <div class="carousel-caption"></div>
            </div>
            <div class="item">
                <img src="images/banner2.jpg" alt="Third slide">
                <div class="carousel-caption"></div>
            </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <!--轮播图结束-->
    <!--创建一行 3：1-->
    <div class="row">
        <div class="col-md-9">
            <!--左侧：瀑布流-->
            <!--瀑布流开始-->
            <div class="grid">
                <div class="grid-item">
                    <a href="">
                        <img class="img-responsive" src="1.jpg" alt="">
                    </a>
                </div>
                <div class="grid-item">
                    <a href="">
                        <img class="img-responsive" src="2.jpg" alt="">
                    </a>
                </div>
                <div class="grid-item">
                    <a href="">
                        <img class="img-responsive" src="3.jpg" alt="">
                    </a>
                </div>
                <div class="grid-item">
                    <a href="">
                        <img class="img-responsive" src="1.jpg" alt="">
                    </a>
                </div>
                <div class="grid-item">
                    <a href="">
                        <img class="img-responsive" src="4.jpg" alt="">
                    </a>
                </div>
                <div class="grid-item">
                    <a href="">
                        <img class="img-responsive" src="2.jpg" alt="">
                    </a>
                </div>
                <div class="grid-item">
                    <a href="">
                        <img class="img-responsive" src="5.jpg" alt="">
                    </a>
                </div>
                <div class="grid-item">
                    <a href="">
                        <img class="img-responsive" src="3.jpg" alt="">
                    </a>
                </div>
                <div class="grid-item">
                    <a href="">
                        <img class="img-responsive" src="5.jpg" alt="">
                    </a>
                </div>
                <div class="grid-item">
                    <a href="">
                        <img class="img-responsive" src="4.jpg" alt="">
                    </a>
                </div>
                <div class="grid-item">
                    <a href="">
                        <img class="img-responsive" src="2.jpg" alt="">
                    </a>
                </div>
                <div class="grid-item">
                    <a href="">
                        <img class="img-responsive" src="1.jpg" alt="">
                    </a>
                </div>
            </div>
            <!--瀑布流结束-->
        </div>
        <div class="col-md-3">
            <!--浏览最多开始-->
            <ul class="list-group">        <!--自定义头部:list-head-->
                <li class="list-group-item list-head">
                    <h4>
                        <span class="fa fa-eye">浏览最多</span>
                    </h4>
                </li>
                <li class="list-group-item">
                    <!-- 左对齐 -->
                    <div class="media">
                        <div class="media-left">
                            <img src="1.jpg" class="media-object" style="width:60px;height: 50px">
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">左对齐</h4>
                            <p>这是一些示例文本...</p>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <!-- 左对齐 -->
                    <div class="media">
                        <div class="media-left">
                            <img src="2.jpg" class="media-object" style="width:60px;height: 50px">
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">左对齐</h4>
                            <p>这是一些示例文本...</p>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <!-- 左对齐 -->
                    <div class="media">
                        <div class="media-left">
                            <img src="3.jpg" class="media-object" style="width:60px;height: 50px">
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">左对齐</h4>
                            <p>这是一些示例文本...</p>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <!-- 左对齐 -->
                    <div class="media">
                        <div class="media-left">
                            <img src="4.jpg" class="media-object" style="width:60px;height: 50px">
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">左对齐</h4>
                            <p>这是一些示例文本...</p>
                        </div>
                    </div>
                </li>
            </ul>
            <!--浏览最多结束-->
            <!--最受欢迎开始-->
            <ul class="list-group">        <!--自定义头部:list-head-->
                <li class="list-group-item list-head">
                    <h4>
                        <span class="fa fa-thumbs-o-up">最受欢迎</span>
                    </h4>
                </li>
                <li class="list-group-item">
                    <!-- 左对齐 -->
                    <div class="media">
                        <div class="media-left">
                            <img src="5.jpg" class="media-object" style="width:60px;height: 50px">
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">左对齐</h4>
                            <p>这是一些示例文本...</p>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <!-- 左对齐 -->
                    <div class="media">
                        <div class="media-left">
                            <img src="2.jpg" class="media-object" style="width:60px;height: 50px">
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">左对齐</h4>
                            <p>这是一些示例文本...</p>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <!-- 左对齐 -->
                    <div class="media">
                        <div class="media-left">
                            <img src="1.jpg" class="media-object" style="width:60px;height: 50px">
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">左对齐</h4>
                            <p>这是一些示例文本...</p>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <!-- 左对齐 -->
                    <div class="media">
                        <div class="media-left">
                            <img src="3.jpg" class="media-object" style="width:60px;height: 50px">
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">左对齐</h4>
                            <p>这是一些示例文本...</p>
                        </div>
                    </div>
                </li>
            </ul>
            <!--最受欢迎结束-->
        </div>
    </div>
</section>
<!--脚-->
<footer class="container">
    <div class="well">
        Copyright @ 2020 vrd.net.cn 京ICP备16053980号-5
        <!--pull-right:效果类似于 float：right-->
        <span class="pull-right">Version 0.1.0</span>
    </div>
</footer>

</body>
<script type="text/javascript" src="../bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="../bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script>
<!--引入和瀑布流相关的文件-->
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.js"></script>

<script>
    /*让上面的轮播图动起来*/
    $('#myCarousel').carousel('cycle')
    /*瀑布流初始化代码*/
    $(".grid").masonry({
    
    
        itemSelector:".grid-item",//告诉框架 选择器是什么
        columnWidth:210//告诉框架 每个元素占得宽度(元素宽度+间距)
    })
    //图片加载完之后，让瀑布流处理一下显示布局
    $(".grid").imagesLoaded().process(function () {
    
    
        //此处代码图片完之后会执行
        $(".grid").masonry("layout");//让瀑布重新计算显示效果
    })
</script>

</html>

完成！