Bootstrap学习-bootstrap渲染表单+bootstrap导航栏_bootstrap-vue-next 导航效果-优快云博客

本文介绍了如何使用Bootstrap进行表单渲染和创建响应式导航栏。对于表单，强调了添加role='form'、使用.form-group和.form-control等步骤。而在导航栏部分，讲解了创建默认导航栏的步骤，包括添加.navbar、.navbar-default等类，并展示了如何实现响应式，通过.navbar-toggle和.data-target实现导航栏在不同设备上的折叠效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.使用Bootstrap渲染表单

20170605：发现自己写的渲染注册表单的页面隔了半个月自己都不认识了，好记性不如烂笔头，参考http://www.runoob.com/bootstrap/bootstrap-forms.html 重新学习一遍重点。

创建表单的基本步骤：

像父<form>元素添加role="form"
把标签和控件放在一个带有class.form-group的<div>中，这是获取最佳间距所必须的
向所有的文本元素<input><textarea>和<select>添加class="form-control"

form-control控件，可以为文本域textarea元素添加CSS定制样式。

placeholder 占位符

使用class.sr-only,您可以隐藏内联表单的标签

form.hidden_tag() 模板参数将被替换为一个隐藏字段，用来是实现在配置中激活的 CSRF 保护。如果你已经激活了 CSRF，这个字段需要出现在你所有的表单中。

对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。

2.导航栏是网页响应式的基本组件，导航栏在移动设备中是堆叠的，Bootstrap中的导航栏包含了站点名称和基本的导航定义样式。

创建默认的导航栏

1.向<nav>标签添加元素class.navbar、.navbar-default.

2.向上面的元素中添加role="navigation",有助于增加可访问性

3.向<div>元素中添加一个标题class.navbar-header,内部包含了带有class navbar-brand的<a>元素，这会让文本看起来更大一号。

4.为了向导航栏添加链接，只需简单的添加带有class.nav、.navbar-nav的无序列表即可

代码如下：

% extends "bootstrap/base.html" %}

{% block title %}Myflasky{% endblock %}

{% block navbar %}
<div class = "navbar navbar-default" role = "navigation">
    <div class="container">
        <div class = "navbar-header">
            <a class = "navbar-brand">腾讯</a>
        </div>
        <ul class = "nav navbar-nav">
            <li><a href="#">新闻</a></li>
            <li><a href="#">视频</a></li>
        </ul>
    </div>
</div>
{% endblock %}

运行结果如下：

响应式的导航栏

为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。