18Bootstrap导航

最新推荐文章于 2023-07-22 15:26:34 发布
最新推荐文章于 2023-07-22 15:26:34 发布
阅读量156 收藏 1
点赞数
分类专栏： Bootstrap5 文章标签： bootstrap 前端 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46452300/article/details/122016693
版权

18Bootstrap导航

<!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="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!--
如果你想创建一个简单的水平导航栏，可以在 <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>
<!--
垂直导航
.flex-column 类用于创建垂直导航：
-->
<div class="container mt-3">
    <h2>垂直导航</h2>
    <p>.flex-column 类用于创建垂直导航：</p>
    <ul class="nav flex-column">
        <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>
<!--
选项卡
使用 .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>
<!--
胶囊下拉菜单
-->
<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>
                让世界本身成为世界，让它成为世界; 让它成为世界的伤口;
                但是他们花了这么多时间工作和巨大的痛苦。
            </p>
        </div>
        <div id="menu1" class="container tab-pane fade"><br>
            <h3>Menu 1</h3>
            <p>因为当我到最少的时候，我们当中谁会徒劳地劳动，除了其中一个可能能够。</p>
        </div>
        <div id="menu2" class="container tab-pane fade"><br>
            <h3>Menu 2</h3>
            <p>但是，如果您看到所有这些都是错误的，原告的快乐和赞美的悲伤，我将打开整个过程。</p>
        </div>
    </div>
</div>
<!--
胶囊状动态选项卡
胶囊状动态选项卡只需要将以上实例的代码中 data-bs-toggle
属性设置为 data-bs-toggle="pill":
-->
<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="#home1">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="pill" href="#menu11">Menu 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="pill" href="#menu22">Menu 2</a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div id="home1" class="container tab-pane active"><br>
            <h3>HOME</h3>
            <p>
                让世界本身成为世界，让它成为世界; 让它成为世界的伤口;
                但是他们花了这么多时间工作和巨大的痛苦。
            </p>
        </div>
        <div id="menu11" class="container tab-pane fade"><br>
            <h3>Menu 1</h3>
            <p>因为当我到最少的时候，我们当中谁会徒劳地劳动，除了其中一个可能能够。</p>
        </div>
        <div id="menu22" class="container tab-pane fade"><br>
            <h3>Menu 2</h3>
            <p>但是，如果您看到所有这些都是错误的，原告的快乐和赞美的悲伤，我将打开整个过程。</p>
        </div>
    </div>
</div>
</body>
</html>

在这里插入图片描述

