三、Flask学习之BootSrap

三、Flask学习之BootSrap

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

1.下载BootSrap

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

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

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

image-20240121095925826

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

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>

效果：

image-20240121101346945

3.导航

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

找到导航条，点击Copy：

image-20240121104419182

效果：

image-20240121104700185

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>

效果：

image-20240121190618388

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

超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)
总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
None （自动）750px970px1170px
.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>

效果：

image-20240121193759607

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

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

效果：

image-20240121194108827

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>

效果：

image-20240121195352753

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>

效果：

image-20240121201525176

9.阴影

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

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

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

效果：
image-20240121201958755

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>

效果：

image-20240121215907885

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/339224.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【目标检测】损失函数：不同损失函数概念及其代码实现

【目标检测】损失函数：不同损失函数概念及其代码实现

本篇文章介绍目标检测中不同的损失函数概念及其代码实现。目标检测主要任务为实现目标的分类与定位&#xff0c;其损失组成如下&#xff1a; 类别/置信度损失&#xff08;分类任务&#xff09;&#xff1a;BCE&#xff0c;FL&#xff0c;QFL&#xff0c;VFL 位置损失&#xff0…
阅读更多...
Spring第七天(AOP)

Spring第七天(AOP)

简介 AOP(Aspect Oriented Programing)面向切面编程&#xff0c;一种编程范式&#xff0c;指导开发者如何组织程序结构 作用 在不惊动原始设计的基础上为其进行功能增强 Spring理念&#xff1a;无入侵式/无侵入式 基本概念 连接点(JoinPoint) : 程序执行过程中的任意位置&a…
阅读更多...
云盘后端分析

云盘后端分析

1.验证码 用的是外面找的 2.发送邮箱验证码 配置邮箱的授权码 我们在发送邮箱的时候&#xff0c;需要把那个值传到数据库中&#xff0c;数据库中有它的状态&#xff0c;我们需要根据状态判断它是注册还是找回密码 我们在发送邮箱之前&#xff0c;先从session里面得到我们验证…
阅读更多...
wayland(xdg_wm_base) + egl + opengles 最简实例

wayland(xdg_wm_base) + egl + opengles 最简实例

文章目录 前言一、ubuntu 下相关环境准备1. 获取 xdg_wm_base 依赖的相关文件2. 查看 ubuntu 上安装的opengles 版本3. 查看 weston 所支持的 窗口shell 接口种类二、xdg_wm_base 介绍三、egl_wayland_demo1.egl_wayland_demo2_0.c2.egl_wayland_demo3_0.c3. xdg-shell-protoco…
阅读更多...
Node开发基础

Node开发基础

1. 概述 1.1 为什么要学习服务器端开发基础 能够和后端程序员更加紧密的配合 网站业务逻辑前置&#xff0c;学习前端技术需要后端技术支撑 扩宽知识视野&#xff0c;能够站在更高的角度审视整个项目 1.2 服务器端开发要做的事情 实现网站的业务逻辑 ---网站登录部分&#…
阅读更多...
[pytorch入门] 2. tensorboard

[pytorch入门] 2. tensorboard

tensorboard简介 TensorBoard 是一组用于数据可视化的工具。它包含在流行的开源机器学习库 Tensorflow 中.但是也可以独立安装&#xff0c;服务Pytorch等其他的框架 可以常常用来观察训练过程中每一阶段如何输出的 安装pip install tensorboard启动tensorboard --logdir<d…
阅读更多...
LeetCode面试题05.06

LeetCode面试题05.06

美好的一天&#xff0c;从力扣开始 王子公主请看题 整数转换。编写一个函数&#xff0c;确定需要改变几个位才能将整数A转成整数B。 示例1: 输入&#xff1a;A 29 &#xff08;或者0b11101&#xff09;, B 15&#xff08;或者0b01111&#xff09;输出&#xff1a;2示例2: 输…
阅读更多...
深度求索开源国内首个 MoE 大模型 | DeepSeekMoE：在专家混合语言模型中实现终极专家专业化

深度求索开源国内首个 MoE 大模型 | DeepSeekMoE：在专家混合语言模型中实现终极专家专业化

文章目录 一、前言二、主要内容三、总结 &#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 一、前言 在大语言模型时代&#xff0c;混合专家模型&#xff08;MoE&#xff09;是一种很有前途的架构&#xff0c;用于在扩展模型参数时管理计算成本。然而&a…
阅读更多...
【算法专栏学习】成贤学院，程序员的福利站到了，判断子序列，经典算法实战。

【算法专栏学习】成贤学院，程序员的福利站到了，判断子序列，经典算法实战。

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…
阅读更多...
使用宝塔面板安装wiki.js详细教程

使用宝塔面板安装wiki.js详细教程

因为在安装过程中遇到了一些问题&#xff0c;花费了很长时间在解决问题上。根据这篇教程可以少踩很多坑。点赞加关注吧。 准备运行环境 Nodejs 在宝塔面板的软件商店中找到nodejs版本管理器并安装。 点击设置&#xff0c;选择一个稳定版安装。 PostgreSQL 官方推荐的数据库是…
阅读更多...
Nginx之负载均衡、静态代理与动态代理配置

