BootStrap中导航（代码+结果展示）

于 2024-04-15 07:57:18 发布
阅读量993 收藏 20
点赞数 28
文章标签： bootstrap 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54009581/article/details/137447969
版权

目录

一、前提

1. 导入css文件 BootStrap.min.css

2. 导入JS文件

1）Popper.js

2）JQuery.js

3）BootStrap.min.js

二、常用的几个导航栏（适用+效果+代码+代码解释）

1.标签式导航

适用:选项卡功能切换的情况

效果

代码

代码解释

2.胶囊导航

适用：强调选项卡

效果

代码

代码解释

3.面包屑导航

适用

效果

代码

代码解释

举例

代码

运行结果

面包屑导航小故事

三、下拉菜单

举例：仍以京东为例

代码

代码解释

运行结果

四、完整代码

一、前提

1. 导入css文件 BootStrap.min.css

解释：Bootstrap.min.css是经过BootStrap.css压缩的CSS文件。由于压缩过程会删除不必要的空格和注释，因此Bootstrap.min.css文件相比bootstrap.css更小，加载速度更快。

Bootstrap.css与Bootstrap.min.css链接如下：

链接：https://pan.baidu.com/s/1SoE5UzZVH0dr5yQmz8-hYA 
提取码：33tf

2. 导入JS文件

1）Popper.js

导入：

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>

解释：下拉菜单需要用到

2）JQuery.js

导入： <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

解释：bootstrap依赖JQuery开发，因此JQuery需放在Bootstrap之前，否则会报错

3）BootStrap.min.js

解释：

为Bootstrap.js的压缩文件

同时使用Bootstrap与Popper实现下拉菜单的原因，Bootstrap.js提供了下拉菜单的交互功能，而Popper.js则负责计算和定位下拉菜单的位置，确保其正确地显示在触发元素的附近。

Bootstrap.js资源链接：

链接：https://pan.baidu.com/s/1R1Cjx_BoriuKBX82dCw9pg 
提取码：lvjr

二、常用的几个导航栏（适用+效果+代码+代码解释）

前提说明：开始加nav类的作用是实现水平对齐，消除列表样式

另外，若有需要下面有完整代码

1.标签式导航

适用:选项卡功能切换的情况
效果

代码
<ul class="nav nav-tabs">
	<li class="nav-item"><a href="" class="nav-link">1</a></li>
	<li class="nav-item"><a href="" class="nav-link">2</a></li>
	<li class="nav-item"><a href="" class="nav-link">3</a></li>
	<li class="nav-item"><a href="" class="nav-link">4</a></li>
</ul>

代码解释

一个标签导航（nav-tabs）包含四个子项（nav-item）

一个子项包含一个链接样式（a.nav-link）

2.胶囊导航

适用：强调选项卡
效果

代码
<ul class="nav nav-pills">
	<li class="nav-item"><a href="" class="nav-link active">1</a></li>
	<li class="nav-item"><a href="" class="nav-link">2</a></li>
	<li class="nav-item"><a href="" class="nav-link">3</a></li>
	<li class="nav-item"><a href="" class="nav-link">4</a></li>
</ul>
代码解释

一个胶囊导航（nav-tabs）包含四个子项（nav-item）

子项需要用active激活才能实现胶囊效果

一个子项包含一个链接样式（a.nav-link）

3.面包屑导航

适用

定位目前的位置，从而反应如何返回原来的位置，可以理解为 找到来时的路

效果

代码
<ul class="breadcrumb">
	<li class="breadcrumb-item"><a href="">1</a></li>
	<li class="breadcrumb-item"><a href="">2</a></li>
	<li class="breadcrumb-item"><a href="">3</a></li>
	<li class="breadcrumb-item"><a href="">4</a></li>
</ul>
代码解释

一个面包屑导航（breadcrumb）包含4个子项（breadcrumb-item）

一个子项包含一个链接（a）

若有nav-link会改变面包屑导航的样式

举例

京东界面，点击分类的内容后会出现图1样式

路径为：厨具→餐具→餐具套装

