Bootstrap——导航栏

最新推荐文章于 2022-10-05 15:43:20 发布
原创 最新推荐文章于 2022-10-05 15:43:20 发布 · 378 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bootstrap #bootstrap导航栏

本文详细介绍了如何使用Bootstrap框架创建各种导航组件，包括标签页、胶囊式标签页、垂直胶囊式标签页、两端对齐的标签页、禁用链接及带有下拉菜单的标签页。此外，还讲解了如何构建导航条，并将其与表单元素结合，实现导航条顶部固定和反色效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 引入 Bootstrap.css，jquery.js，Bootstrap.js三个文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="CSS/bootstrap.css"/>
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.js"></script>
        <style type="text/css">
            body {
                margin: 50px;
            }
            hr {
                border: 1px solid #761C19;
            }
        </style>
    </head>

 <!-- bootstrap中的导航组件都依赖于nav类， -->
  <!-- 标签页 -->


 

    <body>
       
        <ul class="nav nav-tabs">
            <li > <a href="">Home</a></li>
            <li><a href="">Profile</a></li>
            <li><a href="">Messages</a></li>
            <li><a href="">Login</a></li>
        </ul>
        <hr >
        <!-- 胶囊式标签页 -->
        <!-- 使用nav-pills -->
        <ul class="nav nav-pills">
            <li><a href="">Home</a></li>
            <li><a href="">Profile</a></li>
            <li><a href="">Messages</a></li>
        </ul>
        <hr >
        <!-- 胶囊式标签页也可以垂直方向排列 -->
        <ul class="nav nav-pills nav-stacked">
            <li><a href="">Home</a></li>
            <li><a href="">Profile</a></li>
            <li><a href="">Messages</a></li>
        </ul>
        <hr >
        <!-- 两端对齐的标签页 -->
        <ul class="nav nav-pills nav-justified">
            <li><a href="">Home</a></li>
            <li><a href="">Profile</a></li>
            <li><a href="">Messages</a></li>
        </ul>
        <hr >
        <!-- 禁用连接 -->
        <ul class="nav nav-tabs ">
            <li><a href="">Home</a></li>
            <li><a href="">Profile</a></li>
            <li class="disabled"><a href="">Messages</a></li> <!--禁用-->
        </ul>
        <hr >
        
        <!-- 带下拉菜单的标签页 -->
        <ul class="nav nav-tabs">
            <li><a href="">Home</a></li>
            <li><a href="">Profile</a></li>
            <li class="dropdown">
                <a href="" class="dropdown-toggle" data-toggle="dropdown" >More<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="">One</a></li>
                    <li><a href="">Two</a></li>
                    <li><a href="">Three</a></li>
                </ul>
            </li>
        </ul>
        <hr >
        <!-- 带下拉菜单的胶囊式标签页 -->
        <ul class="nav nav-pills">
            <li><a href="">Home</a></li>
            <li><a href="">Profile</a></li>
            <li class="dropdown">
                <a href="" class="dropdown-toggle" data-toggle="dropdown">More <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="">One</a></li>
                    <li><a href="">Two</a></li>
                    <li><a href="">Three</a></li>
                </ul>
            </li>
        </ul>
        <hr >

<!-- 导航条 -->


      

 <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">  <!--导航条（navbar）的头部-->
                    <!-- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button> -->
                    <a href="" class="navbar-brand">
                        <img src="image/photo5.png" style="width: 20px;">
                    </a>
                </div>
                
                <ul class="nav navbar-nav">
                    <li><a href="">论坛首页</a></li>
                    <li><a href="">技术论坛</a></li>
                    <li><a href="">前端论坛</a></li>
                    <li><a href="">后端论坛</a></li>
                </ul>
            </div>
        </nav>

 <!-- 表单 -->
 <!-- 将表单放置于navbar-form中 -->

  <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- 导航栏头部 ，navbar-header，navbar-brand-->
                <div class="navbar-header">
                    <div class="navbar-brand">
                        <img src="image/photo5.png" style="width: 20px;" >
                    </div>
                </div>
                <!-- 导航栏选项 -->
                <ul class="nav navbar-nav">
                    <li><a href="">首页</a></li>
                    <li><a href="">最新博文</a></li>
                    <li><a href="">个人中心</a></li>
                </ul>
                <!-- 导航栏中的文本，navbar-text -->
                <p class="navbar-text">Welcome to My <a href="" class="navbar-link">Blog</a> </p>
                
                <!-- 导航栏中的按钮 -->
                <button type="button" class="btn btn-default navbar-btn navbar-right">注册</button>
                <button type="button" class="btn btn-default navbar-btn navbar-right" style="margin-right: 5px;">登录</button>
                
                <!-- 导航栏搜索框 navbar-form-->
                <form class="navbar-form navbar-right" action="" method="">
                        <div class="form-group">
                            <input type="text" class="form-control" name="" id="" value="" placeholder="请输入内容...." />
                            <button type="button" class="btn btn-default
                            ">Search</button>
                        </div>
                </form>
            </div>
        </nav>

