用bootstrap做一个导航栏（自适应）

最新推荐文章于 2023-07-16 23:21:31 发布
最新推荐文章于 2023-07-16 23:21:31 发布
阅读量1.9k 收藏 8
点赞数
分类专栏： bootstrap
--
本文链接：https://blog.csdn.net/qq_42177478/article/details/104346322
版权

----------------中国加油！陕西加油！武汉加油！！！-------------------------------------
上图
在这里插入图片描述
在这里插入图片描述
上代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title></title>
	<style>
		.navbarBg{
			min-height: 4rem;
			background: #563d7c;
			box-shadow: 0 0.5rem 1rem rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.1);
		}
		.svgSize{
			width: 1rem;
			height: 1rem;
			vertical-align: text-top;
		}
		.navbarBg .navbar-nav .nav-link{
			color: #cbbde2;
		}

		#docsNav .nav{
			display: block;
		}
		#docsNav .nav li{
			padding: 0.25rem 1.5rem;
		}
		#docsNav .nav li a{
			color: rgba(0, 0, 0, 0.65);
		}
	</style>
</head>

<body>
	<header class="navbar navbar-expand navbar-dark navbarBg flex-column flex-md-row">
		<a href="#" class="navbar-brand mr-md-2">
			<img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="36" class="border rounded">
		</a>
		<ul class="navbar-nav">
			<li class="nav-item">
				<a href="#" class="nav-link">Home</a>
			</li>
			<li class="nav-item">
				<a href="#" class="nav-link">Documentation</a>
			</li>
			<li class="nav-item">
				<a href="#" class="nav-link">Examples</a>
			</li>
			<li class="nav-item">
				<a href="#" class="nav-link">Themes</a>
			</li>
			<li class="nav-item">
				<a href="#" class="nav-link">Expo</a>
			</li>
			<li class="nav-item">
				<a href="#" class="nav-link">Blog</a>
			</li>
		</ul>

		<ul class="navbar-nav ml-md-auto d-none d-md-flex">
			<li class="nav-item dropdown">
				<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">v4.3</a>
				<div class="dropdown-menu dropdown-menu-right">
					<a href="#" class="dropdown-item active">Latest (4.3.x)</a>
					<a href="#" class="dropdown-item">v4.2.1</a>
					<a href="#" class="dropdown-item">v4.0.0</a>
					<div class="dropdown-divider"></div>
					<a href="#" class="dropdown-item">v4 Alpha 6</a>
					<a href="#" class="dropdown-item">v3.4.1</a>
					<a href="#" class="dropdown-item">v3.3.7</a>
					<a href="#" class="dropdown-item">v2.3.2</a>
					<div class="dropdown-divider"></div>
					<a href="#" class="dropdown-item">All versions</a>
				</div>
			</li>

			<li class="nav-item">
				<a href="#" class="nav-link">
					<svg xmlns="http://www.w3.org/2000/svg" class="svgSize" viewBox="0 0 512 499.36" role="img" focusable="false">
						<title>GitHub</title>
						<path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"></path>
					</svg>
				</a>
			</li>
			<li class="nav-item">
				<a href="#" class="nav-link">
					<svg xmlns="http://www.w3.org/2000/svg" class="svgSize" viewBox="0 0 512 499.36" role="img" focusable="false">
						<title>GitHub</title>
						<path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"></path>
					</svg>
				</a>
			</li>
			<li class="nav-item">
				<a href="#" class="nav-link">
					<svg xmlns="http://www.w3.org/2000/svg" class="svgSize" viewBox="0 0 512 499.36" role="img" focusable="false">
						<title>GitHub</title>
						<path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"></path>
					</svg>
				</a>
			</li>
			<li class="nav-item">
				<a href="#" class="nav-link">
					<svg xmlns="http://www.w3.org/2000/svg" class="svgSize" viewBox="0 0 512 499.36" role="img" focusable="false">
						<title>GitHub</title>
						<path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"></path>
					</svg>
				</a>
			</li>
		</ul>
		<a href="#" class="btn btn-outline-warning ml-lg-3 d-none d-lg-block">Download</a>
	</header>

	<!-- 搜索框 -->
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-3 col-xl-2 border-right border-bottom">
				<form action="#" class="d-flex py-3 px-1">
					<input type="search" class="form-control" placeholder="Search...">
					<button type="button" class="btn p-0 ml-3 d-md-none" data-toggle="collapse" data-target="#docsNav">
						<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false">
							<title>Menu</title>
							<path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path>
						</svg>
					</button>
				</form>

				<div class="collapse" id="docsNav">
					<div>
						<h6 class="px-4 pt-2">
							<a href="#" class="text-dark">Components</a>
						</h6>
						<ul class="nav">
							<li><a href="#">Alerts</a></li>
							<li><a href="#">Badge</a></li>
							<li><a href="#">Buttons</a></li>
							<li><a href="#">Card</a></li>
							<li><a href="#">Collapse</a></li>
							<li><a href="#">Dropdown</a></li>
							<li><a href="#">Froms</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="col-md-9 col-xl-10"></div>
		</div>
	</div>



	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
		crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
		integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
		crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
		integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
		crossorigin="anonymous"></script>
