一个基于flask的web应用诞生 bootstrap框架美化（3）

我将详细讲解“一个基于flask的web应用诞生 bootstrap框架美化（3）”的完整攻略。

本篇攻略主要讲解如何通过使用Bootstrap框架来美化Flask应用程序。

示例1：使用Bootstrap的导航栏

首先，在HTML文件中引入Bootstrap的CSS和JS文件：

<!DOCTYPE html>
<html>
<head>
    <title>Flask Bootstrap Example</title>
    <!-- 引入Bootstrap的CSS -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <!-- 网站logo -->
        <a class="navbar-brand" href="#">Logo</a>
        <!-- 导航链接 -->
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </nav>
    <!-- 引入Bootstrap的JS文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

这是一个使用Bootstrap的导航栏示例，其中包含网站logo和3个导航链接。可以看到，通过添加CSS类名和标签，便可轻松构建一个美观的导航栏。

示例2：使用Bootstrap的表格

在HTML文件中引入Bootstrap的CSS和JS文件后，即可使用Bootstrap的表格。

<!DOCTYPE html>
<html>
<head>
    <title>Flask Bootstrap Example</title>
    <!-- 引入Bootstrap的CSS -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
    <!-- 表格 -->
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <td>3</td>
                <td colspan="2">Larry the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
    <!-- 引入Bootstrap的JS文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

这是一个使用Bootstrap的表格示例，其中包含4列，并且对表格的表头和表格内容进行了分离。

以上就是使用Bootstrap框架美化Flask应用程序的两个示例，通过这些示例，您可以快速开始使用Bootstrap框架并轻松地美化你的Flask应用程序。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：一个基于flask的web应用诞生 bootstrap框架美化（3） - Python技术站