CSS day_12(6.27) Boot常用组件

复习

栅格系统

• 行（.row）和列（col-{num}）,底层是弹性布局
• 可以使用flex的相关属性，行就是容器，列就是项目
• 栅格布局的终极目的是完成响应式效果，所以在一行分为12列，根据不同的容器宽度，可以改变一行中显示的列数
• 列加类中缀.col-{ 类中缀}-{num}

组件

1.导航条navbar 

Navbar · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网

• 最外层导航条元素
  • 1..navbar让整个导航内容横向排列（默认），出现小菜单是纵向排列，具有弹性盒属性
  • 2..navbar-expand-{ 类中缀}作用是大菜单和小菜单切换的断点
  • 3.导航条的主题色（参考背景颜色）
    • .navbar-dark深色主题
    • .navbar-light浅色主题
  • 4.导航条的背景色.bg-{color}也要考虑深色和浅色主题的搭配
  • 5..navbar-brand导航条的logo部分,处理a标签，并且与主题呼应字体颜色
• 小菜单部分 <button>标签整体就是小菜单
  • 6..navbar-toggler小菜单的基础样式
  • 7.data-bs-toggle="collapse"js功能：折叠功能
  • 8.data-bs-target="#打开折叠目标的id"js功能：负责寻找折叠目标（大菜单）
  • 9.<span>标签，.navbar-toggler-icon小菜单中的三条小横线
• 大菜单部分
  • 10.id="dcd"大菜单的id，它要和小菜单的折叠目标关联
  • 11..collapse折叠属性，只要有.show打开的状态
  • 12..navbar-collapse大菜单的排版布局样式
  • 13..navbar-nav大菜单中列表的排版
  • 14..nav-item菜单项
  • 15..nav-link菜单项的连接样式（大部分的样式）
  • 16..active当前正在显示的激活项目

<div class="xz-admin-navbar bg-dark navbar navbar-expand-lg navbar-dark">
   <div class="container-fluid">
       <!-- 把代码样例中 container-fluid 里面所有的内容拷贝进来-->
       <a