心醉瑶瑾前
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
纯静态的网址导航网站项目基于bootstrap前端框架开发
08-10
这是一个纯静态的网址导航网站，内容均由viggo收集并整理。项目基于bootstrap前端框架开发。
基于bootstrap的网站导航页
07-04
基于bootstrap框架的网站导航页实现，包括巨幕、导航栏、下拉菜单以及内嵌页面实现
Bootstrap系列之导航条（Navbar）
热门推荐
老__L的博客
06-18 1万+
为Bootstrap强大的，响应灵敏的导航头，导航栏提供文档和示例，包括对面包屑、导航、折叠插件等的支持。在开始使用导航栏之前，以下是你需要知道的导航栏内置了对一些子组件的支持。根据需要从以下选项中进行选择下面是一个包含响应式光主题导航条的所有子组件的例子，它会在lg(大)断点处自动折叠。 这个例子使用了和工具类。可以应用于大多数元素，但是锚是最好的，因为一些元素可能需要实用程序类或自定义样式。 将图片添加到可能总是需要自定义样式或工具来适当的大小。下面是一些示例。 Navbar导航链接建立在我们的选
23种bootstrap导航菜单布局
01-08
一款基于Bootstrap的导航菜单布局设计jQuery插件。该插件集成了23种Bootstrap导航菜单效果，有下拉菜单，大型菜单，侧边栏菜单，购物车菜单等，可以满足大部分网页导航菜单设计的需求。
5个不同样式bootstrap导航菜单模板
11-13
bootstrap,导航,菜单,HTML5,模板.
Bootstrap 导航
歪脖先生的博客
03-09 485
导航Bootstrap提供了灵活、多样的导航组件，允许使用相同的标签和不同的类，来实现不同风格的导航，具有非常高的可定制性。创建导航组件Bootstrap中的导航都是基于列表实现的，可以使用无序列表（&lt;ul&gt;）和有序列表（&lt;ol&gt;）来定义导航结构，暂不支持描述列表（&lt;dl&gt;）。所有导航组件都具有相同的结构，并公用一个 .nav 的类，只需再为它们添加额外的类，就...
Bootstrap导航条
歪脖先生的博客
05-19 7077
导航条 Bootstrap中的导航条（navbar）是放在应用或网站的头部，作为导航的响应式基础组件，它能够根据浏览器窗口宽度，自动调整导航条的显示状态，在移动设备上折叠（并且可开可关），在视口（viewport）宽度增加时逐渐变为水平展开模式。 Bootstrap 对基本导航条进行了一些扩展，除了站点名称和导航链接外，还可以在导航条中添加表单、按钮、下拉菜单、文本、非导航链接等。 创建导航...
Flask Bootstrap 导航条
人生苦短，何妨一试
07-22 526
1，引用Bootstrap css样式，导航栏页面跳转。2，页面两列div自适应。
bootstrap 导航栏自适应
在路上
07-17 1623
参考链接如下： https://blog.csdn.net/sunqian_happy/article/details/50498547
bootstrap切换导航栏
weixin_43293451的博客
06-18 3504
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bootstrap</title> <style type="text/css"> div.d1{ padding-top:70px; } &...
bootstrap导航菜单模板
03-31
在“bootstrap导航菜单模板”中，我们通常会涉及到以下几个核心知识点： 1. **导航条（Navbar）**: Bootstrap的导航条组件是网页设计中的重要元素，它提供了多种样式和功能，如固定顶栏、折叠菜单、品牌标识、导航...
BootStrap 导航条实例代码
08-30
Bootstrap 导航条实例代码详解 Bootstrap 是一个流行的前端框架，提供了许多实用的组件和插件，其中导航条是其中一个非常重要的组件。本文将详细介绍 Bootstrap 导航条的实例代码，包括默认的导航条和带有表单的...
一个炫酷的Bootstrap导航菜单
08-31
主要为大家详细介绍了一个炫酷的Bootstrap导航菜单的制作方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
简单实现bootstrap导航效果
08-31
在本篇文章中，我们将深入探讨如何简单实现Bootstrap导航效果。 首先，要创建Bootstrap导航，我们需要引入其核心的CSS和JavaScript文件。在示例代码中，我们看到在`<head>`部分引用了一个名为`bootstrap.css`的CSS...
bootstrap导航条实现代码
08-31
Bootstrap导航条是网页设计中常用的一种组件，它提供了一种整洁、响应式的布局方式，用于组织网站的主要导航链接。Bootstrap框架是由Twitter开发的开源前端开发工具，它包含一系列预定义的CSS类和JavaScript插件，...
Bootstrap——导航栏
xun__xing的博客
07-31 1845
导航栏一、导航栏1.基本2.表单3.文本处理4.配色方案5.居中容器6.定位7.响应式8.拓展 一、导航栏 1.基本 导航栏需要使用.navbar 来定义，并使用 .navbar-expand{-sm|-md|-lg|-xl} 用于响应式布局以及使用配色方案Class 。 <nav class="navbar navbar-expand-lg bg-light"> <a href="#" class="navbar-brand"> <img src="http://
Bootstrap 导航栏
Charge8的博客
02-01 2303
一、导航元素 1、导航标签并添加标签页     注意 .nav-tabs 类依赖 .nav 基类。 &lt;div class="container"&gt; &lt;ul class="nav nav-tabs"&gt; &lt;li class="active"&gt;&lt;a href="#tab_1" da
bootstrap 导航条居中
qq_40463625的博客
10-08 4217
为了实现bootstrap导航条里面的导航按钮居中，并响应小屏幕，着实折腾了一波，。记录一下： 1：.navbar-collapse 设置 文字居中 text-align: center; 2：导航容器 .navbar-nav，设置为行内块元素 display: inline-block; 3：导航选项 li， 设置为块元素 display: block; <nav class="navbar navbar-default navbar-inverse navbar-fixed-top nav-ju
Bootstrap固定导航条
歪脖先生的博客
05-20 5136
固定导航条 默认情况下，导航条的定位属性为 static，它的位置由它的HTML代码中定义的顺序出现，并随着页面向下滚动。 很多时候，我们却希望导航条固定在浏览器窗口的顶部或底部，这种固定导航条的应用在移动端尤为常见。 1、固定在顶部 如果想让导航条固定在顶部，只需在 .navbar 类追加一个 .navbar-fixed-top 类即可。还可以在导航条内部包含一个.container或....
bootstrap导航菜单
最新发布
09-05
Bootstrap导航菜单是一种在网页上创建响应式和交互性导航栏的框架。它为开发者提供了一种简单且灵活的方法来设计和定制导航栏，以满足不同的需求。 使用Bootstrap导航菜单可以轻松创建水平或垂直的导航栏，并支持...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

心醉瑶瑾前

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

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

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

打赏作者

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

抵扣说明：

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

余额充值