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>