Bootstrap主导航的构成:1.公司品牌、2.搜索框、3.导航菜单:切换按钮、4.导航菜单:主导航
1.公司品牌:
navbar-brand
- 定义:用于公司品牌标签的样式;
2.导航菜单:切换按钮
** .navbar-toggler-icon**
-定义:.navbar-toggler-icon:用于向标签添加汉堡图标
.navbar-toggler
- 定义:汉堡图标的外观和交互行为;
data-bs-toggle - 定义:这是一个自定义属性。定义了切换的行为:折叠(fold)
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中找到背景颜色..............
Bootstrap主导航的构成:1.公司品牌、2.搜索框、3.导航菜单:切换按钮、4.导航菜单:主导航
1.公司品牌:
navbar-brand
- 定义:用于公司品牌标签的样式;
2.导航菜单:切换按钮
** .navbar-toggler-icon**
-定义:.navbar-toggler-icon:用于向标签添加汉堡图标
.navbar-toggler
- 定义:汉堡图标的外观和交互行为;
data-bs-toggle - 定义:这是一个自定义属性。定义了切换的行为:折叠(fold)
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中找到背景颜色..............