Bootstrap——导航栏

最新推荐文章于 2024-05-14 09:55:02 发布
最新推荐文章于 2024-05-14 09:55:02 发布
阅读量1.8k 收藏 18
点赞数 5
分类专栏： Bootstrap 文章标签： bootstrap 导航栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xun__xing/article/details/107718717
版权

导航栏

一、导航栏

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://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
			class="align-top"> Bootstrap
	</a>
	<ul class="navbar-nav">
		<li class="nav-item"><a href="#" class="nav-link">入门</a></li>
		<li class="nav-item dropdown">
			<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">城市</a>
			<div class="dropdown-menu">
				<a href="#" class="dropdown-item">北京</a>
				<div class="dropdown-divider"></div>
				<a href="#" class="dropdown-item">深圳</a>
			</div>
		</li>
	</ul>
	<!-- <div class="navbar-nav">
		<a href="#" class="nav-item nav-link">入门</a>
		<a href="#" class="nav-item nav-link">布局</a>
	</div> -->
</nav>

2.表单

在导航栏中使用 .form-inline放置各种表单控制元件和组件

<nav class="navbar bg-light mt-5">
	<a href="#" class="navbar-brand">
		<img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
			class="align-top"> Bootstrap
	</a>

	<form action="#" class="form-inline">
		<!-- <input type="search" class="form-control mr-sm-2" placeholder="Search">
		<button type="submit" class="btn btn-outline-success mt-2 mt-sm-0">Search</button> -->

		<div class="input-group">
			<div class="input-group-prepend">
				<span class="input-group-text">@</span>
			</div>
			<input type="search" class="form-control mr-sm-2" placeholder="Search">
		</div>
		<button type="submit" class="btn btn-outline-success mt-2 mt-sm-0">Search</button>
	</form>
</nav>

在这里插入图片描述

3.文本处理

可以使用.navbar-text选择器来包裹文字-这已经对文本字符串的垂直对齐、水平间距作了处理优化。

<nav class="navbar navbar-expand-lg bg-light mt-5">
	<a href="#" class="navbar-brand">
		<img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
			class="align-top"> Bootstrap
	</a>
	<ul class="navbar-nav mr-auto">
		<li class="nav-item"><a href="#" class="nav-link">入门</a></li>
		<li class="nav-item"><a href="#" class="nav-link">布局</a></li>
		<li class="nav-item"><a href="#" class="nav-link">内容</a></li>
	</ul>
	<span class="navbar-text">这是导航当中的文本</span>
</nav>

在这里插入图片描述

4.配色方案

<nav class="navbar navbar-expand-lg bg-dark navbar-dark mt-5">
	<a href="#" class="navbar-brand">
		<img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
			class="align-top"> Bootstrap
	</a>
	<ul class="navbar-nav mr-auto">
		<li class="nav-item"><a href="#" class="nav-link">入门</a></li>
		<li class="nav-item"><a href="#" class="nav-link">布局</a></li>
		<li class="nav-item"><a href="#" class="nav-link">内容</a></li>
	</ul>
	<form action="#" class="form-inline">
		<input type="search" class="form-control mr-sm-2" placeholder="Search">
		<button type="submit" class="btn btn-outline-success mt-2 mt-sm-0">Search</button>
	</form>
</nav>

在这里插入图片描述

5.居中容器

你可以把导航条包裹在一个 .container容器中，从而使之在网页中呈现居中效果

<div class="container">
	<nav class="navbar navbar-expand-lg bg-dark navbar-dark mt-5">
		<a href="#" class="navbar-brand">
			<img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
				class="align-top"> Bootstrap
		</a>
		<ul class="navbar-nav mr-auto">
			<li class="nav-item"><a href="#" class="nav-link">入门</a></li>
			<li class="nav-item"><a href="#" class="nav-link">布局</a></li>
			<li class="nav-item"><a href="#" class="nav-link">内容</a></li>
		</ul>
		<form action="#" class="form-inline">
			<input type="search" class="form-control mr-sm-2" placeholder="Search">
			<button type="submit" class="btn btn-outline-success mt-2 mt-sm-0">Search</button>
		</form>
	</nav>
</div>

在这里插入图片描述

6.定位

<nav class="navbar navbar-light bg-light fixed-top">
	<a href="#" class="navbar-brand">因定在顶部</a>
</nav>
<nav class="navbar navbar-light bg-light fixed-bottom">
	<a href="#" class="navbar-brand">因定在底部</a>
</nav>
<nav class="navbar navbar-light bg-light sticky-top">
	<a href="#" class="navbar-brand">粘性定位在浏览器的顶部</a>
</nav>

7.响应式

