bootstrap-导航组件

最新推荐文章于 2024-07-01 21:38:06 发布
最新推荐文章于 2024-07-01 21:38:06 发布
阅读量1.1w 收藏 7
点赞数 1
分类专栏： javaweb学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43386754/article/details/86567303
版权
  • 对于导航有许多中:基本导航形式,导航条,面包屑导航,分页导航.

导航样式

  • 对于导航室友基础的导航样式的,下面先来看基本的结构

  • 定义导航基本模型

<div>
	<ul  class="nav">
		<li><a>主页</a></li>
		<li><a>商城</a></li>
		<li><a>咨询</a></li>
		<li><a>个人中心</a></li>
	</ul>
</div>

在这里插入图片描述

  • nva是最基本的导航模型,所有的导航都是需要将其连接到一个页面上中,所以导航的样式都是以a元素为主的.但是这个时候的导航太大条了,数着显示

  • 示例:水平显示导航条

<div>
	<ul  class="nav nav-tabs">
		<li><a>主页</a></li>
		<li><a>商城</a></li>
		<li class="active"><a>咨询</a></li>
		<li><a>个人中心</a></li>
	</ul>
</div>

在这里插入图片描述

  • 对于导航效果而言,也可以使用胶囊导航模式

  • 使用胶囊导航

<ul  class="nav nav-pills">
	<li><a>主页</a></li>
	<li><a>商城</a></li>
	<li class="active"><a>咨询</a></li>
	<li><a>个人中心</a></li>
</ul>

在这里插入图片描述

  • 如果希望导航可以变为竖排显示,那么尅使用"nav-stacked"

  • 使用nav-stacked

<ul  class="nav nav-stacked nav-pills">
	<li><a>主页</a></li>
	<li><a>商城</a></li>
	<li class="active"><a>咨询</a></li>
	<li><a>个人中心</a></li>
</ul>

在这里插入图片描述

  • 此时发现nav-stacked样式要和"navnav-pills"样式一起使用

  • 为了能够让导航能够自适应,所以可以使用"nav.justfied

  • 自适应导航

<ul  class="nav nav-stacked nav-pills nav-justified">
	<li><a>主页</a></li>
	<li><a>商城</a></li>
	<li class="active"><a>咨询</a></li>
	<li><a>个人中心</a></li>
</ul>

  • 以上只是实现了一级导航,实际上还能能会有二级导航

  • 实现二级导航

<ul  class="nav nav-stacked nav-pills nav-justified">
	<li><a>主页</a></li>
	<li><a>商城</a></li>
	<li class="active"><a>咨询</a></li>
	<li class="dropdown" >
		<a  class="dropdown-toggle" type="but" data-toggle="dropdown" id="member_dropdown">个人中心&nbsp;<span class="caret"></span></a>
		<ul class="dropdown-menu" aria-labelledby="member_dropdown">
			<li><a>个人博客</a></li>
			<li><a>博客管理</a></li>
			<li><a>写博客</a></li>
		</ul>
	</li>
</ul>

在这里插入图片描述

  • 导航就是要和下拉菜单一起使用,才可以实现二级菜单

导航条

  • 为了实现更好的导航效果,又提出了导航条的处理过程

  • 示例:实现基础导航条

<nav class="navbar navbar-default" role="navigation">
	<div class="navbar-header">
		<a class="navbar-brand">www.maoshu.com</a>
	</div>
	<ul class="nav navbar-nav">
		<li class="active"><a>首页</a></li>
		<li ><a>设置</a></li>
		<li ><a>管理</a></li>
		<li ><a>资料</a></li>
	</ul>
<nav>

在这里插入图片描述

内嵌导航条

  • 以上只是定义了一级导航条,而导航条也应该有多级导航条
  • 设置二级导航条
<nav class="navbar navbar-default" role="navigation">
	<div class="navbar-header">
		<a class="navbar-brand">www.maoshu.com</a>
	</div>
	<ul class="nav navbar-nav">
		<li class="active"><a>首页</a></li>
		<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown">设置</a>
			<ul class="dropdown-menu">
				<li><a>头像</a></li>
				<li><a>基本信息</a></li>
				<li><a>隐私设置</a></li>
				<li><a>个性化设置设置</a></li>
			</ul>
		</li>
		<li ><a >管理</a></li>
		<li ><a>资料</a></li>
	</ul>
<nav>

在这里插入图片描述

  • 大部分的菜单都是二级菜单

  • 定义导航条搜索框

<nav class="navbar navbar-default" role="navigation">
	<div class="navbar-header">
		<a class="navbar-brand">www.maoshu.com</a>
	</div>
	<ul class="nav navbar-nav">
		<li class="active"><a>首页</a></li>
		<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown">设置</a>
			<ul class="dropdown-menu">
				<li><a>头像</a></li>
				<li><a>基本信息</a></li>
				<li><a>隐私设置</a></li>
				<li><a>个性化设置设置</a></li>
			</ul>
		</li>
		<li ><a >管理</a></li>
		<li ><a>资料</a></li>
	</ul>
	<form class="navbar-form navbar-right">
		<div class="form-group">
			<input type="text" class="form-control"/>
		</div>
		<button type="submit" class="btn btn-default">搜索</button>
	</form>
