当前位置：首页 > ai >正文

Python前端系列(三)

ai 2025/6/20 14:15:05

Python前端系列— BootStrap

BootStrap前言
- 核心特点
- 版本演进
BootStrap
- 1.1 快速上手
- 1.2 容器container
- 1.3 响应式布局
- 1.4 栅格
- 案例：表单
- - 补充:栅格偏移量
- 1.5 按钮
- 1.6 表单
- 案例：登录界面
- - 版本一：
  - 版本二：优化增加内容
- 1.7 导航栏
- - 导航条样式内容分析
  - 嵌入JS文件(动效引入)
  - 细节补充
  - 其他样式
- 1.8 表格
- - 直接复制网页上的源码样式
  - 美化1:
  - 美化2：利用组件图标代替文字
  - 美化3：
  - 美化4：
- 1.9 面板
- 案例：面板+表格+栅格
- 1.10 分页
- 1.11 媒体与案例
- 案例整合：博客首页

BootStrap前言

Bootstrap 是一个流行的开源前端框架，由 Twitter 团队开发并维护，现由社区持续更新。它主要用于快速构建 响应式、移动优先 的网站和 Web 应用。以下是关于 Bootstrap 的详细介绍：

核心特点

响应式设计
- 自动适配不同设备（电脑、平板、手机），通过 栅格系统（Grid System） 实现灵活的页面布局。
- 基于 CSS3 的媒体查询（Media Queries）调整元素排列。
预定义组件
- 提供现成的 UI 组件，如导航栏、按钮、表单、卡片、模态框、轮播图等，减少重复代码。
CSS 工具类
- 通过实用工具类（Utility Classes）快速调整边距、颜色、字体等样式（如 mt-3、text-center）。
JavaScript 插件
- 内置 jQuery 插件（如折叠菜单、弹出框、工具提示等），无需手动编写复杂交互逻辑。
定制化
- 支持通过 Sass 变量和 Mixin 修改主题颜色、字体等，满足个性化需求。

版本演进

Bootstrap 3：早期版本，支持响应式，依赖 jQuery。
Bootstrap 4（主流）：升级 Flexbox 布局，优化组件，仍依赖 jQuery。
Bootstrap 5（最新）：移除 jQuery 依赖，改用纯 JavaScript，新增实用工具类和现代化组件。

总的来说，BootStrap就是别人写好的一堆CSS样式，下面是不同版本下的BootStrap的中文官网，里面有 使用手册以及文件下载：

https://v3.bootcss.com/
https://v4.bootcss.com/
https://v5.bootcss.com/

但是其中v3的中文文档说明的最清楚，所以这里先使用v3进行学习

进入下图中的网站，并下载：
在这里插入图片描述
得到的是一个zip压缩文件：

解压缩后的文件目录如下：

BootStrap

1.1 快速上手

本地测试

首先在Pycharm中创建一个项目，并将刚刚下载并解压缩的文件 复制到项目目录中，只要在项目目录下就行，任意一个位置就好，这里放在了项目根目录下

其次，在创建的html文件中加入链接，注意这里的链接位置，在本地测试中，以创建的html文件所在位置为基准

<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">     
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">

最后，在官网文档中，找到所需的样式，直接复制到自己所需要修改的html文件中即可
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css"><link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body><input class="btn btn-primary" type="button" value="提交" ><input class="btn btn-success" type="button" value="提交" ><a class="btn btn-primary">点击跳转</a>
</body>
</html>

在这里插入图片描述

Flask项目中引用BootStrap

首先利用Pycharm创建一个Flask项目，并且将下载并解压缩的BootStrap文件移动至static 文件目录下

其次，在templates目录下创建Html文件，并且加入连接

    <link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.css"><link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.min.css">

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.css"><link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body><a class="btn btn-danger">移动</a>
</body>
</html>

运行项目，输入网址，查看结果：

说明：

在实际链接文件时，有两个文件bootstrap.css和bootstrap.min.css本质上他们都是一样的，只不过 bootstrap.min.css是压缩过的，bootstrap.css没有被压缩，因此，随便引入那个文件，都不会影响后面使用的语法
```
    <link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.css"><link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
```

