素材巴巴 > 程序开发 >

Bootstrap----导航栏

程序开发 2023-09-03 14:59:18

文章目录

一、导航栏

1、container

2、navbar

3、navbar-expand-xx

4、navbar-xxxx

5、bg-xxxx

6、navbar-brand

7、navbar-toggler

8、navbar-toggler-icon

 9、定位

10、margin和padding间隙的定义

二、导航栏之切换触发器

1、data-toggle="xxx"

2、data-target="#id"

3、aria-controls="id"

4、aria-label

5、aria-expanded="boolean"

三、导航栏之列表

1、显示与隐藏

2、navbar-collapse

3、btn-group-vertical

四、导航栏之下拉菜单

1、dropdown

2、dropdown-divider

3、data-toggle="dropdown"

4、aria-haspopup="bollean"

5、aria-labelledby="id"

五、导航栏之徽章

1、badge

2、徽章的颜色

3、badge-pill

六、导航栏之搜索表单

1、form-inline

2、form-control

七、导航栏之按钮

1、btn

2、btn-xxx

3、btn-outline-xxx

4、尺寸

5、启用状态

6、禁用状态

7、切换状态

一、导航栏

1、container

导航栏默认内容是流式的，使用container容器来限制它们的水平宽度。把导航条包裹在一个 .container容器中，从而使之在网页中呈现居中效果（或在导航栏内部居中）

2、navbar

导航栏需要使用.navbar 来定义

3、navbar-expand-xx

用于响应式布局

4、navbar-xxxx

导航栏文字的配色

5、bg-xxxx

导航栏的配色

6、navbar-brand

设置logo自适应导航栏，对链接最有效

7、navbar-toggler

用于折叠插件及其他切换触发器行为。Navbar下的Toggler是切换触发器（即手机模式下的MENU下拉项），它们默认是左对齐的。如果在它们中间定义一个同级的兄弟元素.navbar-brand，它们会自动对齐到窗口右边，反转你的品牌（LOGO或主标题）元素的位置

8、navbar-toggler-icon

切换触发器按钮的图标

 9、定位

10、margin和padding间隙的定义

基于1rem值默认$spacer变量,选择所有视口（例如，值.mr-3对应于margin-right: 1rem），或挑响应变种，以针对特定的视口（例如，.mr-md-3对于margin-right: 1rem处于起步md断点）。

$spacer是一个SASS变量。

二、导航栏之切换触发器

1、data-toggle="xxx"

将元素原本的属性转换为data-toggle属性值，告诉脚本当按钮被点击时以什么事件触发，与data-target一起用代表data-target所指的元素以data-toggle指定的形式显示

2、data-target="#id"

保存一个部分的id，告诉脚本点击时切换哪个部分

3、aria-controls="id"

指示一个元素控制另一个元素（按钮控制着该id的部分）

4、aria-label

用不可视的方式给当前元素加上标签描述。当其获得焦点时，屏幕阅读器会读出 aria-label 属性的值，但不会在视觉上呈现效果。

5、aria-expanded="boolean"

展开状态

三、导航栏之列表

包裹在折叠面板中形成响应式，通过navbat-nav表明是导航栏，其中的元素嵌套nav-item(子选项)与nav-link(链接元素)

1、显示与隐藏

collapse：一开始是隐藏的（即button没有被点击）

collapse show：一开始是展开的

2、navbar-collapse

与navbar-expand-xxxx配合，让ul的父级div在不同屏幕的显示与隐藏

3、btn-group-vertical

纵向按钮组，包裹在其中的内容纵向排列

四、导航栏之下拉菜单

1、dropdown

将下拉列表的切换（按钮或链接）和下拉菜单包含在dropdown中

2、dropdown-divider

分割线，分割相关菜单子项

3、data-toggle="dropdown"

添加data-toggle="dropdown"在A链接或按钮上，以启用下拉菜单组件

4、aria-haspopup="bollean"

5、aria-labelledby="id"

五、导航栏之徽章

1、badge

表明是徽章

2、徽章的颜色

也可以在  元素上使用，并实现悬停、焦点、状态等效果。

badge-primary

badge-secondary

badge-success

badge-danger

badge-warning

badge-info

badge-light

badge-dark

3、badge-pill

椭圆形胶囊标签

六、导航栏之搜索表单

1、form-inline

在其中放置各种表单元件及组件

2、form-control

文本控件（如 、