用户可以清晰看到当前位置，以及轻松返回原点（厨具）

代码
<ul class="breadcrumb">
	<li class="breadcrumb-item"><a href="">厨具</a></li>
	<li class="breadcrumb-item"><a href="">餐具</a></li>
	<li class="breadcrumb-item"><a href="">餐具套装</a></li>
</ul>

 可在Bootstrap.min.css中双击ctrl查找breadcrumb-item将conten中的' / '更改为 ' > ',进行保存

运行结果

面包屑导航小故事

Bootstrap面包屑导航的小故事，来源于童话故事"汉赛尔和格莱特"。

在故事中，汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。而Bootstrap中的面包屑导航（Breadcrumbs）也是一个简单的带有.breadcrumb class 的无序列表，其作用是告诉访问者他们目前在网站中的位置以及如何返回。

三、下拉菜单

举例：仍以京东为例

代码

<ul class="breadcrumb">
	<li class="breadcrumb-item">
	    <a href="">厨具</a>
	</li>
	<li class="breadcrumb-item">
		<a href="" class="dropdown-toggle" data-toggle="dropdown">餐具</a>
		<ul class="dropdown-menu">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</li>
	<li class="breadcrumb-item">
		<a href="" class="dropdown-toggle" data-toggle = "dropdown">餐具套装</a>
		<ul class="dropdown-menu">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
				
	</li>
</ul>

代码解释

<a href="" class="dropdown-toggle" data-toggle="dropdown">餐具</a>
<ul class="dropdown-menu">li*4<ul>

toggle：状态切换，可以理解为开关

dropdown-toggle：生成下拉开关图标

data-toggle：数据触发条件

dropdown-menu: 下拉菜单

运行结果

四、完整代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>常见的几个导航</title>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
	</head>

	<body>
		<h4>标签导航</h4>
		<!--nav的作用是实现水平放置，消除列表样式-->
		<ul class="nav nav-tabs">
			<li class="nav-item">
				<a href="" class="nav-link">1</a>
			</li>
			<li class="nav-item">
				<a href="" class="nav-link">2</a>
			</li>
			<li class="nav-item">
				<a href="" class="nav-link">3</a>
			</li>
			<li class="nav-item">
				<a href="" class="nav-link">4</a>
			</li>
		</ul>

		<h4>胶囊导航,若要显示样式，需要在nav-link后用active激活</h4>
		<ul class="nav nav-pills">
			<li class="nav-item">
				<a href="" class="nav-link active">1</a>
			</li>
			<li class="nav-item">
				<a href="" class="nav-link">2</a>
			</li>
			<li class="nav-item">
				<a href="" class="nav-link">3</a>
			</li>
			<li class="nav-item">
				<a href="" class="nav-link">4</a>
			</li>
		</ul>

		<h4>面包屑导航</h4>
		<ul class="breadcrumb">
			<li class="breadcrumb-item">
				<a href="">1</a>
			</li>
			<li class="breadcrumb-item">
				<a href="">2</a>
			</li>
			<li class="breadcrumb-item">
				<a href="">3</a>
			</li>
			<li class="breadcrumb-item">
				<a href="">4</a>
			</li>
		</ul>

		<h4>京东举例</h4>
		<ul class="breadcrumb">
			<li class="breadcrumb-item">
				<a href="">厨具</a>
			</li>
			<li class="breadcrumb-item">
				<a href="">餐具</a>
			</li>
			<li class="breadcrumb-item">
				<a href="">餐具套装</a>
			</li>
		</ul>

		<h4>仍以京东为例，单选下拉菜单如下</h4>
		<ul class="breadcrumb">
			<li class="breadcrumb-item">
				<a href="">厨具</a>
			</li>
			<li class="breadcrumb-item">
				<!--dropdown-toggle生成下拉开关图标，data-toggle，数据触发条件-->
				<a href="" class="dropdown-toggle" data-toggle="dropdown">餐具</a>
				<ul class="dropdown-menu">
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
				</ul>
			</li>
			<li class="breadcrumb-item">
				<a href="" class="dropdown-toggle" data-toggle = "dropdown">餐具套装</a>
				<ul class="dropdown-menu">
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
				</ul>
				
			</li>
		</ul>


		<!--下拉菜单，Popper与Bootstrap一同实现-->
		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
		<!--Bootstrap依赖于juquery，juquery放在前面-->
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	</body>

