Bootstrap学习-bootstrap渲染表单+bootstrap导航栏

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> 中的元素。