WEB前端网页设计-Bootstrap 导航元素

最新推荐文章于 2024-05-14 09:55:02 发布
最新推荐文章于 2024-05-14 09:55:02 发布
阅读量770 收藏 7
点赞数 3
分类专栏： WEB-HTML/CSS 文章标签： 前端 bootstrap javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57099902/article/details/129587568
版权

目录

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")一同使用, 设置标签页对应的内容随标签的切换而更改
你可知这世上再难遇我
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Bootstrap 导航栏
shengyin714959的博客
08-14 958
导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。
前端项目-bootstrap-drawer.zip
09-03
【前端项目-bootstrap-drawer.zip】是一个前端开发资源包，主要关注的是使用Bootstrap框架来实现抽屉式导航的设计。Bootstrap是一款广泛使用的开源HTML、CSS和JS框架，它为开发者提供了丰富的预定义组件，使得构建...
19Bootstrap5导航栏
醉瑾_的博客
12-18 1257
19Bootstrap5导航栏 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>菜鸟教程Bootstrap5导航栏</title> <link rel="s
Bootstrap（二）Bootstrap菜单、模态框、及其他样式类
COOL66BOY的博客
03-16 2169
文章目录Bootstrap菜单（导航条）bootstrap模态框路径导航巨幕CSS一个补充-媒体查询 具体更多更详细的信息与使用方法访问中文官网：https://www.bootcss.com/ 也要注意图片的响应式。 Bootstrap菜单（导航条） navbar 声明导航条 navbar-default 声明默认的导航条样式 navbar-inverse 声明黑色的导航条 navbar-static-top 去掉导航条的圆角 navbar-fixed-top 将导航条固定到顶部 navbar-fi
五、Bootstrap之菜单栏和导航栏
最新发布
Itcodewizard的博客
05-14 1025
本文主要学习 Bootstrap 中提供的菜单栏和导航栏组件的使用方法和样式，按照 Bootstrap 的规范正确构建菜单栏和导航栏的 HTML 结构。Bootstrap 类：熟悉并正确应用 Bootstrap 的类名，如.navbar.nav.nav-item.nav-link等。响应式设计：学习如何使用 Bootstrap 的响应式工具类来确保菜单栏和导航栏在不同屏幕尺寸下的良好显示效果。1、通过在代码编辑器中实际编写代码，尝试创建不同样式的菜单栏和导航栏，加深理解和熟练应用；
神奇的Bootstrap 菜单 导航 全面分析
07-29 1710
转自：http://blog.csdn.net/smartbetter/article/details/52056272 本篇将主要介绍Bootstrap的菜单、导航。 本篇开始将引入javascript相关文件，如下： script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js">script> scrip
CSS技能点--垂直导航栏实例
程序员大阳
07-21 2408
垂直导航栏可以说是相当常见，尤其是在一些管理系统中，左侧往往是一个垂直导航栏，便于用户快速切换菜单。 本篇就来实现一个简单的垂直导航栏
Web前端案例3-导航栏
William_fang的博客
04-14 5250
文章目录一.案例源码二.案例效果图三.知识点总结1.页面结构分析2.标签知识3.css知识 一.案例源码 navigation.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏</title> <link href="css/navigation.css" rel="stylesheet" type=
网页设计-仿小米商城-前端期末大作业
07-28
网页设计是数字时代的一种艺术与技术相结合的工作，主要目的是通过视觉元素、交互体验和信息架构，创建用户友好的网络界面。在这个项目中，“网页设计-仿小米商城”显然关注的是模仿知名电商网站小米商城的界面设计...
WEB前端框架应用（Bootstrap）课程设计
03-07
在本“WEB前端框架应用（Bootstrap）课程设计”中，我们将深入探讨如何使用Bootstrap这一流行的前端框架来构建高效、响应式且美观的网页。Bootstrap是由Twitter开发并开源的一款框架，它为开发者提供了丰富的预设...
前端项目-knockout-bootstrap.zip
09-03
2. **Bootstrap**：Bootstrap是由Twitter开发的一个流行的开源前端框架，用于快速构建响应式和移动优先的网页。它提供了大量的CSS样式、HTML组件以及JavaScript插件，如导航条、模态框、下拉菜单等，极大地提高了...
bootsnav是一款基于Bootstrap的导航菜单布局设计jQuery插件
08-10
bootsnav是一款基于Bootstrap的导航菜单布局设计jQuery插件。该插件集成了23种Bootstrap导航菜单效果，有下拉菜单，大型菜单，侧边栏菜单，购物车菜单等，可以满足大部分网页导航菜单设计的需求。
前端项目-twitter-bootstrap.zip
09-04
Twitter Bootstrap，简称Bootstrap，是由Twitter公司开发并开源的一款前端框架，它为开发者提供了构建响应式、移动优先的Web项目所需的各种组件、工具和样式。Bootstrap自2011年发布以来，因其易用性和强大的功能，...
Web前端二级导航栏设计
IT OR 考公？
04-06 3369
初学web，220行代码，巨丑
【前端】Bootstrap案例：导航栏
karshey的博客
10-17 967
一个demo
Bootstrap系列之下拉菜单（Dropdowns）
热门推荐
老__L的博客
06-06 1万+
使用Bootstrap下拉插件切换上下文覆盖来显示链接列表和更多内容。下拉列表是可切换的，上下文覆盖显示链接列表和更多。它们与包含的Bootstrap下拉式JavaScript插件进行交互。它们是通过点击而不是悬停来切换的;这是一个有意的设计决策。下拉框建立在第三方库Popper上，它提供动态定位和视口检测。请确保在Bootstrap JavaScript之前包含或使用包含Popper的 / 。Popper不用于定位导航栏中的下拉框，因为动态定位不是必需的。如果您从源代码构建我们的JavaScript，它需
bootstrap：导航栏【基础、简单、实用】
成长的嘻嘻哥
10-05 1808
寥寥几行代码，实现简洁，直观的效果，清晰的展现了bootstrap的特点和优点
Bootstrap 导航菜单
21号先锋者
02-07 769
@{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt;&lt;!--设置字符集utf-8编码--&gt; &lt;meta name="viewport" content="width=device-wi
自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
weixin_34167043的博客
01-11 4734
有人说前端发展太快,框架太多,各有所需，各有所长。看看这幅图，估计都知道这些框架，但是大部分公司中实际要用到的也就那么几个。 发展再快,框架再多。还是得回到原点，不就是Html+Css+JavaScript吗，使用任何牛逼的框架之前你也得把这些东西玩熟练了。bootstrap上大一的时候学html的时候就听老师说过，接触也快一年多了，所以这里准备写一...
Web前端基础：Bootstrap框架.pptx
05-06
Bootstrap提供了一系列预先设计的CSS样式和组件，例如导航栏、按钮、表单、模态框、下拉菜单等，这些都可以直接使用，大大减少了开发者编写样式代码的时间。此外，框架还包含了一套JavaScript插件，如滚动监听、轮播...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你可知这世上再难遇我

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值