CSS day_12(6.27) Boot常用组件

最新推荐文章于 2023-11-12 11:00:19 发布

加1床铺盖

最新推荐文章于 2023-11-12 11:00:19 发布

阅读量660

点赞数 1

分类专栏： CSS(6.10-6.29) 文章标签：前端 css css3 bootstrap

本文链接：https://blog.csdn.net/m0_70328115/article/details/125495707

版权

CSS(6.10-6.29) 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

复习

栅格系统

行（.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">

<a class="navbar-brand" href="#">
<img src="./img/xz-img/favicon.ico" alt="">
学子商城管理客户端
</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#dcd">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="dcd">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</div>
</div>

2.下拉菜单

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

最外层下拉菜单元素.dropdown
标签不是非必要a，.dropdown-toggle是下拉菜单的小三角形
data-bs-toggle="dropdown"下拉菜单标题可以点击的位置，js功能：点击后相邻兄弟元素会打开/合并
下方是菜单列表，一般情况下使用列表标签.dropdown-menu事先隐藏下拉列表，当点击下拉后出现.show就展开了
.dropdown-item下拉菜单项
.dropdown-divider下拉菜单项中的分隔线，一般用hr标签

3.模态框

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

触发模态框的元素
- data-bs-toggle="modal"js功能：模态框显示和隐藏
- data-bs-target="#mtk"js功能：模态框的目标，需要模态框的id属性值关联
- tabindex="-1"将模态框放在最底部
模态框本框
- .modal固定定位区域，.fade过渡效果
- id="mtk"模态框的id属性值，和点击出现的功能目标对应
- .modal-dialog弹出框的区域位置
- .modal-content白色背景框

.modal-header头部
- .modal-title头部标题
- .btn-close一个叉号
- data-bs-dismiss="modal"js功能：关闭模态框的js
.modal-body模态框的内容部分
.modal-footer模态框的底部，可以放提示文字或者按钮

<a class="nav-link" data-bs-toggle="modal" data-bs-target="#mtk" href="#">退出登录</a>

<div class="modal fade" id="mtk" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">是否真的要退出？</h5>
<button class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
如果退出将重新登录，不记录用户名密码
</div>
<div class="modal-footer">
<button class="btn btn-secondary"
data-bs-dismiss="modal">确认关闭</button>
<button class="btn btn-primary">再想想</button>
</div>
</div>
</div>
</div>

轮播图

轮播图的最外层
- .carousel 轮播图基础类
- .slide过渡样式，有滑动的效果
- id="lbt"需要有id属性，负责小按钮以及左右按钮与当前轮播的关联
- data-bs-ride="carousel"js功能：定时器
- data-bs-interval="5000"js功能：定时器的时间控制默认5s
轮播图的底部控制符
- .carousel-indicators底部控制符区域
- 内部的小符号用什么标签都可以，data-bs-target="#lbt"关联轮播图的id属性值，用来控制轮播图切换图片的功能
- data-bs-slide-to="数字"数字和图片数量的长度有关，对应的应该是图片的数组索引，从0位开始。
- .active当前被激活的小控制符
图片区域
- .carousel-inner图片区域的最外层，相对定位的属性，溢出隐藏的属性
- .carousel-item图片区域的一个图，具有隐藏样式，只有具有.active类的图片才能显示
左右控制区（分成单独的左和右）
- 左侧按钮 .carousel-control-prev左侧按钮的定位
  - data-bs-target="#lbt"js功能：控制轮播的id属性
  - data-bs-slide="prev"js功能：向上一个图片切换
  - 里面有一个内联标签，.carousel-control-prev-icon向左的小箭头
- 右侧按钮 .carousel-control-next右侧按钮的定位
  - data-bs-target="#lbt"js功能：控制轮播的id属性
  - data-bs-slide="next"js功能：向上一个图片切换
  - 里面有一个内联标签，.carousel-control-next-icon向左的小箭头