</html>

daima交响曲
关注
  • 28
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
bootstrap获取弹框结果_全面解析Bootstrap弹窗的实现方法
weixin_33872754的博客
12-31 531
一. 结构分析Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：☑ 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮☑ 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容☑ 弹出框脚部，一般使用...
响应式布局2：手写响应式导航栏（BootStrap实现以及原生实现）
stu_kk的博客
12-18 2804
响应式布局2：手写响应式导航栏（BootStrap实现以及原生实现）笔记
Bootstrap入门Demo——制作路径导航栏
weixin_33890526的博客
06-08 183
                           今天在在群里聊天的时候看到一仅仅程序猿发了一张用Bootstrap做的界面。感觉挺好看。然后去官网看了下组件。发现都挺美丽的，然后看到了路径导航栏，刚好要做这个东西，然后就下了Bootstrap的源代码看了看。    一，源代码文件简单介绍                           ...
BootStrap路径导航
秋城落叶的博客
03-31 381
在一个带有层次的导航结构中标明当前页面的位置。 各路径间的分隔符已经自动通过 CSS 的:before和content属性添加了。 <!DOCTYPEhtml> <scriptsrc="js/jquery/2.0.0/jquery.min.js"></script> <linkhref="...
Bootstrap 路径导航breadcrumb
weixin_30315905的博客
08-13 177
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>路径导航breadcrumb</title> <!-- breadcrumb(约定俗成,且可被搜索引擎爬到) ...
【Bootstrap】013-组件：导航、导航条、路径导航
訾博（ZiBo）的博客
10-07 726
目录 一、导航 1、概述 2、标签页 代码演示： 运行结果： 3、胶囊式标签页 代码演示： 运行结果： 4、两端对齐的标签页 代码演示： 运行结果： 5、禁用的链接 代码演示： 运行结果： 6、添加下拉菜单 带下拉菜单的标签页： 二、导航条 1、默认样式的导航条 代码演示： 运行结果： 2、品牌图标 代码演示： 运行结果： 3、表单 代码演示： 运行结果： 备注： 4、按钮 代码演示： 运行结果： 备注： 5、文本 代码演示： 运行结果：
Bootstrap导航中表单简单实现代码
08-31
本篇将详细介绍如何在Bootstrap导航中实现一个简单的表单。 首先，我们来看HTML结构。在Bootstrap中，导航通常使用`<nav>`元素配合`.navbar`类来创建。在本例中，我们使用了`.navbar-default`作为导航的基础样式，...
bootstrap中的导航条实例代码详解
10-16
要创建一个基本的Bootstrap导航条，你需要在HTML中定义一个父级容器，并添加类名`navbar`和`navbar-default`。`navbar-default`用于设置导航条的默认颜色，如果你希望导航条呈现相反的颜色，可以将这个类替换为`...
Bootstrap多级导航栏(级联导航)的实现代码
09-02
在Bootstrap中，导航栏（Navbar）是常用的设计元素，用于展示网站的主要部分和链接。然而，官方提供的导航栏默认支持最多两级菜单。当需要创建多级（如三级或更多级）的导航时，我们需要借助额外的插件或自定义代码...
BootStrap创建响应式导航条实例代码
09-02
这个实例代码包含了创建响应式导航条的基本元素，通过调整不同的屏幕尺寸，你可以观察到导航条如何根据设备宽度变化而改变其展示形式。Bootstrap的响应式设计主要基于媒体查询（Media Queries）和栅格系统（Grid ...
bootstrap实现响应式自适应导航栏，并实现平滑滚动
07-11
利用bootstrap和jQuery制作的一个响应式导航栏，即能够监听页面滚动事件，当页面滚动到页面某位置时导航栏会自动发生变化。同时点击导航栏滚动时利用简单的jQuery实现了平滑滚动。而且能自适应屏幕大小的变化，监听了onresize事件。
bootstrap导航、选项卡实现代码
08-31
1. **Bootstrap导航（Navigation）**： - `nav` 类：这是导航的基础样式，用于创建基础的导航条。 - `nav-tabs` 类：用于创建顶部水平的选项卡式导航。在示例中，可以看到`<ul>`元素被赋予了这个类。 - `nav-...
bootstrap-路径导航 分页 进度条
qq_39396275的博客
08-05 415
路径导航 &lt;ol class="breadcrumb"&gt; &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Library&lt;/a&gt;&lt;/li&gt; &
BootStrap 统计分析 浅析
热门推荐
Alexander_Frank的博客
01-19 1万+
Bootstrap 分析方式属于一种无参数分析方法。主要是为了用经验分布代替真正的分布。主要依赖对观测到的样本的重新抽样。具体来说：Bootstrap方法从观察数据出发，不需任何分布假定，针对统计学中的参数估计及假设检验问题，利用Bootstrap方法产生的自举样本计算的某统计量的数据集可以用来反映该统计量的抽样分布，即产生经验分布，这样，即使我们对总体分布不确定，也可以近似估计出该统计量及其置信
前端----Boostrap(二)
qq_38977566的博客
02-28 113
2.Bootstrap的使用 2.1 表格 和之前的表格相比，标签更丰富更加语义化，效果更佳美观 2.1.1 丰富的标签 <table> 为表格添加基础样式 <thead> 表格标题行的容器元素（<tr>） <tbody> 表格主体中的表格行的容器元素（<tr>） <tr> 表格行 <td> 默认的表格单元格。 <th> 特殊的表格单元格，（居中和加粗的效果）。必须在<thead&g
Bootstrap深度解析
旅行的风筝
09-22 342
二级标题 三级标题四级标题注：
Bootstrap - 详细实现导航栏组件源码，常见网站导航条效果完整代码（导航栏在移动设备的视图中是折叠的，具备响应式！）
最新发布
王佳斌
02-27 1155
导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap+JQuery 项目中，实现导航栏功能效果。
关于BootStrap的详细分析系列篇一
qq_35146979的博客
08-16 3428
Bootstrap的详细分析 随着BS架构的流行，越来越多的网站被开发，对于网页的美与丑没有太多明确的划分，当然这不是很好拿捏的事情，因此便出现了很多前端的框架，其中比较流行的就是Bootstrap，很多小伙伴想要进行学习，那么让我们开启学习Bootstrap之路吧！ 一， 这里面的Drapdown是一个二级菜单，出现频率很高，让我们探寻一下他的实现原理。 代码如下：        
生成导航代码
05-31
抱歉，我是一个自然语言处理模型，无法为您生成导航代码。但您可以参考以下代码实现一个简单的导航菜单： ```c #include <stdio.h> int main() { int choice; printf("欢迎使用C语言路线导航！\n"); printf("请选择您要进行的操作：\n"); printf("1. 入门基础\n"); printf("2. 编程实践\n"); printf("3. 深入学习\n"); printf("4. 项目实践\n"); printf("5. 学习其他编程语言\n"); printf("请输入您的选择："); scanf("%d", &choice); switch (choice) { case 1: printf("您选择了入门基础，推荐学习C语言入门教程。\n"); break; case 2: printf("您选择了编程实践，推荐使用LeetCode平台进行实践。\n"); break; case 3: printf("您选择了深入学习，推荐阅读C专家编程。\n"); break; case 4: printf("您选择了项目实践，可以在GitHub上寻找开源项目进行参与。\n"); break; case 5: printf("您选择了学习其他编程语言，建议学习Java、Python等。\n"); break; default: printf("无效的选择！\n"); break; } return 0; } ``` 以上是一个简单的导航菜单代码，可以根据选择的不同，输出不同的建议和推荐。希望能对您有所帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值