当内容在按钮后面折叠时，导航栏可以使用 .navbar-toggler、.navbar-collapse 和 .navbar-expand{-sm|-md|-lg|-xl}的 class样式来更改，结合其它常用样式，你可以根据需要定义显示或隐藏特定元素。

<nav class="navbar navbar-expand-md bg-success navbar-dark mt-5">
	<button class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbar">
		<a href="#" class="navbar-brand">
			<img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
				class="align-top"> Bootstrap
		</a>
		<ul class="navbar-nav mr-auto">
			<li class="nav-item"><a href="#" class="nav-link">入门</a></li>
			<li class="nav-item"><a href="#" class="nav-link">布局</a></li>
		</ul>
		<form action="#" class="form-inline">
			<input type="search" class="form-control mr-sm-2" placeholder="Search">
			<button type="submit" class="btn btn-outline-light mt-2 mt-sm-0">Search</button>
		</form>
	</div>
</nav>

在这里插入图片描述
在这里插入图片描述

8.拓展

<!-- 左侧是logo，右侧是按钮 -->
<nav class="navbar navbar-expand-md bg-success navbar-dark mt-5">
	<a href="#" class="navbar-brand">
		<img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
			class="align-top"> Bootstrap
	</a>
	<button class="navbar-toggler" data-toggle="collapse" data-target="#navbar1">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbar1">
		<ul class="navbar-nav mr-auto">
			<li class="nav-item"><a href="#" class="nav-link">入门</a></li>
			<li class="nav-item"><a href="#" class="nav-link">布局</a></li>
			<li class="nav-item"><a href="#" class="nav-link">内容</a></li>
		</ul>

		<form action="#" class="form-inline">
			<input type="search" class="form-control mr-sm-2" placeholder="Search">
			<button type="submit" class="btn btn-outline-light mt-2 mt-sm-0">Search</button>
		</form>
	</div>
</nav>
<!-- 左侧是按钮，右侧是logo -->
<nav class="navbar navbar-expand-md bg-success navbar-dark mt-5">
	<button class="navbar-toggler" data-toggle="collapse" data-target="#navbar2">
		<span class="navbar-toggler-icon"></span>
	</button>
	<a href="#" class="navbar-brand">
		<img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
			class="align-top"> Bootstrap
	</a>
	<div class="collapse navbar-collapse" id="navbar2">
		<ul class="navbar-nav mr-auto">
			<li class="nav-item"><a href="#" class="nav-link">入门</a></li>
			<li class="nav-item"><a href="#" class="nav-link">布局</a></li>
			<li class="nav-item"><a href="#" class="nav-link">内容</a></li>
		</ul>

		<form action="#" class="form-inline">
			<input type="search" class="form-control mr-sm-2" placeholder="Search">
			<button type="submit" class="btn btn-outline-light mt-2 mt-sm-0">Search</button>
		</form>
	</div>
</nav>

在这里插入图片描述
在这里插入图片描述

