bootstrap框架的头部菜单导航

最新推荐文章于 2024-06-03 20:31:46 发布
最新推荐文章于 2024-06-03 20:31:46 发布
阅读量5.7k 收藏 7
点赞数 2
文章标签： bootstrap-header
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/small_animation/article/details/88826577
版权 
	<head>
	<!--需下载bootstrap的css文件、js、jq文件 /引入顺序：bootstrap.css --jquery-3.3.1.min.js--bootstrap.js-->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
	</head>
	<style type="text/css">
		.dropdown-menu {		
			position: absolute;
			right: 0;
			z-index: 1000;
		}
</style>

<body>
<!--导航-->
	<nav class="navbar navbar-default navbar-fixed-top">
		<div class="container">
			<!--小屏幕导航按钮菜单栏-->
			<div class="navbar-header">	
				<a href="#" class="navbar-brand">首页导航</a>
				<!--小屏幕导航按钮菜单栏-->
				<div class="dropdown">
					<a data-toggle="dropdown" href="">
					<button class="navbar-toggle"  data-target=".navbar-collapse">
		                <span class="icon-bar"></span>
		                <span class="icon-bar"></span>
		                <span class="icon-bar"></span>
		            </button>  </a>  
	                <ul class="dropdown-menu">
		                <li><a href="#home">公司首页</a></li>
		                <li><a href="#info">企业简介</a></li>
		                <li><a href="#show">特色介绍</a></li>
		                <li><a href="#products">最新产品</a></li>
		                <li><a href="#app">区域代理</a></li>
		                <li><a href="#contact">联系我们</a></li>
		            </ul>			            
				</div>					
			</div>
			<!--大屏幕导航-->
			<div class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-right">
					<li>
						<a href="#home">公司首页</a>
					</li>
					<li>
						<a href="#info">企业简介</a>
					</li>
					<li>
						<a href="#show">特色介绍</a>
					</li>
					<li>
						<a href="#products">最新产品</a>
					</li>
					<li>
						<a href="#app">区域代理</a>
					</li>
					<li>
						<a href="#contact">联系我们</a>
					</li>
				</ul>
			</div>
			<!--大屏幕导航-->
		</div>
	</nav>
	</body>
