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文件中，并对部分代码进行定制化修改，如下图所示
在这里插入图片描述
效果如下

相关阅读:
商城免费搭建之java商城 java电子商务Spring Cloud+Spring Boot+mybatis+MQ+VR全景+b2b2c
LeetCode 888. Fair Candy Swap
PHP8中final关键字的应用-PHP8知识详解
MongoDB聚合运算符：$lte
软考-高级-信息系统项目管理师教程第四版【第19章-配置与变更管理-思维导图】
计算机毕业设计基于SpringBoot大学生创新创业项目管理系统的设计与实现 Javaweb项目 Java实战项目前后端分离文档报告代码讲解安装调试
六石管理学：水平不高，照抄就好
从日志读取关键数据，按照相关日期进行数据分析
阿加犀AI应用案例征集活动持续进行中！
MySQL的基本查询语句

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