零基础Bootstrap入门教程(20)--选项卡式导航、胶囊式导航、面包屑导航

本文主要是介绍零基础Bootstrap入门教程(20)--选项卡式导航、胶囊式导航、面包屑导航,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

点此查看 所有教程、项目、源码导航

本文目录

  • 1. 概述
  • 2. 选项卡式导航
    • 2.1 普通选项卡导航
    • 2.2 等宽选项卡导航
  • 3. 胶囊式导航
    • 3.1 普通胶囊式导航
    • 3.2 垂直胶囊式导航
  • 4. 面包屑导航
  • 5. 小结

1. 概述

Bootstrap提供了多种导航控件,本篇就来介绍下常用的选项卡式导航、胶囊式导航及面包屑导航。

2. 选项卡式导航

2.1 普通选项卡导航

选项卡式导航,顾明司仪,看起来就像多个选项卡,基本用法如下:

 				选项卡式导航<nav><ul class="nav nav-tabs"><li class="active"><a href="#">首页</a></li><li><a href="#">关于</a></li><li><a href="#">内容</a></li></ul></nav>

<nav>表示导航元素,nav nav-tabs表示这是一个选项卡样式的导航元素,所以效果如下:

在这里插入图片描述

2.2 等宽选项卡导航

等宽选项卡导航特别适合用于移动设备,当容器宽度小于768像素时,导航将自动变为堆叠样式。使用nav-justified类即可设置等宽模式。

				等宽选项卡式导航<nav><ul class="nav nav-tabs nav-justified"><li class="active"><a href="#">首页</a></li><li><a href="#">关于</a></li><li><a href="#">内容</a></li></ul></nav>

当容器宽度正常时:
在这里插入图片描述
等容器宽度小于768像素时,导航会自动变为:
在这里插入图片描述

3. 胶囊式导航

3.1 普通胶囊式导航

胶囊式导航改变了显示样式,每个导航菜单更加像一个胶囊按钮,而不是选项。使用nav-pills类设置胶囊式导航:

				胶囊式导航<nav><ul class="nav nav-pills"><li class="active"><a href="#">首页</a></li><li><a href="#">关于</a></li><li><a href="#">内容</a></li></ul></nav>

效果如下:
在这里插入图片描述

3.2 垂直胶囊式导航

可以追加nav-stacked样式,将胶囊式导航设置为垂直方向:

				垂直方向胶囊式导航<nav><ul class="nav nav-pills nav-stacked"><li class="active"><a href="#">首页</a></li><li><a href="#">关于</a></li><li><a href="#">内容</a></li></ul></nav>

效果如下:
在这里插入图片描述

4. 面包屑导航

面包屑导航比较简单,直接为ul添加breadcrumb类即可。

				面包屑导航<ul class="breadcrumb"><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li><li><a href="#">品牌信息</a></li></ul>

效果如下:
在这里插入图片描述

5. 小结

选项卡式导航和胶囊式导航经常用作除了主导航栏之外的二级内容导航,而面包屑导航经常用于显示当前页面的位置且随时定位到相关页面。

这篇关于零基础Bootstrap入门教程(20)--选项卡式导航、胶囊式导航、面包屑导航的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/261090

相关文章

0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型的操作流程

《0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeekR1模型的操作流程》DeepSeekR1模型凭借其强大的自然语言处理能力,在未来具有广阔的应用前景,有望在多个领域发... 目录0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型,3步搞定一个应

MySQL中my.ini文件的基础配置和优化配置方式

《MySQL中my.ini文件的基础配置和优化配置方式》文章讨论了数据库异步同步的优化思路,包括三个主要方面:幂等性、时序和延迟,作者还分享了MySQL配置文件的优化经验,并鼓励读者提供支持... 目录mysql my.ini文件的配置和优化配置优化思路MySQL配置文件优化总结MySQL my.ini文件

Rust中的Option枚举快速入门教程

《Rust中的Option枚举快速入门教程》Rust中的Option枚举用于表示可能不存在的值,提供了多种方法来处理这些值,避免了空指针异常,文章介绍了Option的定义、常见方法、使用场景以及注意事... 目录引言Option介绍Option的常见方法Option使用场景场景一:函数返回可能不存在的值场景

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

系统架构师考试学习笔记第三篇——架构设计高级知识(20)通信系统架构设计理论与实践

本章知识考点:         第20课时主要学习通信系统架构设计的理论和工作中的实践。根据新版考试大纲,本课时知识点会涉及案例分析题(25分),而在历年考试中,案例题对该部分内容的考查并不多,虽在综合知识选择题目中经常考查,但分值也不高。本课时内容侧重于对知识点的记忆和理解,按照以往的出题规律,通信系统架构设计基础知识点多来源于教材内的基础网络设备、网络架构和教材外最新时事热点技术。本课时知识

【Linux 从基础到进阶】Ansible自动化运维工具使用

Ansible自动化运维工具使用 Ansible 是一款开源的自动化运维工具,采用无代理架构(agentless),基于 SSH 连接进行管理,具有简单易用、灵活强大、可扩展性高等特点。它广泛用于服务器管理、应用部署、配置管理等任务。本文将介绍 Ansible 的安装、基本使用方法及一些实际运维场景中的应用,旨在帮助运维人员快速上手并熟练运用 Ansible。 1. Ansible的核心概念

AI基础 L9 Local Search II 局部搜索

Local Beam search 对于当前的所有k个状态,生成它们的所有可能后继状态。 检查生成的后继状态中是否有任何状态是解决方案。 如果所有后继状态都不是解决方案,则从所有后继状态中选择k个最佳状态。 当达到预设的迭代次数或满足某个终止条件时,算法停止。 — Choose k successors randomly, biased towards good ones — Close

【C++学习笔记 20】C++中的智能指针

智能指针的功能 在上一篇笔记提到了在栈和堆上创建变量的区别,使用new关键字创建变量时,需要搭配delete关键字销毁变量。而智能指针的作用就是调用new分配内存时,不必自己去调用delete,甚至不用调用new。 智能指针实际上就是对原始指针的包装。 unique_ptr 最简单的智能指针,是一种作用域指针,意思是当指针超出该作用域时,会自动调用delete。它名为unique的原因是这个

音视频入门基础:WAV专题(10)——FFmpeg源码中计算WAV音频文件每个packet的pts、dts的实现

一、引言 从文章《音视频入门基础:WAV专题(6)——通过FFprobe显示WAV音频文件每个数据包的信息》中我们可以知道,通过FFprobe命令可以打印WAV音频文件每个packet(也称为数据包或多媒体包)的信息,这些信息包含该packet的pts、dts: 打印出来的“pts”实际是AVPacket结构体中的成员变量pts,是以AVStream->time_base为单位的显

C 语言基础之数组

文章目录 什么是数组数组变量的声明多维数组 什么是数组 数组,顾名思义,就是一组数。 假如班上有 30 个同学,让你编程统计每个人的分数,求最高分、最低分、平均分等。如果不知道数组,你只能这样写代码: int ZhangSan_score = 95;int LiSi_score = 90;......int LiuDong_score = 100;int Zhou