3.6 Bootstrap 导航元素

文章目录

  • Bootstrap 导航元素
    • 表格导航或标签
    • 胶囊式的导航菜单
      • 基本的胶囊式导航菜单
      • 垂直的胶囊式导航菜单
    • 两端对齐的导航
    • 禁用链接
    • 下拉菜单
      • 带有下拉菜单的标签
      • 带有下拉菜单的胶囊
      • 标签页与胶囊式标签页

Bootstrap 导航元素

在这里插入图片描述
本文将讲解 Bootstrap 提供的用于定义导航元素的一些选项。它们使用相同的标记和基类 .nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class，可以在不同的样式间进行切换。

表格导航或标签

创建一个标签式的导航菜单：

  • 以一个带有 class .nav 的无序列表开始。
  • 添加 class .nav-tabs。

下面的实例演示了这点：

<p>标签式的导航菜单</p>
<ul class="nav nav-tabs"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">iOS</a></li><li><a href="#">VB.Net</a></li><li><a href="#">Java</a></li><li><a href="#">PHP</a></li>
</ul>

在这里插入图片描述

胶囊式的导航菜单

基本的胶囊式导航菜单

如果需要把标签改成胶囊的样式，只需要使用 class .nav-pills 代替 .nav-tabs 即可，其他的步骤与上面相同。

下面的实例演示了这点：

<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">iOS</a></li><li><a href="#">VB.Net</a></li><li><a href="#">Java</a></li><li><a href="#">PHP</a></li>
</ul>

在这里插入图片描述

垂直的胶囊式导航菜单

您可以在使用 class .nav、.nav-pills 的同时使用 class .nav-stacked，让胶囊垂直堆叠。

下面的实例演示了这点：

<p>垂直的胶囊式导航菜单</p>
<ul class="nav nav-pills nav-stacked"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">iOS</a></li><li><a href="#">VB.Net</a></li><li><a href="#">Java</a></li><li><a href="#">PHP</a></li>
</ul>

在这里插入图片描述

两端对齐的导航

您可以在屏幕宽度大于 768px 时，通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用 class .nav-justified，让标签式或胶囊式导航菜单与父元素等宽。在更小的屏幕上，导航链接会堆叠。

下面的实例演示了这点：

<p>两端对齐的导航元素</p>
<ul class="nav nav-pills nav-justified"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">iOS</a></li><li><a href="#">VB.Net</a></li><li><a href="#">Java</a></li><li><a href="#">PHP</a></li>
</ul><br><br><br>
<ul class="nav nav-tabs nav-justified"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">iOS</a></li><li><a href="#">VB.Net</a></li><li><a href="#">Java</a></li><li><a href="#">PHP</a></li>
</ul>

在这里插入图片描述

禁用链接

对每个 .nav class，如果添加了 .disabled class，则会创建一个灰色的链接，同时禁用了该链接的 :hover 状态，如下面的实例所示：

<p>导航元素中的禁用链接</p>
<ul class="nav nav-pills"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li class="disabled"><a href="#">iOS（禁用链接）</a></li><li><a href="#">VB.Net</a></li><li><a href="#">Java</a></li><li><a href="#">PHP</a></li>
</ul><br><br>
<ul class="nav nav-tabs"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">iOS</a></li><li  class="disabled"><a href="#">VB.Net（禁用链接）</a></li><li><a href="#">Java</a></li><li><a href="#">PHP</a></li>
</ul>

在这里插入图片描述

注意：该 class 只会改变 <a> 的外观，不会改变它的功能。在这里，您需要使用自定义的 JavaScript 来禁用链接。

下拉菜单

导航菜单与下拉菜单使用相似的语法。默认情况下，列表项的锚与一些数据属性协同合作来触发带有 .dropdown-menu class 的无序列表。

带有下拉菜单的标签

向标签添加下拉菜单的步骤如下：

  • 以一个带有 class .nav 的无序列表开始。
  • 添加 class .nav-tabs。
  • 添加带有 .dropdown-menu class 的无序列表。
<p>带有下拉菜单的标签</p><ul class="nav nav-tabs"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">iOS</a></li><li><a href="#">VB.Net</a></li><li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Java <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Swing</a></li><li><a href="#">jMeter</a></li><li><a href="#">EJB</a></li><li class="divider"></li><li><a href="#">分离的链接</a></li></ul></li><li><a href="#">PHP</a></li></ul>

在这里插入图片描述

带有下拉菜单的胶囊

步骤与创建带有下拉菜单的标签相同，只是需要把 .nav-tabs class 改为 .nav-pills，如下面的实例所示：

<p>带有下拉菜单的胶囊</p><ul class="nav nav-pills"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">iOS</a></li><li><a href="#">VB.Net</a></li><li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Java <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Swing</a></li><li><a href="#">jMeter</a></li><li><a href="#">EJB</a></li><li class="divider"></li><li><a href="#">分离的链接</a></li></ul></li><li><a href="#">PHP</a></li></ul>

