python web开发(四): Bootstrap

1.初步了解

别人已经写好的CSS样式，我们可以直接引用

下载
Link-BootStrap
解压，并放入到当前项目中
引用

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

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

head>
<body>
    <input type="button" value="原始按钮">
    <input type="button" value="bootstrap-1" class="btn btn-primary">
    <input type="button" value="bootstrap-2" class="btn btn-success">
    <input type="button" value="bootstrap-3" class="btn btn-danger">
    <input type="button" value="bootstrap-4" class="btn btn-danger btn-xs">
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

效果如下
在这里插入图片描述

2. 小试牛刀

构建一个导航界面

进入bootstrap文档
在这里插入图片描述

将代码拷贝到html文件中，并对部分代码进行定制化修改，如下图所示
在这里插入图片描述
效果如下

相关阅读:
mysql常见错误
计算机毕业设计Java重工教师职称管理系统(源码+系统+mysql数据库+lw文档）
Elasticsearch启动后自动退出
Docker基本操作三（容器相关命令二）
【常用图像增强技术，Python-opencv】
AI落地制造业：智能机器人应具备这4种能力
C语言第四章第2节用if语句实现选择结构学习导案
【设计模式】单例模式 Singleton Pattern
机器学习硬件十年：性能变迁与趋势
工程云平台源码建筑工地劳务实名制、危大工程监管平台源码

原文地址：https://blog.csdn.net/orangerfun/article/details/131179035