Bootstrap5 侧边栏导航(Offcanvas)3
设置背景及背景是否可滚动我们可以在弹出侧边栏的时候设置 元素是否可以滚动,也可以设置是否显示一个背景画布。 使用 data-bs-scroll 属性来设置 元素是否可滚动,data-bs-backdrop 来切换是否显示背景画布。 实例 body 元素可以滚动显示画布(默认)允许滚动及显示画布 正文内容可以滚动 滚动页面查看效果...
Bootstrap5 侧边栏导航(Offcanvas)2
侧边栏的方向可以通过以下四个类来控制侧边栏的方向: .offcanvas-start 显示在左侧,如上实例。.offcanvas-end 显示在右侧.offcanvas-top 显示在顶部.offcanvas-bottom 显示在底部实例 顶部导航栏 显示在顶部导航栏 ... 尝试一下 »实例 右侧侧边栏 显示在...
Bootstrap5 侧边栏导航(Offcanvas)1
Bootstrap5 侧边栏导航(Offcanvas)Bootstrap5 侧边栏侧边栏类似于模态框,在移动端设备中比较常用。 创建滑动导航我们可以通过 JavaScript 来设置是否在 .offcanvas 类后面添加 .show 类,从而控制侧边栏的显示与隐藏: .offcanvas 隐藏内容 (默认).offcanvas.show 显示内容可以使...
Bootstrap5 导航7
胶囊状动态选项卡胶囊状动态选项卡只需要将以上实例的代码中 data-bs-toggle 属性设置为 data-bs-toggle="pill": 实例 Home Menu 1 Menu 2 ... ... ...
Bootstrap5 导航6
动态选项卡如果你要设置选项卡是动态可切换的,可以在每个链接上添加 data-bs-toggle="tab" 属性。 然后在每个选项对应的内容的上添加 .tab-pane 类,对应选项卡的内容的 标签使用 .tab-content 类 。 如果你希望有淡入效果可以在 .tab-pane 后添加 .fade类: 实例 Home ...
Bootstrap5 导航5
胶囊下拉菜单实例 Active Dropdown Link 1 Link 2 Link 3 Link Disabled 尝试一下 »选项卡下拉菜单实例 Active Dropdown Link 1 Link 2 Link 3 ...
Bootstrap5 导航4
胶囊导航.nav-pills 类可以将导航项设置成胶囊形状。 实例 Active Link Link Disabled 尝试一下 »导航等宽.nav-justified 类可以设置导航项齐行等宽显示。 实例 ....
Bootstrap5 导航3
垂直导航.flex-column 类用于创建垂直导航: 实例 尝试一下 »选项卡使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记。实例 Active Link Link Disabled
Bootstrap5 导航2
导航对齐方式.justify-content-center 类设置导航居中显示, .justify-content-end 类设置导航右对齐。 实例 尝试一下 »垂直导航.flex-column 类用于创建垂直导航: 实例
Bootstrap5 导航1
Bootstrap5 导航如果你想创建一个简单的水平导航栏,可以在 元素上添加 .nav类,在每个 选项上添加 .nav-item 类,在每个链接上添加 .nav-link 类: 实例 Link Link Link Disabled
本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。
Bootstrap更多导航相关
Bootstrap您可能感兴趣
- Bootstrap插件
- Bootstrap日期选择器
- Bootstrap右键菜单
- Bootstrap表单
- Bootstrap flex
- Bootstrap布局
- Bootstrap小工具
- Bootstrap侧边栏
- Bootstrap滚动
- Bootstrap toasts
- Bootstrap组件
- Bootstrap按钮
- Bootstrap样式
- Bootstrap系统
- Bootstrap前端
- Bootstrap表格
- Bootstrap框架
- Bootstrap下拉菜单
- Bootstrap css
- Bootstrap js
- Bootstrap教程
- Bootstrap类
- Bootstrap table
- Bootstrap开发
- Bootstrap响应式
- Bootstrap分页
- Bootstrap报错
- Bootstrap栅格
- Bootstrap页面
- Bootstrap工具
阿里巴巴终端技术
阿里巴巴终端技术最新内容汇聚在此,由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界,将面向未来,制定技术策略和目标并落地执行,推动终端技术发展,帮助工程师成长,打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号:阿里巴巴终端技术,欢迎关注。
+关注