1.2 容器container

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">
</head>
<body><div class="container" style="background-color:lightblue">中国</div><div class="container-fluid" style="background-color:red">中国</div>
</body>
</html>

在这里插入图片描述
通过查看属性可以知道，
container-fluid如图所示：container-fluid是没有宽度限制的，但是container宽度是750px

container其实就是如下图所示：这里有 响应式布局 的问题，也就是 浏览器窗口必须大于768px才行
在这里插入图片描述
总结：

container是居中宽度，且窗口必须大于768px才会两边留白
container-fluid没有限制，就是占据一整行
两者都是 存在内边距的

1.3 响应式布局

所谓的响应式布局，就是根据设备上的屏幕大小，自动的调整布局

<style>.mine{height:100px;background-color:red;}/* <980 */@media (max-width:980px){.mine{background-color:pink;}}/* <780 */@media (max-width:780px){.mine{background-color:lightgreen;}}
</style>

<div class="mine">6666</div>

上面的示例：当窗口小于780px，呈现浅绿色、780-980px之间呈现粉色，大于980px呈现红色

1.4 栅格

栅格是用来帮助我们做布局的，它将一行分成12等分(float:left)

lg, >1200左右展示；<1200，则块级一个人占一行。

<div class="clearfix" style="border:1px solid red"><div class="col-lg-8" style="background-color:red">左边</div><div class="col-lg-4" style="background-color:pink">右边</div>
</div>

md, >992左右展示；<992，则块级一个人占一行。

<div class="clearfix" style="border:1px solid red"><div class="col-md-8" style="background-color:red">左边</div><div class="col-md-4" style="background-color:pink">右边</div>
</div>

sm, >768左右展示；<768，则块级一个人占一行。

<div class="clearfix" style="border:1px solid red"><div class="col-sm-8" style="background-color:red">左边</div><div class="col-sm-4" style="background-color:pink">右边</div>
</div>

xs，始终左右展示、

<div class="clearfix" style="border:1px solid red"><div class="col-xs-8" style="background-color:red">左边</div><div class="col-xs-4" style="background-color:pink">右边</div>
</div>

注意：
由于栅格布局时浮动的，因此，在父级标签中加上BootStrap中写好的clearfix来清除浮动的影响

案例：表单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">
</head>
<body><div style="width:400px;border:1px solid red" ><div class="clearfix"><div class="col-xs-3">用户名：</div><div class="col-xs-9"><input type="text"></div></div><div class="clearfix"><div class="col-xs-3">密码</div><div class="col-xs-9"><input type="password"></div></div><div class="clearfix"><div class="col-xs-3"></div><div class="col-xs-9"><input type="submit" value="登录" class="btn btn-primary"></div></div></div></body>
</html>

在这里插入图片描述
注意：

这里用到这个BottStrap中一个新的样式类 class="btn btn-primary"，主要是提供按钮修饰

补充:栅格偏移量

前面的案例中存在这么一部分代码：

<div class="clearfix"><div class="col-xs-3"></div><div class="col-xs-9"><input type="submit" value="登录" class="btn btn-primary"></div>
</div>

这里一行 前3个栅格是空缺的，没有占据内容，目的是为了让登录按钮和前面的输入框齐平，但是BootStrap中为我们提供的 栅格偏移，class="col-xs-3 col-xs-offset-3"，这样就可以少写几行代码：

<div class="clearfix"><div class="col-xs-3 col-xs-offset-3"><input type="submit" value="登录" class="btn btn-primary"></div>
</div>

两者的效果是一样的
在这里插入图片描述

1.5 按钮

BootStrap中的按钮样式可以为 <a>、<button> 或 <input> 元素添加按钮类（button class），即可使用 Bootstrap 提供的样式。若有需要，可以自己去查一下官网说明：以下截取说明文档中的部分
在这里插入图片描述

