flask-bootstrap使用记录

标签列表

• div
• button
• span
• a
• ul
• li
• h1

标签的属性列表

• class
• type
• data-toggle 触发事件的类型，如 modal，popover，tooltips 等
• data-target 指定触发的目标元素。
• role

class的选项列表

• container 固定960px宽度，（如果又引入了响应式样式，则会适当调整，例如1600*900，它会显示1200px）

• container-fluid自适应屏幕宽度，即满屏显示。

• navbar 设置nav元素为导航条组件；

• navbar-nav 设置ul为导航条组件内的列表元素

• navbar-default 指定导航条组件为默认主题；

• navbar-inverse 指定导航条组件为黑色主题；

• navbar-fixed-top 设置导航条组件固定在顶部；

• navbar-fixed-bottom 设置导航条组件固定在底部；

• container-fluid 设置宽度充满父元素，即为100%

• navbar-left 设置导航条内元素向左对齐；

• navbar-right 设置导航条内元素向右对齐；

• navbar-header 指定div元素为导航条组件包裹品牌图标及切换按钮；

• navbar-toggle 设置button元素为导航条组件的切换钮；

• navbar-brand 设置导航条组件内的品牌图标,用于页面左上角；

• collapse设置div元素为视口大于768px时显示(collapse的作用是为了当浏览器的窗口宽度小于768px的时候，将设置为collapse样式的div元素内的所有其它元素都折叠起来，以一个列表的形式显示。)

• navbar-collapse设置div元素为导航条组件各列表项的父元素

• sr-only 这是专门为残障人士浏览网页设计的。

• icon-bar 浏览器缩小到某个尺寸时,右边显示的横杠. <span class="icon-bar"></span> 这样的一个span代表一条横杠
• page-header 用于页面的标题处

type的选项列表

• button

role的选项列表

• navigation 用于标识一个普通bai的标签，使之语义化，方便浏览器对其具体功能进行识别。例如加上role="navigation"，就可以让浏览器知晓这是一个导航容器而不是一个普通的容器，

data-toggle的选项列表

collapse

data-target的选项列表

.navbar-collapse

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
这行代码的效果是,当缩小浏览器到某个尺寸下时,界面横向列表消失,转义到右侧下拉列表.