<!-- 将导航栏置顶 navbar-fixed-top，navbar-fixed-bottom-->
<!-- navbar-inverse 导航条反色 -->

 <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
            
            <div class="container">
                
                <div class="navbar-header">
                    <div class="navbar-brand">
                        <img src="image/photo5.png" style="width: 20px;" >
                    </div>
                </div>
                
                <ul class="nav navbar-nav">
                    <li><a href="">首页</a></li>
                    <li><a href="">机器学习</a></li>
                    <li><a href="">大数据</a></li>
                    <li><a href="">人工智能</a></li>
                </ul>
                <button type="button" class="btn btn-default navbar-btn navbar-right">注册</button>
                <button type="button" class="btn btn-default navbar-btn navbar-right" style="margin-right: 5px;">登录</button>
                
                <form class="navbar-form" action="" method="">
                    <div class="input-group">
                        <input type="text" class="form-control" name="" id="" value="" placeholder="请输入搜索内容" />
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-default ">Search</button>
                            </span>
                    </div>
                </form>
                
            </div>
        </nav>
    </body>
</html>

 

【Bootstrap】Bootstrap基础导航栏(响应式导航菜单)
MruAn的博客
12-20 5065
Bootstrap基础导航栏(响应式导航菜单) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
bootstrap4--导航及导航栏的创建
zxn200125的博客
12-19 5462
bootstrap4中导航创建和导航栏创建介绍
【前端开发】bootstrap框架：导航栏
`雾博客
06-18 7266
导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开 默认的导航栏 向 <nav>标签添加 class .navbar、.navbar-default。 向上面的元素添加role="navigation"，有助于增加可访问性 向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class nav.
Bootstrap 组件：导航组件的使用
WangMin@汪末末
09-06 632
作者:WangMin 格言:努力做好自己喜欢的每一件事 优快云原创文章 博客地址 ???? WangMin Bootstrap 中的导航组件都依赖同一个.nav类，状态类也是共用的。改变修饰类可以改变样式。 注意： 1. 在标签页上使用导航需要依赖 JavaScript 标签页插件 2. 确保导航组件的可访问性 如果你在使用导航组件实现导航条功能，必须在<ul>的最外侧的逻辑父元素上添加role="navigation"属性，或者用一个<nav>元素包裹整个导航组件。 标签页
bootstrap：导航栏【基础、简单、实用】
成长的嘻嘻哥
10-05 1970
寥寥几行代码，实现简洁，直观的效果，清晰的展现了bootstrap的特点和优点
Bootstrap 导航栏
杨欢博的博客
04-02 6016
一、Bootstrap 导航栏 1.1 基本导航栏 导航栏一般放在页面的顶部。 我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。 导航栏上的选项可以使用<ul>元素并添加 class="navbar-nav"类。 然后在 <li> 元素上添加 .nav-item 类， <a> 元素上使用 .nav-link 类: <nav class
拥Bootstrap入怀——导航栏篇
11-22
【Bootstrap导航栏详解】 在网页设计中，导航栏是一个至关重要的元素，它引导用户轻松地在网站的不同页面间切换。Bootstrap框架提供了强大的导航栏组件，让开发者能够快速创建响应式、功能丰富的导航栏。在本文中，...
bootstrap自定义样式之bootstrap实现侧边导航栏功能
12-02
在本篇文章中，我们将探讨如何利用Bootstrap自定义样式，特别是实现一个类似Android DrawerLayout的侧边导航栏功能，以满足个性化需求。 首先，我们注意到侧边导航栏在Bootstrap中通常是通过定位（position: fixed...
网站前端——导航（ 同一页面导航切换到不同分页面）
09-15
这是一个网站前端，在同一页面，导航切换道不同分页面。用到bootstrap框架，不需要CSS、JS文件。将文档复制即可使用。
Bootstrap 4导航栏布局深入解析
最后，本文会提供一个实际案例——Nav_bar.zip压缩包，这是一个包含实际代码的压缩文件，供开发者下载并实践导航栏的创建和定制。通过阅读这篇文章和实际操作，开发者将能够全面理解并掌握Bootstrap 4导航栏的布局和...
Bootstrap导航条navbar
weixin_30443747的博客
12-02 194
导航条基础 导航条（navbar）和上一节介绍的导航（nav），就相差一个字，多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。在这一节中将一起探讨Bootstrap框架中导航条的使用。 导航条和导航一样，在Bootstrap框架中是一个独立...
Bootstrap官网教程整理
02-03
从Bootstrap官网上原文复制粘贴，将其整理的 Bootstrap入门教学文档。 Bootstrap 简介 8 什么是 Bootstrap？ 8 历史 9 为什么使用 Bootstrap？ 9 Bootstrap 包的内容 9 Bootstrap 环境安装 11 下载 Bootstrap 11 文件结构 12 HTML 模板 12 实例 13 Bootstrap CSS 概览 15 HTML 5 文档类型（Doctype） 15 移动设备优先 15 响应式图像 16 全局显示、排版和链接 16 避免跨浏览器的不一致 18 容器（Container） 18 Bootstrap 网格系统 20 什么是网格（Grid）？ 20 什么是 Bootstrap 网格系统（Grid System）？ 20 Bootstrap 网格系统（Grid System）的工作原理 21 媒体查询 21 网格选项 22 响应式的列重置 23 偏移列 25 嵌套列 26 列排序 28 Bootstrap 排版 31 标题 31 引导主体副本 33 强调 34 缩写 35 地址（Address） 36 引用（Blockquote） 37 列表 38 Bootstrap 代码 41 实例 41 Bootstrap 表格 43 基本的表格 43 可选的表格类 44 上下文类 50 响应式表格 52 Bootstrap 表单 54 表单布局 54 支持的表单控件 58 静态控件 63 表单控件状态 64 表单控件大小 67 表单帮助文本 69 Bootstrap 按钮 71 按钮大小 72 按钮状态 74 按钮标签 77 Bootstrap 图像 79 Bootstrap 帮助器类 80 关闭图标 80 插入符 80 快速浮动 81 居中内容块 82 清除浮动 82 显示和隐藏内容 83 屏幕阅读器 84 Bootstrap 响应式实用工具 86 打印类 86 实例 86 Bootstrap 字形图标（Glyphicons） 89 什么是字形图标（Glyphicons）？ 89 获取字形图标（Glyphicons） 89 CSS 规则解释 89 用法 91 带有导航栏的字形图标（Glyphicons） 92 定制字形图标（Glyphicons） 93 Bootstrap 下拉菜单（Dropdowns） 95 选项 96 Bootstrap 按钮组 100 基本的按钮组 101 按钮工具栏 101 按钮的大小 102 嵌套 103 垂直的按钮组 104 Bootstrap 按钮下拉菜单 106 分割的按钮下拉菜单 107 按钮下拉菜单的大小 108 按钮上拉菜单 110 Bootstrap 输入框组 112 基本的输入框组 112 输入框组的大小 113 复选框和单选插件 115 按钮插件 116 带有下拉菜单的按钮 117 分割的下拉菜单按钮 119 Bootstrap 导航元素 121 表格导航或标签 121 胶囊式的导航菜单 122 两端对齐的导航 124 禁用链接 125 下拉菜单 126 Bootstrap 导航栏 130 默认的导航栏 130 响应式的导航栏 131 导航栏中的表单 133 导航栏中的按钮 134 导航栏中的文本 135 非导航链接 136 组件对齐方式 137 固定到顶部 139 固定到底部 140 静态的顶部 141 倒置的导航栏 143 路径导航 145 Bootstrap 分页 146 分页（Pagination） 146 翻页（Pager） 149 Bootstrap 标签 153 Bootstrap 徽章（Badges） 155 激活导航状态 155 Bootstrap 超大屏幕（Jumbotron） 158 Bootstrap 页面标题（Page Header） 161 Bootstrap 缩略图 162 添加自定义的内容 163 Bootstrap 警告（Alerts） 167 可取消的警告（Dismissal Alerts） 168 警告（Alerts）中的链接 170 Bootstrap 进度条 172 默认的进度条 172 交替的进度条 173 条纹的进度条 174 动画的进度条 175 堆叠的进度条 176 Bootstrap 多媒体对象（Media Object） 178 Bootstrap 列表组 184 向列表组添加徽章 185 向列表组添加链接 186 向列表组添加自定义内容 187 Bootstrap 面板（Panels） 190 面板标题 190 面板脚注 192 带语境色彩的面板 192 带表格的面板 194 带列表组的面板 196 Bootstrap Wells 198 尺寸大小 198 B
bootstrap完整左侧导航栏代码及结果样式
热门推荐
goodlook0123的专栏
03-04 7万+
如下是我写的基于bootstrap的左侧导航栏，代码如下：此demo所需的js和css插件链接点击打开链接1、left.html&lt;!--左侧核心代码，使用freemarker标签--&gt;&lt;div id="left" &gt;            &lt;div class="media user-media well-small"&gt;                &lt;a...
Bootstrap之navbar组件
u010078133的专栏
06-22 3446
一、简介 Navbar 指导航条，它在移动设备上显示为折叠状态，在宽屏幕上水平展开。这里 是一个线上例子。 {提示} 响应式导航条依赖 collapse 插件，定制 Bootstrap 时务必要包含。 {设备的可访问性} 务必使用  元素；如果使用  元素，需要设置属性 role="navigation"。这样能让辅助设备道这是一个导航条。 一个典型导航条的结
利用bootstrap实现的响应式导航条
冰雪为融的博客
04-18 3万+
响应式导航条，在不同屏幕大小显示的效果不同，先看一下效果上面是在PC端显示的效果上面的是在小屏幕上显示的效果上面是当我们点击三横的时候，导航条上的文字出现了看完效果我来总结一下用到的知识点：总体上涉及到的知识点有导航条相关的和折叠相关的，响应式导航条依赖collapse导航条相关知识：基类：navbarlogo：一般放在.navbar-brand之内（因为它已经被设置了内填充和高度），为了解决移动...
Bootstrap Navbar应用及源码解析
az44yao的专栏
06-13 473
https://www.cnblogs.com/LiveWithIt/p/5925194.html 目的： 用Bootstrap Navbar component 实现一个响应式导航 理解Bootstrap Navbarcomponent是如何工作的（不包括collepse.js） 清楚自己添加一个规定的类名时是做了些什么 根据自己的需求进行改装 对比自己的实现方法，找出差距。 1.实现： 我想要模仿一个这样的响应式导航： 按照Bootstrap官网上介绍的方法，按照规则创建..
自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
weixin_34167043的博客
01-11 4805
有人说前端发展太快,框架太多,各有所需，各有所长。看看这幅图，估计都知道这些框架，但是大部分公司中实际要用到的也就那么几个。 发展再快,框架再多。还是得回到原点，不就是Html+Css+JavaScript吗，使用任何牛逼的框架之前你也得把这些东西玩熟练了。bootstrap上大一的时候学html的时候就听老师说过，接触也快一年多了，所以这里准备写一...
Metasploit攻击xp，windows/smb/ms08_067_netapi
Shiliang1995
10-23 2024
第一步 安装XP虚拟机 这里用的系统版本如下 然后用nmap扫描XP系统的ip地址发现，扫不出来445端口，也就不用metasploit进行攻击 所以先对XP设置一下 编辑注册表HKEY_LOCAL_MACHINE=>SYSTEM=>CurrentControlSet=>Services=>NetBT=>Parameters 在Parameters上右键...
Bootstrap入门了解 如何使用
Shiliang1995
06-04 792
一、Bootstrap是什么 1、Bootstrap是用于快速开发Web应用程序和网站的前端框架，基于HTML，CSS，JavaScript 2、 由Twitter开发，并开源。 二、Bootstrap如何用 1、可以将bootstrap编译好的压缩包直接下载到本地，放到项目工程中，直接引用 2、可以使用bootCDN来在线引用bootstrap，一般项目上线时，会使用此方式，加速网站...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Test9912

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

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

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

打赏作者

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

抵扣说明：

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

余额充值