【Python Web】Flask框架（四）Bootstrap的使用及案例

最新推荐文章于 2024-04-17 14:12:11 发布

原创

最新推荐文章于 2024-04-17 14:12:11 发布 · 1.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#flask #bootstrap #前端

文章目录

- Bootstrap的使用及案例

Bootstrap的使用及案例

注意这里我们使用的是Bootstrap3
进入Bootstrap3使用手册

先将样式表导入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap3/css/bootstrap.css">
</head>
<body>

导航条

进入Bootstrap3使用手册,点击组件，然后右边找到导航条，复制这一串代码，粘贴到body标签内

在这里插入图片描述

即可得到如下效果

栅格系统

https://v3.bootcss.com/css/#grid

把整体划分了12格
分类

非响应式

        <div class="col-xs-6" style="background-color: red">1</div>
        <div class="col-xs-6" style="background-color: green">2</div>

特点：无论如何修改页面大小，其相对不变
在这里插入图片描述
2. 响应式

后面三个为响应式
在这里插入图片描述

特点：当屏幕宽度不同，会做出不同的响应

在这里插入图片描述

列偏移

         <div class="col-sm-offset-2 col-lg-6" style="background-color: red">1</div>

在这里插入图片描述

container

自己写网站的时候，前端页面的修改不可避免。无论用什么框架，都无法避免要用到container。在h5出现之前，我们用的最频繁的html标签是div，span等，可以看到目前主流的css框架，比如bootstrap，用到这样的语义化标识，container是为了分块，更好的设计。

在这里插入图片描述

加上container会居中显示， container-fluid会平铺

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

效果如下

面板

以下面板即用了Bootstrap的导航和栅格系统，面板，媒体对象，分页进行构建的

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap3/css/bootstrap.css">
</head>
<body>

<div class="navbar navbar-default">
    <div class="container-fluid">
        <!-- 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