Bootstrap主导航的构成：1.公司品牌、2.搜索框、3.导航菜单：切换按钮、4.导航菜单：主导航
1.公司品牌：
navbar-brand
- 定义：用于公司品牌标签的样式；
2.导航菜单：切换按钮
.navbar-toggler-icon
-定义：.navbar-toggler-icon:用于向标签添加汉堡图标
.navbar-toggler
- 定义：汉堡图标的外观和交互行为；
data-bs-toggle - 定义：这是一个自定义属性。定义了切换的行为：折叠（"collapse"）
data-bs-toggle="#navbarSupportedContent" - 定义：也是一个自定义属性，定义切换行为的目标：id值；
3.导航菜单：主导航
- 定义：
- 引入css和js框架文件
页面效果：标签的默认样式被重置；
类：container
-它定义了一个响应式容器；
- 创建了一个响应式容器，并且赋予容器不同的宽度；
- 背后添加了媒体查询，指定了容器的宽度；
- min-width:1400px；container=>1320px
- min-width:1200px; container=>1140px
- Min-width:992px; container=>960px
- Min-width:768px; container=>720px
- Min-width:576px; container=>540px
---最大
- Max-widh:576px; container=>100%
container-fluid
- 定义：container-fluid类，它定义了一个流式（100%）容器；
.navbar
- 定义：
1.把自身定义成: display: flex;
2.同时为子元素：.navbar 子元素{display: flex;}
定义元素背景色
.bg-primary
-定义：用于添加元素背景颜色；
- 实例：
.bg-warning-subtle
.bg-info
.bg-danger-subtle
等Bootstrap中找到背景颜色..............
- 尺寸（Sizing）
<div class="w-25 p-3">25% 的宽度</div>
<div class="w-50 p-3">50% 的宽度</div>
<div class="w-75 p-3">75% 的宽度</div>
<div class="w-100 p-3">100% 的宽度</div>
<div class="w-auto p-3">宽度自使用</div>
