Bootstrap导航栏

最新推荐文章于 2024-05-04 23:18:09 发布
最新推荐文章于 2024-05-04 23:18:09 发布
阅读量318 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41704254/article/details/80616881
版权
<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> 
<title>Bootstrap 标准模板/输入框</title> 


<!-- Bootstrap --> 
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 


<!-- 可选的 Bootstrap 主题文件（一般不用引入） --> 
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> 


<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> 
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> 
<!--[if lt IE 9]> 
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> 
<![endif]--> 

<style>


</style>
</head> 


<body> 
<h2>你好，选项卡导航栏！</h2> 
<div class="container">
<div class="row">
<ul class="nav nav-tabs">
<li ><a href="#">主页</a></li>
<li><a href="#">微博</a></li>
<li class="active"><a href="#">图书</a></li>
<li><a href="#">微信</a></li>
<li><a href="#">QQ</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
 
</div>

<h2>你好，胶囊式导航栏！</h2> 
<div class="container">
<div class="row">
<ul class="nav nav-pills">
<li ><a href="#">主页</a></li>
<li><a href="#">微博</a></li>
<li class="active"><a href="#">图书</a></li>
<li><a href="#">微信</a></li>
<li><a href="#">QQ</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
 
</div>
<h2>你好，自适应选项卡导航栏！</h2> 
<div class="container">
<div class="row">
<ul class="nav nav-tabs 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="#">QQ</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
 
</div>
<h2>你好，自适应胶囊式导航栏！</h2> 
<div class="container">
<div class="row">
<ul class="nav nav-pills nav-justified">
<li ><a href="#">主页</a></li>
<li><a href="#">微博</a></li>
<li class="active"><a href="#">图书</a></li>
<li><a href="#">微信</a></li>
<li><a href="#">QQ</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
 
</div>

<h2>你好，二级导航！</h2> 
<div class="container">
<div class="row">
<ul class="nav nav-pills">
<li  class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">主页
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">收藏</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">退换货</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">微博
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">收藏</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">退换货</a></li>
</ul>
</li>
<li class="active dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">图书
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">收藏</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">退换货</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">关于我们
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">收藏</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">退换货</a></li>
</ul>
</li>
</ul>
</div>
 
</div>


<h2>你好，导航条！</h2> 
<div class="container">
<div class="row">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="#" class="navbar-brand">LOGO</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">收藏</a></li>
<li><a href="#">微博</a></li>
<li><a href="#">图书</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>

</div>
</div>
<h2>你好，导航条表单！</h2> 
<div class="container">
<div class="row">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="#" class="navbar-brand">LOGO</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">收藏</a></li>
<li><a href="#">微博</a></li>
<li><a href="#">图书</a></li>
<li><a href="#">关于</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-comtrol" parceholder="搜索"/>
</div>
<button type="submit" class="btn btn-primary">搜索</button>
</form>
</nav>


</div>
</div>


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> 
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 


<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> 
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</body> 


</html>
sunshine_ofme
关注
Bootstrap 导航栏
shengyin714959的博客
08-14 1041
导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。
修改bootstrap导航栏样式(颜色，高)
qq_45532769的博客
02-28 4454
修改bootstrap导航栏样式(颜色，高)
Bootstrap导航条
歪脖先生的博客
05-19 7117
导航条 Bootstrap中的导航条（navbar）是放在应用或网站的头部，作为导航的响应式基础组件，它能够根据浏览器窗口宽度，自动调整导航条的显示状态，在移动设备上折叠（并且可开可关），在视口（viewport）宽度增加时逐渐变为水平展开模式。 Bootstrap 对基本导航条进行了一些扩展，除了站点名称和导航链接外，还可以在导航条中添加表单、按钮、下拉菜单、文本、非导航链接等。 创建导航...
3.7 Bootstrap 导航栏
梁辰兴的博客
07-16 985
导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。 默认的导航栏创建一个默认的导航栏的步骤如下：下面的实例演示了这点： 为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 中。折叠起来的导航栏
bootstrap导航栏
sunyanchun的专栏
09-07 3254
bootstrap导航栏，包括顶部和左侧导航栏。点击导航菜单，实现页面跳转。 1、顶部导航栏 源码： $(function() { //顶部导航栏点击添加active样式 $('ul.nav > li').click(function (e) { e.preventDefault(); $('ul.nav > li').removeClass('active'
Flask Bootstrap 导航条
人生苦短，何妨一试
07-22 588
1，引用Bootstrap css样式，导航栏页面跳转。2，页面两列div自适应。
bootstrap 导航条居中
qq_40463625的博客
10-08 4320
为了实现bootstrap导航条里面的导航按钮居中，并响应小屏幕，着实折腾了一波，。记录一下： 1：.navbar-collapse 设置 文字居中 text-align: center; 2：导航容器 .navbar-nav，设置为行内块元素 display: inline-block; 3：导航选项 li， 设置为块元素 display: block; <nav class="navbar navbar-default navbar-inverse navbar-fixed-top nav-ju
Bootstrap 导航栏(1)
2401_84093310的博客
05-04 688
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Bootstrap的导航栏设计相关知识
昊虹AI笔记
10-18 1691
Bootstrap的导航栏设计相关知识
Bootstrap导航栏点击失效的解决方法
qq_61126874的博客
07-20 1547
bootstrap汉堡按钮下拉失效
BootStrap 导航条实例代码
08-30
Bootstrap 导航条实例代码详解 Bootstrap 是一个流行的前端框架，提供了许多实用的组件和插件，其中导航条是其中一个非常重要的组件。本文将详细介绍 Bootstrap 导航条的实例代码，包括默认的导航条和带有表单的...
bootstrap 导航栏下拉菜单，居右下拉菜单
09-05
首先，为了创建一个基本的Bootstrap导航栏，我们需要引入Bootstrap的CSS和JS文件。这通常通过在HTML文件中添加CDN链接来完成： ```html <!DOCTYPE html> , initial-scale=1.0"> <title>Bootstrap导航栏 ...
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
09-02
在Bootstrap中，导航条（Navbar）是构建页面顶部导航的重要元素，而下拉菜单则是导航条中常见的功能，通常用于展示更多链接选项。在本篇中，我们将深入探讨如何实现Bootstrap导航条在点击和鼠标悬停时显示下拉菜单。...
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
毕业设计论文Nodejs+Vue宠物店管理系统.docx
10-16
毕业设计论文
（自适应手机版）响应式化工工业企业模板_网站整站打包下载.zip
10-16
（自适应手机版）响应式化工工业企业模板_网站整站打包下载.zip
金蝶与C#对接操作手册.doc
10-16
金蝶EAS凭证引入 “webservice接口”说明
毕业设计论文Django+Vue应届生求职系统.docx
10-16
毕业设计论文
idea插件之Fast-Request-API-Buddy-2024.1.7.1
最新发布
10-16
安装插件重启即可，可以使用所有功能，不会提示收费弹窗
Bootstrap导航条详解与基础应用
Bootstrap每天必学之导航条是前端开发中常用的基础组件之一，它在Bootstrap框架中的表现形式比导航更为多样和灵活。导航条和导航虽然仅一字之差，但它们在Bootstrap中的角色和用途有所区别。导航条（navbar）通常...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值