<nav>

在这里插入图片描述

  • 有时候导航条也可以使用按钮显示

  • 使用按钮导航

<nav class="navbar navbar-default" role="navigation">
	<div class="navbar-header">
		<a class="navbar-brand">www.maoshu.com</a>
	</div>
	<div class="nav navbar-nav">
		<button class="btn btn-primary">首页</button>
		<button class="btn btn-primary">个人中心</button>
		<button class="btn btn-primary">设置</button>
		<button class="btn btn-primary">注销</button>
	</div>
	<form class="navbar-form navbar-right">
		<div class="form-group">
			<input type="text" class="form-control"/>
		</div>
		<button type="submit" class="btn btn-default">搜索</button>
	</form>
<nav>

在这里插入图片描述
按钮导航的效果实际上并不好,

  • 以上的代码会出现一个问题,因为此时的导航是直接与页面布局有关的,所以在滚动页面的时候导航条会消失不见,为了能够导航条固定在页面中,可以使用一下两个样式

    • navbar-fixed-bootom,固定为页面底部
    • navbar-foxed-top:固定到页面顶部
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

反转色导航

<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
	<div class="navbar-header">
		<a class="navbar-brand">www.maoshu.com</a>
	</div>
	<ul class="nav navbar-nav">
		<li class="active"><a>首页</a></li>
		<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown">设置</a>
			<ul class="dropdown-menu">
				<li><a>头像</a></li>
				<li><a>基本信息</a></li>
				<li><a>隐私设置</a></li>
				<li><a>个性化设置设置</a></li>
			</ul>
		</li>
		<li ><a >管理</a></li>
		<li ><a>资料</a></li>
	</ul>
	<form class="navbar-form navbar-right">
		<div class="form-group">
			<input type="text" class="form-control"/>
		</div>
		<button type="submit" class="btn btn-default">搜索</button>
	</form>
<nav>

在这里插入图片描述

面包屑导航

  • 所谓的面包屑是一种定位导航的模式

  • 面包屑导航

<ul class="breadcrumb">
	<li><a>首页</a></li>
	<li><a>个人中心</a></li>
	<li><a class="active">设置</a></li>
</ul>

在这里插入图片描述

分页导航

  • 只要是项目开发,100%一定需要有分页导航
<ul class="pagination">
	<li><span>上一页</span></li>
	<li><a>1</a></li>
	<li><a>2</a></li>
	<li><a>3</a></li>
	<li><a class="active">4</a></li>
	<li><a>5</a></li>
	<li><a>下一页</a></li>
</ul>

在这里插入图片描述

  • 但是有时候需要有一些小巧的分页条,或者一些更大的分也条
    • pagination-lg:更大的分页条
    • pagination-sm:更小的分页条

在这里插入图片描述

  • 简化分页
<ul class="pager">
	<li><a>上一页</a></li>
	<li><a>下一页</a></li>
</ul>

在这里插入图片描述

