bootstrap导航

最新推荐文章于 2024-04-15 07:57:18 发布
最新推荐文章于 2024-04-15 07:57:18 发布
阅读量523 收藏
点赞数
分类专栏： 前端 文章标签： bootstrap导航 bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn_zy_/article/details/82906392
版权

今天向大家介绍一些bootstrap的导航类型，包括响应式导航，多级导航等。内容有些长，还请点击阅读更多
在这里插入图片描述

<html>
	<head>
		<meta charset="utf-8" />
		 <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css"/>
		<script src="bootstrap-3.3.7-dist/js/jquery-2.1.4.min.js"></script>
		<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
	</head>
	<body>
		<!--标签页导航元素-->
		<ul class="nav nav-tabs " >
			
			<li class="active"><a href="#">首页</a></li>
			<li class="disabled"><a href="#">产品</a></li>
			<li><a href="#">服务</a></li>
			<li><a href="#">案例</a></li>
			<li><a href="#">介绍</a></li>
			<li><a href="#">联系我们</a></li>
		</ul>
		
		<!--胶囊式的导航元素-->
		<ul class="nav nav-pills">
			<li class="active"><a href="#">首页</a></li>
			<li><a href="#">产品</a></li>
			<li><a href="#">服务</a></li>
			<li><a href="#">案例</a></li>
			<li><a href="#">介绍</a></li>
			<li><a href="#">联系我们</a></li>
		</ul>
		
		<!--垂直的胶囊式导航元素-->
		<ul class="nav nav-pills nav-stacked" style="width: 300px;">
			<li class="active"><a href="#">首页</a></li>
			<li><a href="#">产品</a></li>
			<li><a href="#">服务</a></li>
			<li><a href="#">案例</a></li>
			<li><a href="#">介绍</a></li>
			<li><a href="#">联系我们</a></li>
		</ul>
		
		<!--自适应的导航元素-->
		<!--注意大于768px,宽度会与父级宽度相同；小于768px,会自动变成垂直导航元素-->
		<ul class="nav nav-pills nav-justified" >
			<li class="active"><a href="#">首页</a></li>
			<li><a href="#">产品</a></li>
			<li><a href="#">服务</a></li>
			<li><a href="#">案例</a></li>
			<li><a href="#">介绍</a></li>
			<li><a href="#">联系我们</a></li>
		</ul>
		
		<!--导航元素的禁用状态-->
		<ul class="nav nav-pills">
			<li class="active"><a href="#">首页</a></li>
			<li class="disabled"><a href="#">产品</a></li>
			<li><a href="#">服务</a></li>
			<li><a href="#">案例</a></li>
			<li><a href="#">介绍</a></li>
			<li><a href="#">联系我们</a></li>
		</ul>
		
		<!--带下拉的导航元素-->
		<ul class="nav nav-tabs">
			<li class="active"><a href="#">首页</a></li>
			<li class="disabled"><a href="#">产品</a></li>
			<li><a href="#">服务</a></li>
			<li><a href="#">案例</a></li>
			<li class="dropdown">
				<a href="#" type="button" class="btn" 
					data-toggle="dropdown">
					前端开发<span class="caret"></span>
				</a>
				<ul class="dropdown-menu">
					<li><a href="#">1</a></li>
					<li><a href="#">1</a></li>
					<li><a href="#">1</a></li>
					<li class="divider"></li>
					<li><a href="#">1</a></li>
				</ul>
			</li>
		</ul>
				<!--面包屑导航-->
		<ol class="breadcrumb">
			<li><a href="#">首页</a></li>
			<li><a href="#">前端开发</a></li>
			<li><a href="#">HTML</a></li>
			<li class="active">CSS</li>
		</ol></body></html>

class="divider"这个是下拉导航里面每一个li标签之间的横线，需要加一个空的li标签，长什么样子见下图
接下来是一些响应式的导航和特殊导航
在这里插入图片描述