input和button标签的等价形式写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">
</head>
<body><input class="btn btn-default" type="button" value="点我"><button class="btn btn-default" type="button">点我</button><input class="btn btn-primary" type="submit" value="点我"><button class="btn btn-primary" type="submit">点我</button></body>
</html>

在这里插入图片描述

设置按钮的尺寸

<a class="btn btn-danger btn-lg">点我</a>
<a class="btn btn-danger">点我</a>
<a class="btn btn-danger btn-sm">点我</a>
<a class="btn btn-danger btn-xs">点我</a>

在这里插入图片描述

设置块级按钮-占一整行

<!-- 设置按钮为块级按钮-占一整行 在末尾加上 btn-block  -->
<div style="width:300px;border:1px solid #dddddd;padding:30px"><h3>用户登录</h3><div>.....</div><a class="btn btn-danger btn-xs btn-block">点点我</a>
</div>

在这里插入图片描述
综合

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">
</head>
<body><input class="btn btn-default" type="button" value="点我"><button class="btn btn-default" type="button">点我</button><input class="btn btn-primary" type="submit" value="点我"><button class="btn btn-primary" type="submit">点我</button><!--设置按钮的尺寸大小--><a class="btn btn-danger btn-lg">点我</a><a class="btn btn-danger">点我</a><a class="btn btn-danger btn-sm">点我</a><a class="btn btn-danger btn-xs">点我</a><!-- 设置按钮为块级按钮 在末尾加上 btn-block  --><div style="width:300px;border:1px solid #dddddd;padding:30px"><h3>用户登录</h3><div>.....</div><a class="btn btn-danger btn-xs btn-block">点点我</a></div><div style="margin:30px 20px"><a class="btn btn-danger btn-lg">点我</a><a class="btn btn-danger">点我</a><a class="btn btn-danger btn-sm">点我</a><a class="btn btn-danger btn-xs">点我</a></div></body>
</html>

在这里插入图片描述

1.6 表单

form-control修饰类
```
<input type="text">
```
```
<input type="text" class="form-control">
```
在加上修饰之后，点击输入框，样式就有了变化

垂直样式的表单
先查阅官方说明文档：如下图所示
在这里插入图片描述