飞羽逐星
关注
专栏目录
Bootstrap 导航栏
qq_27460209的博客
04-13 338
下拉菜单的使用方法: <div class="dropdown open"> <!-- open控制菜单收缩展开--> <button class="btn btn-default" data-toggle="dropdown" > Dropdown <span class="caret"></span> ...
BootStrap笔记——可切换导航栏
senmu_的博客
11-28 976
可切换导航栏 ul标签与nav标签（及其相关标签）结合使用 <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#1-1" data-toggle="tab">导航栏名称1-1</a></li> <li><a href="#1-2" data-toggle="tab">导航栏名称1-2</a></li>
五、Bootstrap之菜单栏和导航栏
最新发布
Itcodewizard的博客
05-14 2681
本文主要学习 Bootstrap 中提供的菜单栏和导航栏组件的使用方法和样式，按照 Bootstrap 的规范正确构建菜单栏和导航栏的 HTML 结构。Bootstrap 类：熟悉并正确应用 Bootstrap 的类名，如.navbar.nav.nav-item.nav-link等。响应式设计：学习如何使用 Bootstrap 的响应式工具类来确保菜单栏和导航栏在不同屏幕尺寸下的良好显示效果。1、通过在代码编辑器中实际编写代码，尝试创建不同样式的菜单栏和导航栏，加深理解和熟练应用；
bootstrap之导航栏
qq_39658827的博客
11-16 1312
之前一直在菜鸟教程上学bootstrap，貌似懂了，但又没懂，因为上面的教程不会告诉你每个类的作用，以及结构排版原因，更像是例子给你，照做就好，至于能理解多少就看你个人了，本人愚钝，遂去慕课上看视频，终于才懂了些。 响应式导航栏： 先放图： 电脑全部展开页面： 手机关闭页面： 手机展开页面： <nav class="navbar navbar...
bootstrap 导航栏
hugejihu9的专栏
01-14 410
文章来自:源码在线https://www.shengli.me/css/578.html   响应式导航栏实例：   代码：     效果：    
Bootstrap—导航栏
生如夏花 炫至茶靡
12-15 1380
使用Bootstrap制作导航栏，可以让导航栏具有响应式特性，在移动设备中，导航栏中的组件是折叠的，随着页面宽度的增加，导航栏也会水平展开。 简单的导航栏如下图： 制作步骤： （1）使用nav标签包裹住导航，加入class="navbar navbar-default"样式。 （2）nav中放入导航项。这里放一个class="container"的div，然后再放入组件，如此可让导航内
拥Bootstrap入怀——导航栏篇
11-22
【Bootstrap导航栏详解】 在网页设计中，导航栏是一个至关重要的元素，它引导用户轻松地在网站的不同页面间切换。Bootstrap框架提供了强大的导航栏组件，让开发者能够快速创建响应式、功能丰富的导航栏。在本文中，...
bootstrap自定义样式之bootstrap实现侧边导航栏功能
12-02
在本篇文章中，我们将探讨如何利用Bootstrap自定义样式，特别是实现一个类似Android DrawerLayout的侧边导航栏功能，以满足个性化需求。 首先，我们注意到侧边导航栏在Bootstrap中通常是通过定位（position: fixed...
网站前端——导航（ 同一页面导航切换到不同分页面）
09-15
这是一个网站前端，在同一页面，导航切换道不同分页面。用到bootstrap框架，不需要CSS、JS文件。将文档复制即可使用。
bootstrap侧边导航栏
07-25
bootstrap侧边导航栏简单的实现，代码比较少，实现效果良好，原文链接http://blog.csdn.net/kebi007/article/details/76038251
Bootstrap----导航栏
weixin_52247167的博客
04-14 1万+
文章目录 一、导航栏 1、container 2、navbar 3、navbar-expand-xx 4、navbar-xxxx 5、bg-xxxx 6、navbar-brand 7、navbar-toggler 8、navbar-toggler-icon 9、定位 二、导航栏之切换触发器 1、data-toggle="xxx" 2、data-target="#id" 3、aria-controls="id" 4、aria-label 5、aria-expanded="bo.
Bootstrap系列之导航条（Navbar）
热门推荐
老__L的博客
06-18 1万+
为Bootstrap强大的，响应灵敏的导航头，导航栏提供文档和示例，包括对面包屑、导航、折叠插件等的支持。在开始使用导航栏之前，以下是你需要知道的导航栏内置了对一些子组件的支持。根据需要从以下选项中进行选择下面是一个包含响应式光主题导航条的所有子组件的例子，它会在lg(大)断点处自动折叠。 这个例子使用了和工具类。可以应用于大多数元素，但是锚是最好的，因为一些元素可能需要实用程序类或自定义样式。 将图片添加到可能总是需要自定义样式或工具来适当的大小。下面是一些示例。 Navbar导航链接建立在我们的选
bootstrap：导航栏【基础、简单、实用】
成长的嘻嘻哥
10-05 1868
寥寥几行代码，实现简洁，直观的效果，清晰的展现了bootstrap的特点和优点
【前端开发】bootstrap框架：导航栏
`雾博客
06-18 6644
导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开 默认的导航栏 向 <nav>标签添加 class .navbar、.navbar-default。 向上面的元素添加role="navigation"，有助于增加可访问性 向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class nav.
Bootstrap学习笔记--导航栏
qq_38409944的博客
05-26 526
本文来自于：W3school 默认导航栏下： 因为Bootsrap是具有响应式的 所以当屏幕缩小的时候 效果是这样的 那如何实现呢？ &lt;nav class="navbar navbar-default"&gt; //导航栏 注意：是在页面的顶部： 源码： &lt;body&gt; &lt;nav class="navbar navbar-default"&...
Bootstrap导航栏
lin1072368472的博客
01-01 424
Bootstrap学习笔记 导航栏 首先先要有容器 导航栏容器 可选择 网页LOGO或者品牌 <div class="navbar-header">LOGO</div> 接下去可以设置导航栏菜单 导航栏元素 <ul class="nav navbar-nav">导航栏菜单</ul> <li class="navbar-item"&g...
Bootstrap前端源码模板——Wordpress网站UI主题发布
在Bootstrap中，组件如导航栏、按钮、表单、卡片等都是预设好的，开发者可以轻松地将这些组件组合起来构建复杂的用户界面。 在使用"Bloggit_v1.0.5_***_BootstrapWordpress前端源码模板"时，用户可以获得一个基于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

飞羽逐星

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

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

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

打赏作者

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

抵扣说明：

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

余额充值