<html>
	<head>
		<meta charset="UTF-8">
		 <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css"/>
		<script src="bootstrap-3.3.7-dist/js/jquery-2.1.4.min.js"></script>
	    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
	    <style type="text/css">
	    	
	    </style>
	</head>
	<body>
		<!--默认的导航栏-->
		<nav class="navbar navbar-default " >
			<div class="container-fluid">
				<div class="navbar-header">
					<a href="#" class="navbar-brand">前端</a>
				</div>
				<div>
					<ul class="nav navbar-nav">
						<li ><a href="#">HTML</a></li>
						<li><a href="#">CSS</a></li>
						<li class="dropdown">
							<a href="#" data-toggle="dropdown">
								JavaScript <span class="caret"></span>
							</a>
							<ul class="dropdown-menu">
								<li><a href="#">Jquery</a></li>
								<li class="divider"></li>
								<li><a href="#">Jquery</a></li>
								<li class="divider"></li>
								<li><a href="#">Jquery</a></li>
							</ul>
						</li>
						
					</ul>
				</div>
			</div>
		</nav>
		<!--响应式的导航栏-->
		<nav class="navbar navbar-default">
			<div class="container-fluid">
				<div class="navbar-header">
					<a href="#" class="navbar-brand">123</a>
					<button class="navbar-toggle" 
						data-toggle="collapse" data-target="#111">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				<div class="collapse navbar-collapse" id="111">
					<ul class="nav navbar-nav ">
						<li><a href="#">123</a></li>
						<li><a href="#">123</a></li>
						<li><a href="#">123</a></li>
					</ul>
				</div>
			</div>
		</nav>
		<!--响应式的导航栏-->
		<nav class="navbar navbar-default">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" 
						data-target="#example-navbar-collapse">
						<!--<span class="sr-only">切换导航</span>-->
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a href="#"class="navbar-brand">前端开发</a>
				</div>
				
				<div class="collapse navbar-collapse" id="example-navbar-collapse">
					<ul class="nav navbar-nav">
						<li ><a href="#">HTML</a></li>
						<li><a href="#">CSS</a></li>
						<li class="dropdown">
							<a href="#" data-toggle="dropdown">
								JavaScript <span class="caret"></span>
							</a>
							<ul class="dropdown-menu">
								<li><a href="#">Jquery</a></li>
								<li class="divider"></li>
								<li><a href="#">Jquery</a></li>
								<li class="divider"></li>
								<li><a href="#">Jquery</a></li>
							</ul>
						</li>
					</ul>
				</div>
				
			</div>
		</nav>
		
		<!--带表单和按钮的导航栏-->
		<nav class="navbar navbar-default">
			<div class="container-fluid">
				<div class="navbar-header">
					<a href="#" class="navbar-brand">前端开发</a>
				</div>
				<form class="navbar-form navbar-left" >
					<div class="form-group">
						<input type="text" class="form-control"  placeholder="请输入关键字"/>
					    <button type="submit" class="btn btn-default">搜索</button>
					</div>
				</form>
			</div>
		</nav>
		
		
		<!--导航条辅助样式-->
		<!--navbar-inverse反转样式-->
		<!--navbar-fixed-top顶部对齐-->
		<!--navbar-fixed-bottom底部对齐-->
		<nav class="navbar navbar-inverse ">
			<div class="container-fluid">
				<div class="navbar-header">
					<a href="#" class="navbar-brand">前端开发</a>
				</div>
				<form class="navbar-form navbar-left" >
					<div class="form-group">
						<input type="text" class="form-control"  placeholder="请输入关键字"/>
					    <button type="submit" class="btn btn-default">搜索</button>
					</div>
				</form>
			</div>
		</nav>
	</body>
</html>

当当当，接下来三级导航隆重出场
铿锵铿锵铿锵铿锵，，，，，，
在这里插入图片描述

<li class="dropdown">
	<a href="#" data-toggle="dropdown">
		VUE <span class="caret"></span>
	</a>
	<ul class="dropdown-menu">
			<li>
				<a href="#">1</a>
			</li>
			<li class="divider"></li>
			<li>
			<a href="#">1</a>
			</li>
			<li class="divider"></li>
			<li>
			<a href="#">1</a>
			</li>
			<li class="dropdown-submenu">
				<a tabindex="-1" href="javascript:;">一级菜单</a>
			<ul class="dropdown-menu">
				<li>
				<a tabindex="-1" href="javascript:;">二级菜单</a>
					</li>
											<li class="divider"></li>
											<li class="dropdown-submenu">
												<a href="javascript:;">二级菜单</a>
												<ul class="dropdown-menu">
													<li>
														<a href="javascript:;">三级菜单</a>
													</li>
												</ul>
											</li>
										</ul>
									</li>
								</ul>
							</li>

三级菜单只写这些是不行的，还要添加一些css样式

.dropdown-submenu {
            position: relative;
        }
        .dropdown-submenu > .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -6px;
            margin-left: -1px;
            -webkit-border-radius: 0 6px 6px 6px;
            -moz-border-radius: 0 6px 6px;
            border-radius: 0 6px 6px 6px;
            background: rgba(0,0,0,0.5);
        }
        .dropdown-submenu:hover > .dropdown-menu {
            display: block;
        }
        .dropdown-submenu > a:after {
            display: block;
            content: " ";
            float: right;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            border-width: 5px 0 5px 5px;
            border-left-color: #ccc;
            margin-top: 5px;
            margin-right: -10px;
        }
        .dropdown-submenu:hover > a:after {
            border-left-color: #fff;
        }
        .dropdown-submenu.pull-left {
            float: none;
        }
        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }
薛洋不吃糖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
bootstrap框架之导航
青菜白玉堂的博客
02-23 293
导航 种类： 选项卡导航 .nav-tabs，可以结合Tab插件使用显示tab的内容 胶囊式选项卡导航 .nav-pills 堆叠式导航 .nav-stacked，其实效果就是竖着的胶囊式选项卡导航 自适应导航：在上面的基础上添加 .nav-justified。设置li充满整个父容器 <ul class="nav nav-tabs"></ul> <ul class...
Bootstrap 导航栏
yangman
11-25 189
示例： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=...
基于bootstrap的网站导航页
07-04
基于bootstrap框架的网站导航页实现，包括巨幕、导航栏、下拉菜单以及内嵌页面实现
Bootstrap导航
一根火柴博客
04-26 339
Bootstrap 导航 1. 定义导航组件 基本结构： <!-- 基本导航组件 --> <ul class="nav"> <li class="active"><a href="#">首页</a></li> <li><a href="#">导航标题1</a></li> ...
Bootstrap 导航
书香水墨
07-24 539
一、Bootstrap 导航 1.1 水平导航栏 如果你想创建一个简单的水平导航栏，可以在 <ul> 元素上添加.nav类，在每个 <li> 选项上添加 .nav-item 类，在每个链接上添加.nav-link 类 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例&l...
Bootstrap之导航
qq_44703604的博客
04-19 345
一、导航条 1.普通版本 <ul class="nav "> <li class="nav-item "> <a href="" class="nav-link ">首页</a> </li> <li class="nav-item"> <a href="" class="nav-link">首页</a>
Bootstrap系列之导航（Navs）
老__L的博客
06-18 4873
关于如何使用Bootstrap包含的导航组件的文档和示例。Bootstrap中可用的导航共享一般的标记和样式，从基本的类到激活和禁用状态。交换修饰符类以在每种样式之间切换。基本的组件是用flexbox构建的，为构建所有类型的导航组件提供了一个强大的基础。它包括一些样式重写(用于处理列表)，一些链接填充用于更大的点击区域，以及基本禁用的样式。 整个过程都使用类，因此您的标记可以非常灵活。使用如上图，如果您的项目的顺序是很重要的，或你自己滚元素。因为使用了，所以链接的行为与nav项目相同，但没有额外的标记。
23种bootstrap导航菜单布局
01-08
在这个主题“23种bootstrap导航菜单布局”中，我们将深入探讨如何利用Bootstrap的组件和jQuery插件来创建多种导航菜单效果。 首先，Bootstrap的导航菜单主要基于`<nav>`和`<ul>`元素构建，通过应用不同的类（如`....
一个炫酷的Bootstrap导航菜单
08-31
主要为大家详细介绍了一个炫酷的Bootstrap导航菜单的制作方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap导航菜单点击后无法自动添加active的处理方法
10-18
总结来说，解决Bootstrap导航菜单点击后无法自动添加“active”类的问题的关键在于，通过编写适当的JavaScript代码，动态地根据当前页面的URL地址来判断并更新导航菜单项的激活状态。这种方法简单有效，但需要注意，...
5个不同样式bootstrap导航菜单模板
03-19
1. **Bootstrap导航栏基础** Bootstrap的导航栏（Navbar）是其核心组件之一，它提供了固定在顶部、底部或者折叠式的导航选项。通过使用`.navbar`类，我们可以轻松创建一个基础的导航栏。此外，`.navbar-expand-*`类...
bootstrap导航菜单模板
03-31
在“bootstrap导航菜单模板”中，我们通常会涉及到以下几个核心知识点： 1. **导航条（Navbar）**: Bootstrap的导航条组件是网页设计中的重要元素，它提供了多种样式和功能，如固定顶栏、折叠菜单、品牌标识、导航...
Bootstrap中的导航都有哪些？
LuckXinXin的博客
07-13 1678
导航元素：有class="nav nav-tabs"的标签页导航，还有class="nav nav-pills"的胶囊式标签页导航； 导航栏：class=“navbar navbar-default” role=“navigation”； 面包屑导航：class=“breadcrumb”
BootStrap中导航（代码+结果展示）
最新发布
weixin_54009581的博客
04-15 1190
导航内容：标签式导航，胶囊导航，面包屑导航，下拉菜单的实现。形式：适用情况+效果+代码+代码解释+运行结果。
3.7 Bootstrap 导航栏
梁辰兴的博客
07-16 953
导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。 默认的导航栏创建一个默认的导航栏的步骤如下：下面的实例演示了这点： 为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 中。折叠起来的导航栏
Bootstrap (十九)
shi199434的博客
12-13 202
Bootstrap 导航元素 本章我们将讲解 Bootstrap 提供的用于定义导航元素的一些选项。它们使用相同的标记和基类 .nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class，可以在不同的样式间进行切换。 表格导航或标签 创建一个标签式的导航菜单： 以一个带有 class .nav 的无序列表开始。 添加 class .n
BootStrap轮播图 (自动轮播)
热门推荐
csdn_zy_的博客
09-30 4万+
下面的轮播图已经有了鼠标悬停停止轮播，左右导航，和下方圆点计数器、给图片添加标题，内容等功能 &lt;!--轮播图--&gt; &lt;div class="container" &gt; &lt;div class="carousel slide" id="slidershow" data-ride="carousel" data-interval="200
Bootstrap导航源码深度解析
"Bootstrap源码解读导航（6）——深入解析Bootstrap导航组件" 在本篇内容中，我们将探讨Bootstrap框架中的导航元素，包括其源码分析和如何构建各种类型的导航。Bootstrap是一个流行的前端开发框架，它提供了丰富的...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值