Bootstrap实用功能总结

 

 导航栏：navbar

导航栏容器可以包含以下几个常用组成：

1、品牌LOGO（.navbar-brand ）

2、导航菜单（.navbar-nav）

3、导航文本（.navbar-text）

4、折叠导航按钮（.navbar-toggle）

5、表单（.form-inline）

一、导航容器一般使用nav标签来定义：

...

导航容器可用样式：

.navbar	导航栏基础样式
.navbar-expand-{sm | md | xl | lg}	响应式导航，大屏幕水平铺开，小屏幕垂直堆叠
.flex-top	导航栏一直在顶部
.flex-bottom	导航栏一直在顶部
.bg-{primary | secondary | success | info | danger | warning | dark | light}	导航栏的背景颜色
.navbar-dark	导航配色方案。深色背景，加此样式可以突显文字
.navbar-light	导航配色方案。浅色背景，加此样式可突显文字

二、导航菜单一般使用ul、li来定义：

1 

2   

3     
菜单一
 
4     
菜单二
 
5     
菜单三
 
6   
 
7 

导航菜单可用样式：

.navbar-nav	应用于ul标签
.nav-item 、 .active	应用于li标签
.nav-link 、 .disabled	应用于a标签

三、导航栏中加品牌元素（.navbar-brand）:

 1 

 2   
 3   品牌LOGO
 4 
 5   
 6   

 7     
菜单一
 8     
菜单二
 9     
菜单三
10   
11 

品牌可以是文字，也可以是图片。

四、导航文本类（.navbar-text），使用该类可以保证文字与导航样式统一：

 1 

 2   
 3   品牌LOGO
 4   
 5   

 6     
菜单一
 7     
菜单二
 8     
菜单三
 9   
10   这是一句文字
11 

五、折叠导航：小屏幕上我们都会折叠导航栏，通过点击来显示导航选项：

 1 

 2   
 3   品牌LOGO
 4 
 5   
 6   
 7     
 8   
 9 
10   
11   

12     

13       
菜单一
14       
菜单二
15       
菜单三
16     
17   
18 

折叠导航注意事项：

1、定义折叠按钮时除了折叠的属性之外，还必须加上样式： .navbar-toggler

2、折叠按钮内加上折叠图标，样式： .navbar-toggler-icon

3、菜单要包含一个容器内，容器必须包含样式： .collapse 和 .navbar-collapse

六、导航内加表单时，一定要把表单加上内联样式（.form-inline）

导航一般采用ul、li来定义，否则有些效果无法实现，比如动态选项卡效果。

基础样式：

1 

2   
导航一
3 

导航样式及属性：

ul 标签可用样式及属性
.nav	导航基类
.nav-tabs	选项卡导航
.nav-pills	胶囊导航
.nav-justified	导航均分宽度
.flex-column	垂直导航
.justify-content-start | .justify-content-center | .justify-content-end	导航选项的对齐方式： .justify-content-start   默认，左对齐 .justify-content-center 居中对齐 .justify-content-right 右对齐
li 标签可用样式及属性
.nav-item	指定一个选项
.dropdown	指明该选项是一个下拉菜单（下拉菜单也可以不用指定）
a标签可用样式及属性
.nav-link	指定导航链接
.active	当前激活的导航链接
.disabled	禁用的导航链接
data-toggle = "{tab | pill }"	定义一个动态选项卡 或 动态胶囊选项卡
href = "#id"	动态导航时，指明要显示的容器ID
动态选项卡容器样式
.tab-pane	动态选项卡容器类，必须要加

 动态下拉选项卡示例：

 1 

 2   
定义动态下拉选项卡
 3   

 4     
选项一
 5     

 6       下拉选项
 7       

 8         下拉一
 9         下拉二
10       
11     
12     
选项二
13     
选项三
14     
禁用选项
15   
16   
17   
 
18     

19       选项一内容
20     
21     

22       选项二内容
23     
24     

25       选项三内容
26     
27   
28 

注意：

一）选项卡标签对应内容需注意事项：

a)  要放置在类：tab-content 的容器下，这是必需的，否则会出现异常。

b）必须添加 .tab-pane 类

c)  用.active表明当前选项卡内容。其它一定要加载 .fade 类。 

【详解】模态框（modal）的使用

【详解】提示框（tooltip）的使用

【详解】弹出框（popover）的使用 

justify-content-{around | between | start | center | end }内容对齐

rounded-{0 | top | right | bottom | left | circle } 边角半径设置

bootStrap实现垂直居中