Nginx之负载均衡、静态代理与动态代理配置

Nginx之负载均衡配置 文章目录 Nginx之负载均衡配置1. 负载均衡基本配置1. 配置upstream2. 配置location3. 访问 2. Nginx常用负载均衡策略1. 轮询(默认)2. 权重3. ip_hash策略4. 最少连接策略5. 负载均衡其他几个配置 3. 静态代理1. 基于静态在一文件后缀的匹配2. 基于静态资源…
阅读更多...
Python - 深夜数据结构与算法之 高级字符串

Python - 深夜数据结构与算法之 高级字符串

目录 一.引言 二.经典算法实战 1.Longest-Common-Sub-Seq [1143] 2.Edit-Distance [72] 3.Longest-Palindromic-Str [5] 4.Distinct-Sub-Seq [115] 5.Regular-Exp-Match [10] 三.总结 一.引言 上一节介绍了字符串的基本操作&#xff0c;本文介绍字符串更复杂的一些操作…
阅读更多...
YOLOv8改进 | 主干篇 | 低照度图像增强网络SCINet改进黑暗目标检测（全网独家首发）

YOLOv8改进 | 主干篇 | 低照度图像增强网络SCINet改进黑暗目标检测（全网独家首发）

一、本文介绍 本文给大家带来的改进机制是低照度图像增强网络SCINet，SCINet（自校正照明网络）是一种专为低光照图像增强设计的框架。它通过级联照明学习过程和权重共享机制来处理图像，优化了照明部分以提升图像质量。我将该网络集成在YOLOv8的主干上针对于图像的输入进行增…
阅读更多...
BurpSuite Pro 2023.12.1.2下载与破解-最新版BurpSuite Pro

BurpSuite Pro 2023.12.1.2下载与破解-最新版BurpSuite Pro

本文在我的博客地址是&#xff1a;https://h4cker.zip/post/f05ae2e66da503f6383dffe48cdf5bac 上一次BurpSuite的分享还是在2020年 由于CSDN有防盗链&#xff0c;我自己的博客都无法访问这篇博文的图片了 至于为什么再写一次&#xff0c;是因为我看到群里这张图&#xff1a;…
阅读更多...
高效能方法 - 任务清单优先级

高效能方法 - 任务清单优先级

任务清单是有优先级的&#xff0c;首先要尽所能保证A级别的事项完成&#xff0c;或许不能估计B级或者C级&#xff0c;那这结果也是不错的。 博恩崔西在《吃掉那只青蛙》一书中指出&#xff1a;在你决定要做什么&#xff0c;并对其进行排序的时候&#xff0c;你首要解决那些最难…
阅读更多...
腾讯云服务器价格查询，2024更新

腾讯云服务器价格查询，2024更新

腾讯云服务器租用优惠价格表&#xff1a;轻量应用服务器2核2G3M价格62元一年、2核2G4M价格118元一年&#xff0c;540元三年、2核4G5M带宽218元一年&#xff0c;2核4G5M带宽756元三年、轻量4核8G12M服务器646元15个月&#xff1b;云服务器CVM S5实例2核2G配置280.8元一年、2核4G…
阅读更多...
x-cmd pkg | yq - 命令行 YAML处理工具

x-cmd pkg | yq - 命令行 YAML处理工具

目录 简介首次用户支持格式转换友好的显示和操作语法与 jq 类似竞品和相关作品进一步阅读 简介 yq (YAML Query) 是一个轻量级的 YAML、JSON、XML 处理器&#xff0c;主要用于查询和提取 YAML 数据。 本 yq 的包来自 mikefarah/yq 项目&#xff0c;语法类似于 jq 。相比 kisly…
阅读更多...
《WebKit 技术内幕》之八（2）：硬件加速机制

《WebKit 技术内幕》之八（2）：硬件加速机制

2　Chromium的硬件加速机制 2.1　GraphicsLayer的支持 GraphicsLayer对象是对一个渲染后端存储中某一层的抽象&#xff0c;同众多其他WebKit所定义的抽象类一样&#xff0c;在WebKit移植中&#xff0c;它还需要具体的实现类来支持该类所要提供的功能。为了完成这一功能&#x…
阅读更多...
python if条件判断的基础及应用

python if条件判断的基础及应用

当前版本&#xff1a; Python 3.8.4 简介 if 语句是一种用于根据一个或多个条件的结果来执行不同代码块的控制流结构&#xff0c;它会检查给定的条件是否为真。如果条件为真&#xff0c;则执行与之关联的代码块&#xff1b;如果条件为假&#xff0c;则执行与之关联的其他代码块…
阅读更多...
工作小计- RGB相关算子实现

工作小计- RGB相关算子实现

项目中的模型一直都是直接操作NV12的yuv格式数据&#xff0c;这次的模型只支持RGB格式的输入&#xff0c;正好来自己实现对应的算子。 这里记录一下对应算子的实现过程&#xff0c;主要涉及到NV12到RGB的变换&#xff0c;RGB的crop/resize操作&#xff0c;对于数据的Norm/ToFlo…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站