在这里插入图片描述

标签页与胶囊式标签页

类描述
.nav nav-tabs标签页
.nav nav-pills胶囊式标签页
.nav nav-pills nav-stacked胶囊式标签页以垂直方向堆叠排列的
.nav-justified两端对齐的标签页，在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。
.disabled禁用的标签页
标签添加下拉菜单
带下拉菜单的胶囊式标签页
.tab-content与 .tab-pane 和 data-toggle=“tab” (data-toggle=“pill” ) 一同使用, 设置标签页对应的内容随标签的切换而更改
.tab-pane与 .tab-content 和 data-toggle=“tab” (data-toggle=“pill”)一同使用, 设置标签页对应的内容随标签的切换而更改

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/4272.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

OpenCv之图像直方图

OpenCv之图像直方图

目录 一、基本概念 二、使用OpenCv统计直方图 三、使用掩膜的直方图 一、基本概念 图像直方图是用一表示教字图像中亮度分布的直方图&#xff0c;标绘了图像中每个高度值的像素数。可以借助观察该有方图了解需要如何调整亮度分布的直方图。这种直方图中&#xff0c;横坐标的左…
阅读更多...
12. 一些开发中遇到的SQL问题

12. 一些开发中遇到的SQL问题

文章目录 一些开发中遇到的SQL问题1. sql报11090错误,原因可能是以下错误&#xff0c;在&#xff1f;占位符后有一个空格2. 占位符&#xff1f;的位置不能是表名&#xff0c;否则会无法进行预编译3. mysql中desc是关键字&#xff0c;如果字段名称为desc会报错4. 数据库中时间格…
阅读更多...
Apikit 自学日记：如何测试多个关联的 API

Apikit 自学日记：如何测试多个关联的 API

肯定会有人好奇&#xff0c;如果有多个关联的 API 如何做测试呢&#xff1f;很简单&#xff01;在 APIkit 中也有测试多个关联 API 的功能。 1、在流程测试用例详情页中&#xff0c;点击“ 添加测试步骤”&#xff0c;选择“从API文档添加API请求” 2、在对应的项目下选择关联的…
阅读更多...
CSDN 周赛 62 期

CSDN 周赛 62 期

CSDN 周赛 62 期 参赛体验选择题1234编程题1、题目名称：覆盖面积2、题目名称：机器猫参赛体验 这次没有出填空题，好评。 选择题四个，基本上，对数据库比较熟悉的人，应该都可以全部答对的。 编程题两个，嗯。。。。就是上周偷偷摸摸更新出来的四个题目之二。还以为不会出…
阅读更多...
csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板

csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板

文章目录 ⭐前言⭐利用inscode免费开放资源&#x1f496; 在inscode搭建vue3tsant项目&#x1f496; 调整配置&#x1f496; antd 国际化配置&#x1f496; 用户store&#x1f496; 路由权限&#x1f496; 预览 ⭐结束 ⭐前言 大家好&#xff0c;我是yma16&#xff0c;本文分享…
阅读更多...
3.10 Bootstrap 标签

3.10 Bootstrap 标签

文章目录 Bootstrap 标签标签 Bootstrap 标签 下面将讲解 Bootstrap 标签。标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签&#xff0c;如下面的实例所示&#xff1a; <span class"label label-default">Label</span></…
阅读更多...
如何二次封装一个el-table组件并二次复用

如何二次封装一个el-table组件并二次复用

*注:示例使用的是vue3和element进行二次封装的 首先我们来看效果图&#xff08;总共可以分为以下几个模块&#xff09;&#xff1a; 表格数据操作按钮区域表格信息提示区域表格主体内容展示区域表格分页区域 表单搜索没有封装在这里是为了降低代码的耦合性(有兴趣的可以查看我…
阅读更多...
python实现小波降噪

python实现小波降噪

文章目录 小波分解小波系数小波降噪阈值确定的一些小知识点python 实现小波去噪小波分解 上图为对信号进行3层小波分解，其中，Approximation 为近似小波系数(信号的低频成分)，Detail为细节小波系数(信号的高频成分)，分解后得到四个小波系数分别为A3,D3,D2,D1。 小波系数 小…
阅读更多...
图片速览 DCN K-means-friendly Spaces: Simultaneous Deep Learning and Clustering

图片速览 DCN K-means-friendly Spaces: Simultaneous Deep Learning and Clustering

本文使用了一种交替更新网络参数和聚类中心的方法。在网络更新完成之后&#xff0c;对于固定的网络参数和 M&#xff0c;再更新当前样本的分配向量。然后根据新的分配结果如式子3.8更新聚类中心&#xff1a; 注&#xff1a;文中还有问题是否能进行凸优化的部分 CG https…
阅读更多...
MySQL日常操作记录

MySQL日常操作记录