small_animation
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
5个不同样式bootstrap导航菜单模板
03-19
bootstrap 导航 菜单 HTML5 模板 5个不同样式bootstrap导航菜单模板
bootstrap导航菜单模板
03-31
bootstrap导航菜单模板
BootStrap入门到实战：BootStrap组件（一）- Glyphicons字体图标、下拉菜单、按钮组、按钮式下拉菜单
最新发布
林林一928的博客
06-03 909
一、Glyphicons字体图标二、下拉菜单 用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性用jQuery实现1.3 菜单向上弹出2. 对齐.默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐3.对齐4.分割线5.禁用的菜单项三.按钮组。四.按钮式下拉菜单，1. 单按钮下拉菜单，2. 分裂式按钮下拉菜单...
Bootstrap页头
wood的博客
10-11 1006
页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果，还支持大部分其他组件（需要增加一些额外的样式）。<div class="container"> <h1 class="page-header">Bootstrap学习<small>系统篇</small></h1> </div>
使用Bootstrap设计一个头部导航
weixin_34279061的博客
06-13 704
在按钮上使用Font Awesome图标 <i class="fa fa-info-circle"></i> <i class="fa fa-thumbs-up"> <i class="fa fa-trash">//垃圾桶 库 http://fontawesome.dashgame.com/ 转载于:https://www.cnblogs.c...
Bootstrap实战---头部导航
Season CSDN博客
07-08 667
Bootstrap实战—网站导航栏 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>融职教育</title> <!--移动设备优先--> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
bootstrap常用组件之头部导航实现代码
08-30
Bootstrap 头部导航实现代码详解 Bootstrap 是一个广泛使用的前端框架，提供了很多实用的组件和类来帮助开发者快速构建网站。头部导航是网站的重要组件之一，本文将详细介绍 Bootstrap 头部导航的实现代码，并对...
Bootstrap左侧下拉三级菜单导航
11-19
在Bootstrap中，构建左侧下拉三级菜单导航是常见的需求，尤其对于大型网站和应用，这种导航结构能够帮助用户快速找到所需内容。本篇文章将深入探讨如何利用Bootstrap实现这样的功能。 首先，我们需要了解Bootstrap...
jQuery基于Bootstrap顶部浮动导航菜单代码
06-05
首先，我们来看Bootstrap框架。Bootstrap是由Twitter开发的一个开源前端框架，它提供了丰富的HTML、CSS和JS组件，用于快速构建响应式、移动设备优先的网页。在这个项目中，Bootstrap的网格系统、样式和组件被用来...
基于BootStrap框架的前端菜单页面.rar
08-29
在这个名为"基于BootStrap框架的前端菜单页面.rar"的压缩包中，我们看到的是一个专门针对Bootstrap框架构建的前端菜单页面，但值得注意的是，这个压缩包不包含Bootstrap框架本身，这意味着你需要自行引入Bootstrap的...
23种bootstrap导航菜单布局
01-08
一款基于Bootstrap的导航菜单布局设计jQuery插件。该插件集成了23种Bootstrap导航菜单效果，有下拉菜单，大型菜单，侧边栏菜单，购物车菜单等，可以满足大部分网页导航菜单设计的需求。
vue-cli+bootstarp响应式导航条
12-13
vue-cli搭建的项目，要做成响应式的，bootstarp提供的又不太美观，所以自己封装了一个，方便以后的使用。用到了bootstarp的一些辅助类还有媒体查询代码不多
Bootstrap（二）Bootstrap菜单、模态框、及其他样式类
COOL66BOY的博客
03-16 2178
文章目录Bootstrap菜单（导航条）bootstrap模态框路径导航巨幕CSS一个补充-媒体查询 具体更多更详细的信息与使用方法访问中文官网：https://www.bootcss.com/ 也要注意图片的响应式。 Bootstrap菜单（导航条） navbar 声明导航条 navbar-default 声明默认的导航条样式 navbar-inverse 声明黑色的导航条 navbar-static-top 去掉导航条的圆角 navbar-fixed-top 将导航条固定到顶部 navbar-fi
Bootstrap导航栏
遇见更好的自己
06-12 4769
1.表格导航或标签： 创建一个标签式的导航菜单 以一个带有class.nav的无序列表开始 添加class.nav-tabs<ul class="nav nav-tabs">//添加两个类 <li class="active"><a href="#">Home</a></li>//设置首页的选项处于选中状态 <li><a href="#">HTML</a></li>//鼠标经过时，背
使用boostrap制作导航栏
jakelihua
12-31 790
我们常常看见这样的导航栏的结构，基本上都是一个模板里面做出来的，现在就教大家怎么制作这样的模板。
HTML5自动隐藏菜单,Bootstrap固定顶部导航菜单自动隐藏插件
weixin_42360778的博客
05-31 968
这是一款Bootstrap固定顶部导航菜单自动隐藏插件。该插件可以使Bootstrap固定顶部导航菜单在页面向下滚动时自动隐藏，支持bootstrap4和bootstrap3。使用方法在页面中引入的bootstrpa相关文件和jquery.bootstrap-autohidingnavbar.min.js。初始化插件在页面中插入bootstrap固定顶部导航菜单代码，然后通过下面的方法来初始化插件...
BootStrap响应式导航条
Sunflowerfiona的博客
04-27 1323
http://getbootstrap.com/components/#navbar <header role="banner"> <nav role="navigation" class="navbar navbar-default"> <div class="container"> <div class="nav
bootstrap(菜单、按钮、导航)
小鱼儿
08-04 3258
下拉菜单（基本用法） 在Bootstrap框架中的下拉菜单组件是一个独立的组件，根据不同的版本，它对应的文件： ☑ LESS版本：对应的源码文件为 dropdowns.less1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:<div class="dropdown"></div>2、使用了一个按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义
Bootstrap前端框架入门：导航栏与基础概念解析
Bootstrap框架包含以下几个核心部分： 1. 基本结构：Bootstrap提供了一个基础模板，包括网格系统、链接样式和背景颜色。网格系统是创建自适应布局的关键，允许开发者轻松创建多列布局。 2. CSS：全局CSS设置为所有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值