三、Flask学习之BootSrap

Bootstrap 是一款由Twitter团队开发的开源前端框架，它以响应式设计、移动端友好和丰富的组件为特色，为开发者提供了快速构建现代化网站和Web应用的工具。借助其灵活的栅格系统、丰富的UI组件和可定制的样式，Bootstrap成为了广受欢迎的选择，为开发者提供了快速、一致且具有吸引力的用户界面。

1.下载BootSrap

网址：Bootstrap中文网 (bootcss.com)

我这里下载的是v3版本：起步 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)

选择“用于生产环境的 Bootstrap”下载，解压出来：

将解压出来的文件复制到项目的根目录下使用

2.使用BootSrap

在<head>部分加入这行代码：

<!--href是你存放下载好的BootSrap的文件夹-->
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">

然后可以应用BootSrap的样式了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
</head>
<body>
<label>
    <input type="button" class="btn-block" value="提交"><br>
    <input type="button" class="btn-danger" value="提交"><br>
    <input type="button" class="btn-default" value="提交"><br>
    <input type="button" class="btn-primary" value="提交"><br>
    <input type="button" class="btn-success" value="提交"><br>
    <input type="button" class="btn-xs" value="提交"><br>
</label>
</body>
</html>

效果：

3.导航

具体使用可以查看官方文档：组件 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)

找到导航条，点击Copy：

效果：

4.栅格结构

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
    </style>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
</head>
<body>
    <div>
        <div class="col-md-6" style="background-color: orange">.col-md-6</div>
        <div class="col-md-6" style="background-color: pink">.col-md-6</div>
    </div>
</body>
</html>

效果：

官网中提供了四种不同的栅格，分别为:

超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
None （自动）	750px	970px	1170px
`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`

列偏移：应用栅格的时候，如果想让某个栅格往后移几个单位，可以选用此选项：

<div class="col-md-6 col-md-offset-3" style="background-color: orange">.col-md-6</div>

col-md-offset-3是指使用md类型的栅格偏移三个栅格（单位）。

5.container

BootSrap有两种container：

第一种：

<div class="container">
    <div class="col-sm-9">left</div>
    <div class="col-sm-3">right</div>
</div>

这种container是能占用1170px的中间位置。

第二种：

<div class="container-fluid">
    <div class="col-sm-9">left</div>
    <div class="col-sm-3">right</div>
</div>

这种container是能够浮动，但是需要消除浮动，需要再应用一个写好的样式：clearfix

6.面板

组件 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)

代码：

<div class="container-fluid clearfix">
        <div class="col-sm-9">left</div>
        <div class="col-sm-3">
            <div class="panel panel-default">
                <div class="panel-heading">编程学习</div>
                <div class="panel-body">
                    JAVA<br>
                    C/C++<br>
                    Python<br>
                    PHP
                </div>
            </div>
        </div>
    </div>

效果：

官网中还支持多种不同形式的面板，这里以情景效果面板为例：

<div class="panel panel-primary">
    <div class="panel-heading">编程学习</div>
    <div class="panel-body">
        JAVA<br>
        C/C++<br>
        Python<br>
        PHP
    </div>
</div>

效果：

7.分页

代码：

<ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></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="Next"><span aria-hidden="true">»</span></a></li>
</ul>

效果：

8.表单

官网组件 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)提供了多种表单，这里以最基本的为例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <style>
        .account {
            padding: 20px 90px;
            margin-top: 200px;
            border: 1px solid pink;
            border-radius: 5px
        }
    </style>
</head>
<body>
<div class="col-sm-offset-4 col-sm-4 account">
    <h3 style="margin-bottom: 20px;text-align: center;font-weight: bolder">用户登录</h3>
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">用户名</label>
            <input type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"> 我已同意该协议
            </label>
        </div>
        <button type="submit" class="btn btn-primary">登 录</button>
    </form>
</div>
</body>
</html>

效果：

9.阴影

为了让表格看起来更加立体，可以为其应用阴影样式：

box-shadow: 3px 3px 3px #8c8c8c;

四个参数分别为水平方向，垂直方向，模糊距离，颜色

效果：

10.图标

BootSrap支持图标设置，可选择图标有多种，官网均有提供：组件 · Bootstrap v3 中文文档

<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>

虽然官网内置了一部分图标，但是还不够多，所以有一个专门的组件来拓展图标。Font Awesome，一套绝佳的图标字体库和CSS框架 (dashgame.com)，直接下载下来，解压到你项目的目录里就可以，然后引入：

<link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">

然后去网站，找到你喜欢的图标应用就可以了。

11.案例

完整代码（使用时需要把BootSrap、Font Awesome路径替换为你自己对应的存储路径）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">
    <style>
        .navbar {
            border-radius: 0;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <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>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">菜单</a></li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <label>
                        <input type="text" class="form-control" placeholder="Search">
                    </label>
                </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>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
            表单提交
        </div>
        <div class="panel-body">
            <form class="form-inline">
                <div class="form-group">
                    <label for="exampleInputName2">姓名</label>
                    <input type="text" class="form-control" id="exampleInputName2" placeholder="请输入姓名">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail2">学号</label>
                    <input type="text" class="form-control" id="exampleInputEmail2" placeholder="请输入学号">
                </div>
                <button type="submit" class="btn btn-success">
                    <i class="fa fa-save" aria-hidden="true"></i> 提 交
                </button>
            </form>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
            数据库
        </div>
        <div class="panel-body">
            VIP用户
        </div>
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th></th>
                <th>姓名</th>
                <th>学号</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>
                    <a class="btn btn-primary btn-xs">编辑</a>
                    <a class="btn btn-danger btn-xs">删除</a>
                </td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>
                    <a class="btn btn-primary btn-xs">编辑</a>
                    <a class="btn btn-danger btn-xs">删除</a>
                </td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>
                    <a class="btn btn-primary btn-xs">编辑</a>
                    <a class="btn btn-danger btn-xs">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <ul class="pagination">
        <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></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="Next"><span aria-hidden="true">»</span></a></li>
     </ul>
</div>
</body>
</html>

效果：