1.使用Bootstrap渲染表单
20170605:发现自己写的渲染注册表单的页面隔了半个月自己都不认识了,好记性不如烂笔头,参考http://www.runoob.com/bootstrap/bootstrap-forms.html 重新学习一遍重点。
创建表单的基本步骤:
- 像父<form>元素添加role="form"
- 把标签和控件放在一个带有class.form-group的<div>中,这是获取最佳间距所必须的
- 向所有的文本元素<input><textarea>和<select>添加class="form-control"
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> 中的元素。
来源:CSDN
作者:Helen2706
链接:https://blog.csdn.net/Helen27706/article/details/71411580