【Django】开源前端库bootstrap，常用

news2025/4/7 21:39:26

文章目录

- 下载bootstrap源文件到本地项目
- 引入bootstrap文件

官网：https://www.bootcss.com/
V4版本入口：https://v4.bootcss.com/
V5版本入口：https://v5.bootcss.com/

这里使用成熟的V4版本，中文文档地址：https://v4.bootcss.com/docs/getting-started/introduction/

下载bootstrap源文件到本地项目

在这里插入图片描述
https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js
https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js
以上链接打开后，文件另存为即可

引入bootstrap文件

<!doctype html>
<html lang="zh-CN">
    <head>
        <!-- 必须的 meta 标签 -->
        <meta charset="utf-8">
        <meta name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap 的 CSS 文件 -->
        <link rel="stylesheet" href="./static/antapp/bootstrap/bootstrap.min.css">
        <title>Hello, world!</title>
    </head>
    <body>
        <h1>Hello, world!</h1>

        <table class="table">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
        <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->

        <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
        <script src="./static/antapp/bootstrap/jquery.min.js"></script>
        <script src="./static/antapp/bootstrap/bootstrap.bundle.min.js"></script>

    </body>
</html>