bootstrap导航栏垂直布局_12 Layout页面布局教程（plotly Dash Bootstrap版）

今天第12课啦，本节课程是整个Dash页面布局的关键一课，希望大家能认真学习掌握。送上一首《Inner Circle》，供大家欣赏~~~ (一)功能

Bootstrap中的布局是使用网格系统控制实现的。 Bootstrap网格采用12列和5个响应层(响应层指的是允许程序能在不同的屏幕尺寸上指定不同的响应行为如根据屏幕宽度及比例自适应调整页面布局)。可以根据应跨越的12个网格列中的多少来指定列的宽度，也可以允许列扩展或收缩以适合其内容或行中的可用空间。

dash-bootstrap-components中包含三个主要的布局组件：Container，Row和Col。

容器组件Container可用于居中和水平填充应用程序的内容。默认情况下，容器具有响应像素宽度。如果您想让容器填充可用的水平空间并流畅地调整大小，请使用关键字参数fluid = True。

行组件Row是列的包装器，应用程序的布局应构建为一系列列的行。使用网格布局时，应将内容放置在列中，并且只有Col组件应该是Row的直接子代。

列组件Col类似表格中的单元格，主要是显示布局中的具体内容，可以展示Dash Bootstrap Components中的任何组件，如图片、文字、表格、各类控件等。

Layout示例：  

(二)调用方式       

dash-bootstrap-components.Container

dash-bootstrap-components.Row

dash-bootstrap-components.Col

(三)Layout系列关键参数  

(1)Container关键参数

• fluid(布尔值，可选)：如果为True，则将应用container-fluid类，并且Container将展开以填充可用空间。非流体容器在不同的断点处会根据固定宽度调整大小。

(2)Row关键参数

• key(字符串，可选)：组件的唯一标识符，用于在渲染组件时通过React.js提高性能。有关更多信息，请参见https://reactjs.org/docs/lists-and-keys.html。

•  no_gutters(布尔值，可选)：删除此行各列之间的“装订线”。

•  align(值等于：“ start”，“ center”，“ end”，“stretch”，“ baseline”，可选)：设置此行中各列的垂直对齐方式。选项是“开始”，“中心”，“结束”，“伸展”和“基线”。

• justify(值等于：“开始”，“中心”，“结束”，“周围”，“之间”，可选)：设置此行中列的水平间距和对齐方式。选项为“开始”，“中心”，“结束”，“周围”和“中间”。

•  form(布尔值，可选)：用于形式。设置为True时，将应用“ form-row”类，该类将覆盖默认的列装订线以实现更紧密，更紧凑的布局。

(3)Col关键参数

• width(可选)：指定列的宽度。在后台，这将在xs断点处设置行为，如果指定了xs，它将被覆盖。有效的参数是布尔值，介于1到12之间(包括1和12)的整数或具有键“ offset”，“ order”，“size”的字典。

• xs(可选)：在超小的屏幕上指定列的行为。有效的参数是布尔值，介于1到12之间(包括1和12)的整数或具有键“ offset”，“order”，“ size”的字典。

• sm(可选)：在小屏幕上指定列的行为。有效的参数是布尔值，介于1到12之间(包括1和12)的整数或具有键“ offset”，“order”，“ size”的字典。md(可选)：在中等屏幕上指定列的行为。有效的参数是布尔值，介于1到12之间(包括1和12)的整数或具有键“ offset”，“order”，“ size”的字典。

• lg(可选)：在大屏幕上指定列的行为。有效的参数是布尔值，介于1到12之间(包括1和12)的整数或具有键“ offset”，“order”，“ size”的字典。

•  xl(可选)：在超大屏幕上指定列行为。有效的参数是布尔值，介于1到12之间(包括1和12)的整数或具有键“ offset”，“order”，“ size”的字典。

• align(值等于：“ start”，“ center”，“ end”，“stretch”，“ baseline”，可选)：在父行中设置此列内容的垂直对齐方式。选项为“开始”，“中心”，“结束”，“拉伸”，“基线”。    

(四)Layout使用层层深入      

 1. 最简单的使用样式

默认情况下，列的宽度相等，并且将扩展以填充可用空间。

import dash_bootstrap_components as dbcimport dash_html_components as htmlrow = html.Div(    [        dbc.Row(dbc.Col(html.Div("A single column"))),        dbc.Row(            [                dbc.Col(html.Div("One of three columns")),                dbc.Col(html.Div("One of three columns")),