1.查看MySQL版本 select version();2.快速复制表结构&#xff0c;不包含相关主键及约束 create table user_test as select * from user where 12;3.uuid select uuid(),uuid_short();4.替换uuid()里的’-‘为’’ select replace(uuid(),-,);5.md5摘要 select md5(uuid()…
阅读更多...
剑指29.顺时针打印矩阵 31 栈的压入，弹出序列 03 数组中的重复数字 53缺失的数字 04二维数组中的查找

剑指29.顺时针打印矩阵 31 栈的压入，弹出序列 03 数组中的重复数字 53缺失的数字 04二维数组中的查找

class Solution { public:vector<int> spiralOrder(vector<vector<int>>& matrix) { if (matrix.size() 0 || matrix[0].size() 0&#xff09; return {};//必须要写到最前面&#xff0c;因为right和bottom-1就是负数了vector<int> result;int l…
阅读更多...
ELK-日志服务【kafka-配置使用】

ELK-日志服务【kafka-配置使用】

kafka-01 10.0.0.21 kafka-02 10.0.0.22 kafka-03 10.0.0.23 【1】安装zk集群、配置 [rootes-01 ~]# yum -y install java maven [rootes-01 ~]# tar xf apache-zookeeper-3.5.9-bin.tar.gz -C /opt/[rootes-01 ~]# cd /opt/apache-zookeeper-3.5.9-bin/conf/ [rootes-…
阅读更多...
爬虫相关知识与面试题目

爬虫相关知识与面试题目

常见的反爬虫和应对方法 参考:https://www.cnblogs.com/bsdr/p/5151891.html 0x01 常见的反爬虫 这几天在爬一个网站&#xff0c;网站做了很多反爬虫工作&#xff0c;爬起来有些艰难&#xff0c;花了一些时间才绕过反爬虫。在这里把我写爬虫以来遇到的各种反爬虫策略和应对的…
阅读更多...
剑指offer33.二叉搜索树的后序遍历序列

剑指offer33.二叉搜索树的后序遍历序列

我一开始的想法是&#xff1a;后序遍历是左右根&#xff0c;那么第一个数小于第二个数&#xff0c;第二个数大于第三个数&#xff0c;然后从第三个数开始又循环&#xff0c;显然错了&#xff0c;因为我这种是理想情况&#xff0c;是一个满二叉树。正确的解法是: class Solutio…
阅读更多...
正则表达式

正则表达式

一、正则表达式基本介绍 1. 介绍 一个正则表达式&#xff0c;就是用某种模式去匹配字符串的一个公式。很多人因为它们看上去比较古怪而且复杂所以不敢去使用&#xff0c;不过,经过练习后,就觉得这些复杂的表达式写起来还是相当简单的&#xff0c;而且&#xff0c;一旦你弄懂它…
阅读更多...
Shuffle简单理解

Shuffle简单理解

map的结果本身是无序的&#xff0c;但是map输出的结果有序 mapper和reduce是不同的机器&#xff0c;进行了网络传输&#xff0c;所以存在数据拷贝 第二次排序&#xff0c;是将每个reduce对应的task进行排序&#xff0c;然后再进入reduce maptask运行结束&#xff0c;每个mask块…
阅读更多...
能耗管理平台保障用电的安全

能耗管理平台保障用电的安全

安科瑞虞佳豪 壹捌柒陆壹伍玖玖零玖叁 6月12日&#xff0c;江苏盐城射阳县某民房起火&#xff0c;消防救援人员到场后&#xff0c;立即对火势进行扑救&#xff0c;经过20多分钟的处置&#xff0c;现场明火全部被扑灭&#xff0c;据了解&#xff0c;起火原因是电线老化短路引发…
阅读更多...
短视频seo抖音矩阵号系统源码开发搭建分享

短视频seo抖音矩阵号系统源码开发搭建分享

我们自主研发的短视频矩阵系统源码&#xff0c;技术研发的独立核心算法的视频内容管理和展示功能。无需额外的流量接口费用和复杂的配置&#xff0c;轻松地创建和管理短视频内容&#xff0c;短视频矩阵源码是指将抖音平台上的视频资源进行筛选、排序等操作&#xff0c;进而提升…
阅读更多...
Redis简介（1）

Redis简介（1）

⭐ 作者简介&#xff1a;码上言 ⭐ 代表教程&#xff1a;Spring Boot vue-element 开发个人博客项目实战教程 ⭐专栏内容&#xff1a;个人博客系统 ⭐我的文档网站&#xff1a;http://xyhwh-nav.cn/ 文章目录 Redis简介1、NoSQL1.1、什么是NoSQL&#xff1f;1.2、NoSQL 特点…
阅读更多...
【java爬虫】使用selenium获取某宝联盟淘口令

【java爬虫】使用selenium获取某宝联盟淘口令

上一篇文章我们已经介绍过使用selenium获取优惠券基本信息的方法 (15条消息) 【java爬虫】使用selenium爬取优惠券_haohulala的博客-CSDN博客 本文将在上一篇文章的基础上更进一步&#xff0c;获取每个优惠券的淘口令&#xff0c;毕竟我们只有复制淘口令才能在APP里面获取优惠…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023