首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Flask中实现Bootstrap时的HTML表格格式

可以通过使用Bootstrap的CSS类来实现。以下是一个示例代码:

代码语言:txt
复制
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    table_data = [
        {'name': 'John', 'age': 25, 'city': 'New York'},
        {'name': 'Jane', 'age': 30, 'city': 'London'},
        {'name': 'Tom', 'age': 35, 'city': 'Tokyo'}
    ]
    return render_template('index.html', table_data=table_data)

if __name__ == '__main__':
    app.run()

在上述代码中,我们定义了一个Flask应用,并在根路由中渲染了一个名为index.html的模板。模板中使用了Bootstrap的CSS类来实现表格格式。

接下来,我们需要创建index.html模板文件,并在其中使用Bootstrap的CSS类来定义表格格式。以下是一个示例代码:

代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
    <title>Flask Bootstrap Table</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>Flask Bootstrap Table</h1>
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody>
                {% for data in table_data %}
                <tr>
                    <td>{{ data.name }}</td>
                    <td>{{ data.age }}</td>
                    <td>{{ data.city }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</body>
</html>

在上述代码中,我们引入了Bootstrap的CSS文件,并在表格中使用了Bootstrap的CSS类来定义表头和表格内容的样式。通过使用Flask的模板引擎,我们可以在模板中使用{% for %}循环语句来遍历table_data列表,并将数据填充到表格中。

这样,当访问Flask应用的根路由时,将会显示一个带有Bootstrap样式的表格,其中包含了table_data列表中的数据。

请注意,以上代码仅为示例,实际应用中可能需要根据具体需求进行适当的修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 领券