Bootstrap系列之导航
2024-05-08 09:09:00
Bootstrap导航
可以在 ul 元素上添加 .nav类，在每个 li 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类:
基本的导航
<div class="container mt-3"><h2>导航</h2><p>简单的水平导航:</p><ul class="nav"><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul></div>
导航对齐方式
默认是左对齐，使用justify-content-center居中对齐，使用justify-content-end则是右对齐
<div class="container mt-3"><h2>导航</h2><p>左对齐导航 (默认):</p><ul class="nav"><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul><p class="text-center">居中对齐导航:</p><ul class="nav justify-content-center"><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul><p class="text-end">右对齐导航:</p><ul class="nav justify-content-end"><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul></div>
垂直排列
<ul class="nav flex-column">
导航选项卡
使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记。
<div class="container mt-3"><h2>选项卡</h2><p>选项卡导航:</p><ul class="nav nav-tabs"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul></div>
胶囊导航
.nav-pills类可以将导航项设置成胶囊形状。
<div class="container mt-3"><h2>胶囊</h2><p>胶囊导航:</p><ul class="nav nav-pills"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul>
</div>
导航等宽
.nav-justified 类可以设置导航项齐行等宽显示。
<div class="container mt-3"><h2>导航等宽</h2><p>.nav-justified 类可以设置导航项齐行等宽显示。</p><ul class="nav nav-pills nav-justified"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul><br><p>Justified tabs:</p><ul class="nav nav-tabs nav-justified"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul></div>
胶囊下拉导航
父级dropdown-menu子集dropdown-item实现下拉
<div class="container mt-3"><h2>胶囊导航带下拉菜单</h2><ul class="nav nav-pills"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Link 1</a></li><li><a class="dropdown-item" href="#">Link 2</a></li><li><a class="dropdown-item" href="#">Link 3</a></li></ul></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul>
</div>
动态切换选项卡
可以在每个链接上添加 data-bs-toggle=“tab” 属性。 然后在每个选项对应的内容的上添加 .tab-pane 类，对应选项卡的内容的 div 标签使用 .tab-content 类 。
如果你希望有淡入效果可以在 .tab-pane 后添加 .fade类:
<div class="container mt-3"><h2>选项卡切换</h2><br><!-- Nav tabs --><ul class="nav nav-tabs" role="tablist"><li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a></li><li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a></li><li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a></li></ul><!-- Tab panes --><div class="tab-content"><div id="home" class="container tab-pane active"><br><h3>HOME</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><div id="menu1" class="container tab-pane fade"><br><h3>Menu 1</h3><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div><div id="menu2" class="container tab-pane fade"><br><h3>Menu 2</h3><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p></div></div>
</div>
胶囊动态选项卡
<div class="container mt-3"><h2>胶囊选项卡切换</h2><br><!-- Nav pills --><ul class="nav nav-pills" role="tablist"><li class="nav-item"><a class="nav-link active" data-bs-toggle="pill" href="#home">Home</a></li><li class="nav-item"><a class="nav-link" data-bs-toggle="pill" href="#menu1">Menu 1</a></li><li class="nav-item"><a class="nav-link" data-bs-toggle="pill" href="#menu2">Menu 2</a></li></ul><!-- Tab panes --><div class="tab-content"><div id="home" class="container tab-pane active"><br><h3>HOME</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><div id="menu1" class="container tab-pane fade"><br><h3>Menu 1</h3><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div><div id="menu2" class="container tab-pane fade"><br><h3>Menu 2</h3><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p></div></div>
</div>
Bootstrap系列之导航相关推荐
- ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件
Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉菜单.导航.警告框.弹出框.输入框组等.在你的Web Application中使用这些组件,将为用户提供一致和简单易用的用户体验. ...
- iOS开发UINavigation系列四——导航控制器UINavigationController
iOS开发UINavigation系列四--导航控制器UINavigationController 一.引言 在前面的博客中,我么你介绍了UINavigationBar,UINavigationIte ...
- LINQ体验系列文章导航
LINQ体验系列文章导航 LINQ推荐资源 推荐一个大家学习和交流LINQ的地方,就是博客园的LINQ专题和LINQ交流小组.LINQ专题中整理了有关LINQ方方面面的入门.进阶.深入的文章:学习中遇 ...
- [Prism]Composite Application Guidance for WPF(10)——系列目录导航
[Prism]Composite Application Guidance for WPF(10)--系列目录导航 ...
- Linq To Sql进阶系列 -目录导航
博客园CLR基础研究团队|CLR团队精品系列|C# 3.0专题 [Linq To Sql进阶系列] 目录导航 1 Linq To Sql进阶系列(一)-从映射讲起 本系列,或多或少,直接或间接依赖入门 ...
- Bootstrap 响应式导航条
响应式导航条能够根据浏览器窗口宽度,自动调整导航条的显示状态.一般会为响应式导航提供一个导航条和一个按钮. 当浏览器窗口足够宽时,正常显示导航条而不显示按钮.当浏览器窗口宽度缩小到一定程度时,自动隐藏 ...
- bootstrap下拉框分页_学习使用Bootstrap输入框、导航、分页等常用组件
Bootstrap输入框和导航组件 一.下拉菜单 下拉菜单,就是点击一个元素或按钮,触发隐藏的列表显示出来. 按钮和菜单需要包裹在.dropdown 的容器里,而作为被点击的元素按钮需要设置datat ...
- Bootstrap面包屑导航
Bootstrap中提供了面包屑导航的实现方法: 只需要引入bootstrap.css文件即可. 主要引用的样式有: .span6 .breadcrumb 实例代码如下: <!DOCTYPE h ...
- Bootstrap 面包屑导航（Breadcrumb）
一.Bootstrap 面包屑导航 1.1 面包屑导航css 面包屑导航是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置,是 ...
最新文章
- 针对深度学习（神经网络）的AI框架调研
- 解释一下为什么我很少jQuery
- 16-python基础5-文件读写操作
- Win32ASM学习[19]:结构与联合
- 自然语言处理与中文分词的难点总结--学习笔记
- php 性能日志,php性能分析之php-fpm慢执行日志slow log用法浅析
- Junipre认证必了解产品：juniper Networks SSG550M
- 了解Mysql与MariaDb的关系
- 利用python预测sir模型_SI，SIS，SIR模型的正确实现（python）
- 丁向荣单片机pdf_单片机原理与应用
- python爬虫基础爬取用户头像实战
- 【集合论】等价关系个数计算问题 ( 有序对个数计算 | 二元关系个数计算 | 划分 | 等价关系 )
- 眼睛血管分割matlab版本
- 计算机总是蓝屏怎么解决办法,笔记本电脑总蓝屏如何解决_笔记本频繁蓝屏怎么办-win7之家...
- php中文的正则表达式_php 正则表达式匹配中文汉字
- 数据库之 MySQL—— 50个查询系列
- 图片自适应父元素大小，并左右上下居中的css方法
- 中兴捧月比特派E题——反复横跳
- 提高商品曝光率增加销量，从这几点做起
- Java JDK1.8 API 帮助文档