BootStrap-初体验

原创已于 2025-01-20 20:58:30 修改 · 681 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #前端 #html #css

于 2025-01-19 22:17:31 首次发布

BootStrap 专栏收录该内容

3 篇文章

订阅专栏

部署运行你感兴趣的模型镜像

可以说是别人已经帮我们写好的CSS样式

如果我们想要使用一个BootStrap，需要有以下步骤：

下载BootStrap
使用

在页面上引入BootSrap
编写HTML时，按照BootStrap的规定来编写+DIY。

我们学习的时候可以先不将其放到Flask框架里，先在本地开发。等我们本地开发出来之后，再集成到Web里面。下面我们先来进行本地学习。

1.1 创建新项目

使用到的工具:

Python
PyCharm

创建一个新的PythonProject项目，在项目中新建一个static目录，在static目录中新建一个plugins目录，也是我们默认的插件目录。这里列举一些一般会在static目录里创建的目录：

css

img

plugins

同时创建一个新的HTML文件。

1.2 下载 BootStrap

下载地址：下载 Bootstrap · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网

将BootStrap下载并解压到本地，将其拷贝到plugins目录。

1.3 快速引用

在新创建的HTML文件中，在<head></head>中按如下方式引用：

< ! - - 开发版本 - - >

<link rel="stylesheet" href="static/plugins/bootstrap-5.3.0/css/bootstrap.css">

< ! - - 生产版本 - - >

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

请注意：在“/css”之后还要有“/bootstrap.css”。

补充：

1.4 使用示例

在新创建的HTML文件中，在<body></body>中按如下方式引用：

<body>
    <input type="button" value="提交" />
    <input type="button" value="提交" class="btn btn-primary"/>
    <input type="button" value="提交" class="btn btn-success"/>
    <input type="button" value="提交" class="btn btn-danger"/>
</body>

效果图如下：

以上就是我们今天的BootStrap-初体验。

您可能感兴趣的与本文相关的镜像

Python3.8

Conda

Python

Python 是一种高级、解释型、通用的编程语言，以其简洁易读的语法而闻名，适用于广泛的应用，包括Web开发、数据分析、人工智能和自动化脚本