<style>.box1{width:500px;padding:20px;border:1px solid #dddddd;}
</style>

<div class="box1"><form><div class="form-group"><label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div><div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></div><div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p></div><div class="checkbox"><label><input type="checkbox"> Check me out</label></div><button type="submit" class="btn btn-default">Submit</button></form>
</div>

在这里插入图片描述

水平样式的表单

<style>.box1{width:500px;padding:20px;border:1px solid #dddddd;}
</style>

    <!--    水平排列 ，设置了响应式布局，当浏览器宽度小于一定范围，就会变成上下布局--><div class="box1"><form class="form-horizontal"><div class="form-group"><label for="inputEmail3" class="col-sm-2 control-label">Email</label><div class="col-sm-10"><input type="email" class="form-control" id="inputEmail3" placeholder="Email"></div></div><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">Password</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="Password"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><div class="checkbox"><label><input type="checkbox"> Remember me</label></div></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-default">Sign in</button></div></div></form></div>

水平排列，设置了响应式布局，当浏览器宽度小于一定范围，就会变成上下布局
在这里插入图片描述

小结：

表单部分使用了很多的修饰比如:class="form-control"、class="form-group"、class="form-horizontal"、以及class="col-sm-2 control-label"等，再看官方说明文档或者前面代码的时候，注意一下

案例：登录界面

版本一：

实际再使用BootStrap中，都是先确定一个大体框架
然后从官方的说明文档中复制一些样式，并根据需求填充到对应区域，同时根据实际需要进行一些修改

最后运行结果有：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css"><style>.box{width:400px;min-height:100px;  /* 设置最小高度为100px */margin: 100px auto 0 auto;border:1px solid #dddddd;padding:0px 20px 20px 20px;}.box h2{text-align:center;}</style>
</head>
<body><div class="box"><h2>用户登录</h2><form><div class="form-group"><label for="user">用户名</label><input type="text" class="form-control" id="user" placeholder="请输入用户名"></div><div class="form-group"><label for="pwd">密码</label><input type="password" class="form-control" id="pwd" placeholder="请输入密码"></div><button type="submit" class="btn btn-primary">登 录</button></form></div></body>
</html>

在这里插入图片描述

版本二：优化增加内容

在实际登录界面上，不仅需要输入密码、用户名，还有选取角色、输入验证码，发送短信验证码等。实际的结果如下图所示：

验证码部分就照着前面用户名和密码的样式写：

其中class = row的作用是：就是让验证栏的那一侧能够和使用情况下的文本输入框保持垂直方向的对齐

若是使用常规的 clearfix撑起浮动效果，那么就会如下图所示:

原因在于："row"使得左右外边距向外扩展了15px，与栅格哪里padding内边距的15px正好抵消了
下拉框角色选取的时候，依旧从官方的说明文档中寻找，并且做响应修改

最后的结果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css"><style>.box{width:400px;min-height:100px;  /* 设置最小高度为100px */margin: 100px auto 0 auto;border:1px solid #dddddd;padding:0px 20px 20px 20px;}.box h2{text-align:center;}</style>
</head>
<body><div class="box"><h2>用户登录</h2><form><div class="form-group"><label for="role">角色</label><select id="role" class="form-control"><option>管理员</option><option>开发</option><option>测试</option></select></div><div class="form-group"><label for="user">用户名</label><input type="text" class="form-control" id="user" placeholder="请输入用户名"></div><div class="form-group"><label for="pwd">密码</label><input type="password" class="form-control" id="pwd" placeholder="请输入密码"></div><div class="form-group"><label for="code">验证码</label><div class="row"><div class="col-xs-7"><input type="password" class="form-control" id="code" placeholder="请输入验证码"></div><div class="col-xs-5"><img src = "" style="width:133px;height:33px;border:1px solid #dddddd"></div></div></div><div class="form-group"><label for="sms">短信验证码</label><div class="row"><div class="col-xs-7"><input type="password" class="form-control" id="sms" placeholder="短信验证码"></div><div class="col-xs-5"><input type="button" class="btn btn-default btn-block" value="发送验证码" disabled="disabled"></div></div></div><button type="submit" class="btn btn-primary">登 录</button><span style="color:red;">用户名或密码错误</span></form></div></body>
</html>

在这里插入图片描述

1.7 导航栏

在BootStrap中给我们预留了很多导航栏的样式，在组件一栏中，选择右侧的导航条：
在这里插入图片描述

我们选择下图中的这个样式，复制到自己的HTML文件中
在这里插入图片描述

导航条样式内容分析

复制完之后，可以看到整体的结构如下
其中，我们看到整体的导航条布局时整体铺满的(class="container-fluid")，如下图所示：
若是想做成水平居中，只要将class="container-fluid"改成class="container"即可
接着再往内部看，首先是这个模块，这个模块其实是为了进行响应式布局的，当浏览器的窗口小于一定尺寸的时候，就会显示这种布局
接着看导航条左侧的内容，下图中导航条左侧内容所在不同颜色的方框对应相应的html代码所在的颜色线框。里面实际上是一个无序的列表<ul>
其次就是样式类active代表的是什么？class = active，修饰那个标签，当打开页面时，默认就是那个导航内容所在的部分颜色加深！！！，例如下图所示：
再者，再细看导航栏左侧的下拉显示菜单Dropdown部分：下拉显示是以列表的形式组织的，其中要看到分割线也是列表的一个部分，列表中又有一个<a>标签实现点击跳转
然后，再看一下导航栏的搜索框，搜索框这里的本质是一个表单，里面是一个输入框加上按钮，对应部分如下图所示：当然不需要的时候，可以直接删除。
最后，再对应看一下导航条的右侧，其实右侧和左侧差不多，本质上都是一些列表的嵌套+<a>标签的跳转，因此就不多细说了，具体看图即可：这里我根据自己的需求做了一些标动，大家也可以根据实际的项目需求进行修改

嵌入JS文件(动效引入)

如果我们直接复制，实际的HTML页面里，点击没有动效，这是因为缺少JS依赖

那么下面我们就引入这个JS文件：

首先进入 jquery 官网，网址如链接：jquery 官网地址

点击 Download，进入下载页面
选择下面的未压缩版本，如下图的红线红框部分

这样子就找到了源码页面，我们直接全选+复制
并粘贴到一个新建的文件文本中，注意后缀名是.js，如果是记事本记得修改后缀名，这里取名叫"jquery.js" ，并放在项目根目录下的 js 文件夹下
最后在HTML文件boy标签的尾部加入下面这段语句，注意文件路径以及文件名要和自己项目里的文件对应
```
<script src="js/jquery.js"></script>
<script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>
```
最后的效果

响应式布局的效果如下：

细节补充

如果正常复制过来的话，边界其实是有一个圆角的，如下图所示：

在这里插入图片描述
如果想要消除这个圆角，就在最外层的标签上加上 style = "border-radius:0" ，如下图所示：

这样就可以消灭圆角

其他样式

BootStrap中还提供导航条的不同形式，如下图中的：固定在顶部，固定在底部、反差色导航条，具体的可以去官方文档查阅：
在这里插入图片描述

在这里插入图片描述

代码：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">测试部门</a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li><a href="#">Link <span class="sr-only">(current)</span></a></li><li class="active"><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">登录</a></li><li><a href="#">注册</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">个人信息 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">姓名</a></li><li><a href="#">职业</a></li><li><a href="#">手机号</a></li><li role="separator" class="divider"></li><li><a href="#">退出</a></li></ul></li></ul></div></div>
</nav><div class="container" style="height:3000px;background-color:lightblue"></div><script src="js/jquery.js"></script>
<script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</body>
</html>

在这里插入图片描述

1.8 表格

接下来，主要说一下BootStrap中的表格样式，另外可能会扩展一些图标样式：

首先，BootStrap中关于表格相关的官方文档位置如下图所示：
在这里插入图片描述
我们找到比较常用的带边框的表格

这里我们看到，这个下面给的代码不全，我们直接进入也页面复制这个样式，具体步骤如下：

直接复制网页上的源码样式

首先，直接选择按下 F12或者鼠标右击选择"检查" ，进入下面的页面：
在这里插入图片描述

其次，我们鼠标点击下图红线框，类似鼠标的按钮
在这里插入图片描述

然后，在页面中选择我们需要复制过去的样式，如下图所示：当我们鼠标点击我们想要的区域时，下面样式源码区域就会提示该区域对应的标签在哪里：
在这里插入图片描述
最后，选择对应的标签，鼠标右键：选择copy -> Copy outHTML，最后粘贴到自己需要的地方即可

在上面复制完需要的表格样式之后，实际的呈现效果如下图：这里我们 将表格放入了前面所说的class=container容器之中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">
</head>
<body>
<div class="container"><div class="bs-example" data-example-id="bordered-table"><table class="table table-bordered"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table></div>
</div>
</body>
</html>

在这里插入图片描述

美化1:

我们在表格的第一列加上一个<a>标签，可以点击跳转，同时在表格 后面再加上一列，可以进行编辑和删除的操作，并且利用前面所讲的按钮内容对<a>标签进行优化
在这里插入图片描述

<div class="container"><div class="bs-example" data-example-id="bordered-table"><table class="table table-bordered"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th><th>操作</th></tr></thead><tbody><tr><th scope="row">1</th><td><a href="https://www.baidu.com/">Mark</a></td><td>Otto</td><td>@mdo</td><td><a class="btn btn-primary btn-xs" href="https://www.baidu.com/">编辑</a><a class="btn btn-danger btn-xs"href="https://www.baidu.com/">删除</a></td></tr><tr><th scope="row">2</th><td><a href="https://www.baidu.com/">Jacob</a></td><td>Thornton</td><td>@fat</td><td><a class="btn btn-primary btn-xs" href="https://www.baidu.com/">编辑</a><a class="btn btn-danger btn-xs"href="https://www.baidu.com/">删除</a></td></tr><tr><th scope="row">3</th><td><a href="https://www.baidu.com/">Larry</a></td><td>the Bird</td><td>@twitter</td><td><a class="btn btn-primary btn-xs" href="https://www.baidu.com/">编辑</a><a class="btn btn-danger btn-xs"href="https://www.baidu.com/">删除</a></td></tr></tbody></table></div>
</div>

在这里插入图片描述

美化2：利用组件图标代替文字

我们再BootStrap官网上找到组件，定位到字体图标一栏，如下图所示
在这里插入图片描述
利用前面复制网页样式源码的方法拷贝上面红线框的两个图标，并且粘贴到对应的HTML文件中：

<div class="container"><div class="bs-example" data-example-id="bordered-table"><table class="table table-bordered"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th><th>操作</th></tr></thead><tbody><tr><th scope="row">1</th><td><a href="https://www.baidu.com/">Mark</a></td><td>Otto</td><td>@mdo</td><td><a class="btn btn-primary btn-xs" href="https://www.baidu.com/"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a><a class="btn btn-danger btn-xs"href="https://www.baidu.com/"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a></td></tr><tr><th scope="row">2</th><td><a href="https://www.baidu.com/">Jacob</a></td><td>Thornton</td><td>@fat</td><td><a class="btn btn-primary btn-xs" href="https://www.baidu.com/"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a><a class="btn btn-danger btn-xs"href="https://www.baidu.com/"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a></td></tr><tr><th scope="row">3</th><td><a href="https://www.baidu.com/">Larry</a></td><td>the Bird</td><td>@twitter</td><td><a class="btn btn-primary btn-xs" href="https://www.baidu.com/">编辑</a><a class="btn btn-danger btn-xs"href="https://www.baidu.com/">删除</a></td></tr></tbody></table></div></div>

在这里插入图片描述

美化3：

我们还可以再表格的上方加上按钮，实现新建，批量导入，以及导出操作
我们可以利用前面的学习的按钮自己手动实现，当然BootStrap中也为我们提供了按钮组，如下图所示：

在这里插入图片描述
实际代码如下图所示：

这一部分的代码如下：

<div style="margin:10px 0;"><a class="btn btn-success">新建</a><a class="btn btn-info">批量导入</a><a class="btn btn-warning">导出</a><div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">新建</button><button type="button" class="btn btn-info">批量导入</button><button type="button" class="btn btn-default">导出</button></div></div>

最终效果
在这里插入图片描述

美化4：

我们还需要在表格上方的右侧加上搜索的表单，同样先去BootStrap官方说明文档中找样式：
在这里插入图片描述

在这里插入图片描述

部分对应代码：

<div style="float:right"><form class="form-inline"><div class="form-group"><input type="email" class="form-control" id="exampleInputEmail3" placeholder="请输入关键字"></div><button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></form></div>

最终效果：
在这里插入图片描述

1.9 面板

同样的，我们在BootStrap中找到面板属性
在这里插入图片描述
同时，这个面板也可以和按钮一样，改变标题得颜色

带表格的面板，直接从网页中复制源码：
在这里插入图片描述
代码：

<div style="width:400px"><div class="panel panel-default"><div class="panel-heading">Panel heading without title</div><div class="panel-body">Panel content</div></div><div class="panel panel-success"><div class="panel-heading">Panel heading without title</div><div class="panel-body">Panel content</div></div><div class="panel panel-default"><!-- Default panel contents --><div class="panel-heading">Panel heading</div><div class="panel-body"><p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nullased consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullamid dolor id nibh ultricies vehicula ut id elit.</p></div><!-- Table --><table class="table"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table></div>
</div>

实际效果：
在这里插入图片描述

案例：面板+表格+栅格

这个案例是这样的：

在container居中显示的过程中，使用栅格将页面分成两部分
左侧占8份，里面添加带表格的面板
右侧占4份，里面是普通的面板
两个面板的标题都是字体图标+文字，如下图所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css"><style>.panel-body .item{display:block;padding:5px 0;}</style></head>
<body>
<div class="container clearfix"><div class="col-md-8"><div class="panel panel-default"><div class="panel-heading"><span style="margin-right:5px" class="glyphicon glyphicon-th-list" aria-hidden="true"></span>最新申请列表</div><div class="panel-body"><p>若有疑问，请及时联系管理员</p></div><table class="table"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table></div></div><div class="col-md-4"><div class="panel panel-success"><div class="panel-heading"><span style="color:red;font-size:18px;margin-right:5px" class="glyphicon glyphicon-fire" aria-hidden="true"></span>24小时热门</div><div class="panel-body"><a class="item" href="#">高考了</a><a class="item" href="#">放假了</a><a class="item" href="#">选专业</a></div></div><div class="panel panel-primary"><div class="panel-heading">24小时热门</div><div class="panel-body"><a class="item" href="#">高考了</a><a class="item" href="#">放假了</a><a class="item" href="#">选专业</a></div></div></div>
</div>
</body>
</html>

在这里插入图片描述

1.10 分页

同样在BootStrap中给我们提供了分页的样式，如下图所示：
在这里插入图片描述
我们选择下面页面的样式，并且直接从网页复制HTML样式到自己的工程中

复制到HTML文件中

实际效果如下：

这里我们针对 样式中的字体图标进行修改，将上一页和下一页的字体图标，改成用文字代替：
在这里插入图片描述

<ul class="pagination"><li class="disabled"><a href="#" aria-label="Previous">上一页</a></li><li class="active"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Previous">下一页</a></li>
</ul>

在这里插入图片描述

添加到前面的案例中，在左侧面板下面添加分页样式
在这里插入图片描述

<div class="container clearfix"><div class="col-md-8"><div class="panel panel-default"><div class="panel-heading"><span style="margin-right:5px" class="glyphicon glyphicon-th-list" aria-hidden="true"></span>最新申请列表</div><div class="panel-body"><p>若有疑问，请及时联系管理员</p></div><table class="table"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table></div><ul class="pagination" style="margin:0"><li class="disabled"><a href="#" aria-label="Previous">上一页</a></li><li class="active"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Previous">下一页</a></li></ul></div><div class="col-md-4"><div class="panel panel-success"><div class="panel-heading"><span style="color:red;font-size:18px;margin-right:5px" class="glyphicon glyphicon-fire"aria-hidden="true"></span>24小时热门</div><div class="panel-body"><a class="item" href="#">高考了</a><a class="item" href="#">放假了</a><a class="item" href="#">选专业</a></div></div><div class="panel panel-primary"><div class="panel-heading">24小时热门</div><div class="panel-body"><a class="item" href="#">高考了</a><a class="item" href="#">放假了</a><a class="item" href="#">选专业</a></div></div></div>
</div>

在这里插入图片描述

1.11 媒体与案例

BootStrap中的媒体对象如下图所示：
在这里插入图片描述
同样的，我们直接在页面上找到我们想要的样式，直接复制到自己的文件中

在这里插入图片描述

<div class="container"><div class="media"><div class="media-left"><a href="#"><img class="media-object" data-src="holder.js/64x64" alt="64x64"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xOTc1OWRkYWZiOSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE5NzU5ZGRhZmI5Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40MjI5ODg4OTE2MDE1NjIiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"data-holder-rendered="true" style="width: 64px; height: 64px;"></a></div><div class="media-body"><h4 class="media-heading">Media heading</h4>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Craspurus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputatefringilla. Donec lacinia congue felis in faucibus.</div></div><div class="media"><div class="media-left"><a href="#"><img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xOTc1OWRkYWZiOSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE5NzU5ZGRhZmI5Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40MjI5ODg4OTE2MDE1NjIiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+" data-holder-rendered="true" style="width: 64px; height: 64px;"></a></div><div class="media-body"><h4 class="media-heading">Media heading</h4>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</div></div><div class="media"><div class="media-left"><a href="#"><img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xOTc1OWRkYWZiOSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE5NzU5ZGRhZmI5Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40MjI5ODg4OTE2MDE1NjIiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+" data-holder-rendered="true" style="width: 64px; height: 64px;"></a></div><div class="media-body"><h4 class="media-heading">Media heading</h4>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</div></div><div class="media"><div class="media-left"><a href="#"><img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xOTc1OWRkYWZiOSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE5NzU5ZGRhZmI5Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40MjI5ODg4OTE2MDE1NjIiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+" data-holder-rendered="true" style="width: 64px; height: 64px;"></a></div><div class="media-body"><h4 class="media-heading">Media heading</h4>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</div></div>
</div>

最后的效果如下：
在这里插入图片描述

案例整合：博客首页

最后，我们将前面的容器、栅格、按钮、面板、分页、导航条、媒体对象组合，形成一个比较成熟的博客首页
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css"><style>.panel-body .item {display: block;padding: 5px 0;}</style>
</head>
<body>
<nav class="navbar navbar-default navbar-inverse"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">测试部门</a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li><a href="#">Link <span class="sr-only">(current)</span></a></li><li class="active"><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">登录</a></li><li><a href="#">注册</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">个人信息 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">姓名</a></li><li><a href="#">职业</a></li><li><a href="#">手机号</a></li><li role="separator" class="divider"></li><li><a href="#">退出</a></li></ul></li></ul></div></div>
</nav><div class="container"><div class="col-md-8"><div class="media"><div class="media-left"><a href="#"><img class="media-object" data-src="holder.js/64x64" alt="64x64"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xOTc1OWRkYWZiOSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE5NzU5ZGRhZmI5Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40MjI5ODg4OTE2MDE1NjIiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"data-holder-rendered="true" style="width: 64px; height: 64px;"></a></div><div class="media-body"><h4 class="media-heading">Media heading</h4>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Craspurus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputatefringilla. Donec lacinia congue felis in faucibus.</div></div><div class="media"><div class="media-left"><a href="#"><img class="media-object" data-src="holder.js/64x64" alt="64x64"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xOTc1OWRkYWZiOSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE5NzU5ZGRhZmI5Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40MjI5ODg4OTE2MDE1NjIiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"data-holder-rendered="true" style="width: 64px; height: 64px;"></a></div><div class="media-body"><h4 class="media-heading">Media heading</h4>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Craspurus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputatefringilla. Donec lacinia congue felis in faucibus.</div></div><div class="media"><div class="media-left"><a href="#"><img class="media-object" data-src="holder.js/64x64" alt="64x64"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xOTc1OWRkYWZiOSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE5NzU5ZGRhZmI5Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40MjI5ODg4OTE2MDE1NjIiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"data-holder-rendered="true" style="width: 64px; height: 64px;"></a></div><div class="media-body"><h4 class="media-heading">Media heading</h4>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Craspurus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputatefringilla. Donec lacinia congue felis in faucibus.</div></div><div class="media"><div class="media-left"><a href="#"><img class="media-object" data-src="holder.js/64x64" alt="64x64"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xOTc1OWRkYWZiOSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE5NzU5ZGRhZmI5Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40MjI5ODg4OTE2MDE1NjIiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"data-holder-rendered="true" style="width: 64px; height: 64px;"></a></div><div class="media-body"><h4 class="media-heading">Media heading</h4>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Craspurus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputatefringilla. Donec lacinia congue felis in faucibus.</div></div><ul class="pagination"><li class="disabled"><a href="#" aria-label="Previous">上一页</a></li><li class="active"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Previous">下一页</a></li></ul></div><div class="col-md-4"><div class="panel panel-success"><div class="panel-heading"><span style="color:red;font-size:18px;margin-right:5px" class="glyphicon glyphicon-fire"aria-hidden="true"></span>24小时热门</div><div class="panel-body"><a class="item" href="#">高考了</a><a class="item" href="#">放假了</a><a class="item" href="#">选专业</a></div></div><div class="panel panel-primary"><div class="panel-heading">24小时热门</div><div class="panel-body"><a class="item" href="#">高考了</a><a class="item" href="#">放假了</a><a class="item" href="#">选专业</a></div></div></div></div><script src="js/jquery.js"></script>
<script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</body>
</html>