{[("青椒盖饭")]}
关注
专栏目录
23种bootstrap导航菜单布局
01-08
一款基于Bootstrap的导航菜单布局设计jQuery插件。该插件集成了23种Bootstrap导航菜单效果，有下拉菜单，大型菜单，侧边栏菜单，购物车菜单等，可以满足大部分网页导航菜单设计的需求。
5个不同样式bootstrap导航菜单模板
11-13
bootstrap,导航,菜单,HTML5,模板.
Bootstrap(导航&导航条)
王冉的博客
03-14 1248
1、导航 1）标签页 通过给列表添加class = nav-tabs和 nav 2）胶囊式导航栏 给列表设置class为nav和nav-pills 3）垂直胶囊式 在原有nav的基础上添加类.nav-stacked 通过给li添加.active表示当前所处的导航位置 4）两端对齐的导航 可以通过添加类.justified 让导航栏与父元素等宽 2、导航条 通过向nav标记添加类.navbar...
迈阿密色主题学科 HTML5静态导航源码
最新发布
爱酷码的博客
07-01 344
迈阿密色主题学科 HTML5静态导航源码，源码直接上传可用，有技术的可以拿去写个后端搜索调用百度接口，也可用于做引导页下面加你网址添加一个A标签就行了，很简单，需要的朋友就拿去吧。
Bootstrap-导航栏组件
One By One
12-14 262
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"> </head>...
Bootstrap 导航
书香水墨
07-24 539
一、Bootstrap 导航 1.1 水平导航栏 如果你想创建一个简单的水平导航栏，可以在 <ul> 元素上添加.nav类，在每个 <li> 选项上添加 .nav-item 类，在每个链接上添加.nav-link 类 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例&l...
bootstrap-3.4.1-dist.zip,bootstrap-4.6.1-dist.zip
03-09
Bootstrap 3的核心组件包括网格系统、表单、按钮、导航、模态、图像以及各种JavaScript插件，如下拉菜单、轮播图和模态框等。这些组件都基于HTML5和CSS3，通过预定义的类名，开发者可以快速构建美观的用户界面。 ...
bootstrap-4.6.2
06-13
3. 添加组件类，如`.btn`和`.navbar`，快速创建按钮和导航栏。 4. 利用JavaScript插件，通过数据属性（data attributes）或独立的JavaScript调用来增强交互性，如`.collapse`用于折叠内容。 5. 自定义Bootstrap，...
Java bootstrap-3.4.1-dist 前端框架
03-18
2. **预定义的组件**：Bootstrap提供了许多预定义的UI组件，如按钮、表单、下拉菜单、导航条、模态框、轮播图等，这些组件大大简化了前端开发工作，只需添加相应的类名即可实现丰富的界面效果。 3. **自定义样式**...
bootstrap-5.3.2-dist.zip
10-10
1. **CSS**：Bootstrap的CSS部分定义了各种预设样式，如网格系统、排版、颜色方案、表单元素、按钮、导航等。这些样式通过Sass预处理器编译而来，使开发者能够快速定制主题和布局。 2. **JavaScript插件**：...
bootstrap-5.1.3-dist.zip
11-11
2. **预定义组件**：Bootstrap提供了丰富的预构建组件，如导航条（navbar）、模态框（modal）、下拉菜单（dropdown）、按钮组（button group）、卡片（card）等，这些组件简化了网页的开发过程。 3. **CSS样式**：...
基于bootstrap的网站导航页
07-04
基于bootstrap框架的网站导航页实现，包括巨幕、导航栏、下拉菜单以及内嵌页面实现
vue-cli+bootstarp响应式导航条
12-13
vue-cli搭建的项目，要做成响应式的，bootstarp提供的又不太美观，所以自己封装了一个，方便以后的使用。用到了bootstarp的一些辅助类还有媒体查询代码不多
Bootstrap-html渐变顶部固定自适应导航栏
12-12
web前端开发例子，基于Bootstrap样式实现的html渐变顶部固定自适应导航栏，效果很不错！网上搜集，供参考学习。
Bootstrap导航条所支持的组件
歪脖先生的博客
05-19 405
支持的组件 Bootstrap3的导航条中，可以包含站点名称、导航链接、表单、下拉菜单、文本、非导航链接等组件，可以根据需要选择使用。 1、站点名称 站点名称通过 .navbar-brand 的链接元素来定义。将站点名称放在 .navbar-header容器中，它将永远可见，在小屏幕下也不会隐藏。如： <navclass="navbar navbar-default"&g...
五、Bootstrap之菜单栏和导航栏
Itcodewizard的博客
05-14 2268
本文主要学习 Bootstrap 中提供的菜单栏和导航栏组件的使用方法和样式，按照 Bootstrap 的规范正确构建菜单栏和导航栏的 HTML 结构。Bootstrap 类：熟悉并正确应用 Bootstrap 的类名，如.navbar.nav.nav-item.nav-link等。响应式设计：学习如何使用 Bootstrap 的响应式工具类来确保菜单栏和导航栏在不同屏幕尺寸下的良好显示效果。1、通过在代码编辑器中实际编写代码，尝试创建不同样式的菜单栏和导航栏，加深理解和熟练应用；
Bootstrap导航组件
歪脖先生的博客
05-18 657
导航 Bootstrap3提供了灵活、多样的导航组件，允许使用相同的标签和不同的类，来实现不同风格的导航，具有非常高的可定制性。 Bootstrap3中的导航组件，都是基于列表实现的，可以使用无序列表（<ul>）和有序列表（<ol>）来定义导航结构，暂不支持描述列表（<dl>）。 创建导航 所有导航组件都具有相同的结构，并公用一个 .nav 的类，只需再...
bootstrap中的导航菜单
weixin_42289273的博客
06-15 394
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bootstrap中的导航元素</title> {% load staticfiles %} <link rel="stylesheet" href="{% static 'learn/css/bootstrap.css' %}"> <sc.
Bootstrap - 详细实现导航栏组件源码，常见网站导航条效果完整代码（导航栏在移动设备的视图中是折叠的，具备响应式！）
王佳斌
02-27 1358
导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap+JQuery 项目中，实现导航栏功能效果。
Angular-ui-BootStrap组件深度解析与实战指南
"这篇文章除了讲解Angular-ui-BootStrap组件的使用，还涉及到了AngularJS中的ng-router和ui-router的区别。" 在AngularJS生态中，Angular-ui-BootStrap是一个非常重要的库，它提供了与Bootstrap设计框架兼容的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值