</body>

</html>

------------over-----粗略的了解学了一下bootstrap--------------不重要不重要又是离vue近的一天----------------

啥时候能干全栈
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap 4.0 导航栏自适应
milli236的博客
11-19 3660
1.重要的属性类 navbar-expand-md   ， collapse navbar-collapse 保证切换适配。和切换显示 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;!-- meta使用viewport以确保页面可自由缩放 --&a
bootstrap实现响应式自适应导航栏，并实现平滑滚动
07-22
bootstrap实现响应式自适应导航栏，并实现平滑滚动
Bootstrap--自适应菜单模板
sunsineq的专栏
04-06 421
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>Bootstrap--自适应菜单模板</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Co.
3.7 Bootstrap 导航栏
梁辰兴的博客
07-16 931
导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。 默认的导航栏创建一个默认的导航栏的步骤如下：下面的实例演示了这点： 为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 中。折叠起来的导航栏
基于Bootstrap、Jquery的自适应导航栏
weixin_34010949的博客
03-17 340
css代码： .kch_nav{width: 100%; position: fixed;z-index: 999;top:0;left: 0;right: 0;height: 69px;background-color: #fff;border-bottom: 1px solid #ccc;} .kch_nav_cont{width: 80%;right: 0px; left: 0px;...
bootstrap--小屏幕自动适应导航栏
weixin_42143410的博客
08-02 1957
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="style...
Bootstrap实现渐变顶部固定自适应导航栏
11-29
具体代码如下所示： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;...link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap
Bootstrap-html渐变顶部固定自适应导航栏
12-12
本示例主要关注如何使用Bootstrap来创建一个具有渐变色彩和顶部固定的自适应导航栏，这对于现代网页设计至关重要。 首先，让我们深入理解这个"Bootstrap-html渐变顶部固定自适应导航栏"的概念。渐变导航栏是指在...
bootstrap4实现侧边导航栏带隐藏按钮
12-09
首先，要创建一个侧边导航栏，我们需要引入Bootstrap的CSS和JavaScript库。这通常通过在HTML文件的`<head>`部分添加链接和脚本标签来完成： ```html <!DOCTYPE html> , initial-scale=1.0"> <title>Bootstrap...
bootstrap实现的自适应页面简单应用示例
08-31
该示例使用了Bootstrap的导航栏（Navbar）组件，Navbar是Bootstrap中的一个基本组件，用于创建导航菜单。Navbar可以被fixed在顶部或底部，并且可以响应式地适应不同屏幕尺寸。 在示例代码中，我们可以看到使用了...
vue-cli+bootstarp响应式导航条
12-13
vue-cli搭建的项目，要做成响应式的，bootstarp提供的又不太美观，所以自己封装了一个，方便以后的使用。用到了bootstarp的一些辅助类还有媒体查询代码不多
利用bootstrap与jQuery制作的响应式自适应导航栏
07-22
利用bootstrap与jQuery制作的响应式自适应导航栏
HTML5自适应导航HorizontalSlideOutMenu
05-09
HTML5自适应导航HorizontalSlideOutMenu，可适应多种分辨率
bootstrap 导航栏自适应
在路上
07-17 1629
参考链接如下： https://blog.csdn.net/sunqian_happy/article/details/50498547
bootstrap 自适应导航栏（鼠标放上显示二级下拉）
stayreal_OAOA
07-15 1229
<div class="col-sm-9 col-xs-12 pull-right"> <ul class="nav navbar-nav"> {dhcmsnav limit='7' orderby='sort asc'} <li class="dropdown hidden-xs {if ($nav.num !== ...
Bootstrap自适应导航栏（带搜索框）
weixin_43751710的博客
05-01 2万+
使用Bootstrap创建的导航栏，最为原始的，没有任何的自定义颜色什么的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--声明文档兼容模式，表示使用IE浏览器的最新模式--> <meta http-equiv="X-UA-Compat...
bootstrap边学边记（三）导航栏实现自适应
weixin_40842539的博客
02-05 562
除夕快乐，过年就要好好玩，同时不要忘记学习技术哦~ 现在导航栏： 这时候如果需求说，导航栏要变成这类的居中布局 操作： 1.在bootstrap,有个类名&amp;lt;div class=&quot;container&quot;&amp;gt;&amp;lt;/div&amp;gt;，&amp;lt;复制下 包住导航条 效果: 但是你在手机看到，太丑了！！！我们应该让他的宽充满屏幕 2.为什么会这样呢，我们来看.cont
做一个导航栏（bootstrap）
weixin_34409357的博客
10-07 110
<div class="b"> <div class="row"> <div class="col-xs-2"></div> <div class="col-xs-10"> <ul class="nav nav-tabs"> <li class="...
Bootstrap自适应导航栏
热门推荐
sunqian_happy的博客
01-11 4万+
导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。 默认的导航栏 1、向 标签添加 class .navbar、.navbar-default。 2、向上面的元素添加 role="navigation"，有助于增加可访问性。 3、向 元素添加一个标题 cla
bootstrap自适应导航栏
最新发布
12-30
Bootstrap是一个流行的前端开发框架，提供了许多用于快速开发网页的工具和组件，其中包括自适应导航栏。 在Bootstrap中，我们可以使用类名"navbar"和"navbar-expand"来创建一个自适应的导航栏。首先，我们需要一个导航栏的容器，可以使用"navbar"类来创建。然后，我们可以使用"navbar-expand"类来指定导航栏的展开方式。通常有两种展开方式，分别是"navbar-expand-sm"和"navbar-expand-md"。这些类可以根据不同的屏幕尺寸来展开导航栏。 在导航栏容器中，我们可以添加一个导航栏品牌，通常是网站的logo或标题。可以使用"class='navbar-brand'"来指定品牌的样式。 接下来，我们可以在导航栏中添加菜单项，每个菜单项使用一个<li>元素包裹，可以添加链接和文本内容。菜单项可以使用"class='nav-item'"来指定样式，可以在菜单项中添加下拉菜单或子菜单。 在小屏幕上，导航栏默认是折叠的，可以使用一个按钮（通常是三个水平线）来展开导航栏。可以使用一个<div>元素和类名"navbar-toggler"来创建按钮，同时在导航栏容器中添加一个<button>元素，使用类名"navbar-toggler"和"data-toggle='collapse'"来指定按钮的样式和折叠属性。 最后，在导航栏中添加一个<div>元素，使用类名"collapse navbar-collapse"来指定导航栏折叠时的样式。 总结起来，Bootstrap的自适应导航栏通过使用相应的类名和属性来创建，可以根据不同的屏幕尺寸展开或折叠导航项，提供了更好的用户体验和页面布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值