bootstrap-导航栏

最新推荐文章于 2023-09-26 22:41:18 发布
最新推荐文章于 2023-09-26 22:41:18 发布
阅读量273 收藏
点赞数
文章标签： bootstrap 导航
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aloe_904/article/details/78535312
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
    <link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css">
    <script src="../JS/jquery-3.2.1.min.js"></script>
    <script src="../JS/bootstrap.js"></script>

    <style type="text/css">
        body{margin-top: 60px;}
    </style>
</head>
<body style="height: 2000px;">

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
    <!-- logo -->
        <div class="navbar-header">
            <a href="#" class="navbar-brand">logo</a><!-- 为了在分辨率小的情况下仍然能使用，加外围div -->
        </div>

        <ul class="nav navbar-nav navbar-left ">
            <li><a href="#">one</a></li>
            <li><a href="#">two</a></li>
            <li><a href="#">three</a></li>
        </ul>

        <!-- <button class="btn btn-default navbar-btn">搜索</button> --><!-- 按钮 -->

        <!-- <a href="#" class="navbar-link">链接</a> --><!-- 链接 -->

        <!-- <p class="navbar-left navbar-text">95951</p> --><!-- 文字 -->

        <form class="navbar-form navbar-left">
            <input type="text" class="form-control">
            <input type="submit" class="btn btn-primary" value="搜索">
        </form>

        <ul class="nav navbar-nav navbar-right"><!-- navbar-left ：左浮动 默认-->
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
        </ul>
    </div>
</nav>

<div class="container">
    <p>11111</p>
    <p>22222</p>
    <p>33333</p>
</div>

<!-- 
<div class="container"> class="container-fluid"自适应容器的宽度 
        <nav class="navbar navbar-default">
            <ul class="nav navbar-nav ">
                <li><a href="#">one</a></li>
                <li><a href="#">two</a></li>
                <li><a href="#">three</a></li>
            </ul>
        </nav>
    </div>


<nav class="navbar navbar-default">
        <div class="container"> class="container-fluid" 
            <ul class="nav navbar-nav ">
                <li><a href="#">one</a></li>
                <li><a href="#">two</a></li>
                <li><a href="#">three</a></li>
            </ul>
        </div>
    </nav>



<nav class="navbar navbar-inverse navbar-static-top"> navbar-inverse navbar-static-top 
        <div class="container">
            <ul class="nav navbar-nav ">
                <li><a href="#">one</a></li>
                <li><a href="#">two</a></li>
                <li><a href="#">three</a></li>
            </ul>
        </div>
    </nav>


<nav class="navbar navbar-default navbar-fixed-bottom"> navbar-default navbar-fixed-bottom 
        <div class="container">
            <ul class="nav navbar-nav ">
                <li><a href="#">one</a></li>
                <li><a href="#">two</a></li>
                <li><a href="#">three</a></li>
            </ul>
        </div>
</nav>
 -->

</body>
</html>
<!--
导航：<nav class="navbar">

<ul class="nav navbar-nav ">

风格：两种（都默认有圆角）
1. navbar navbar-default：默认的样式,浅色

2. navbar navbar-inverse：深色的样式

去掉默认的圆角：navbar-static-top,没有bottom样式

navbar-fixed-top：固定导航栏在顶部，即使滚动条移动也不改变位置
navbar-fixed-bottom：固定导航栏在底部
若固定的顶部导航栏遮挡住内容，则可以设置body{margin-top:50px;}

导航条：
navbar-header：为了使logo在低分辨率中也能正常使用

navbar-brand:显示logo

navbar-left:左浮动 默认

navbar-right：右浮动

navbar-btn：导航条中的按钮，能使按钮自动居中<button class="btn btn-default navbar-btn">

navbar-link：使用链接的时候加上，会使链接的文字颜色发生改变

navbar-text：使用文字时候加上，同样文字也可以加上浮动

navbar-form：<form class="navbar-form navbar-left">
                <input type="text" class="form-control">
                <input type="submit" class="btn btn-primary" value="搜索">
            </form>

 -->
只看五分钟佩奇的小姑姑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap编写导航栏和登陆框
09-02
主要为大家详细介绍了Bootstrap导航栏和登陆框的编写代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap-transparent-navbar:Bootstrap 5-tResponsive透明导航栏，固定在滚动网页顶部
05-24
引导程序透明导航栏 Bootstrap 5-响应式透明导航栏，固定在滚动网页的顶部
Bootstrap-html渐变顶部固定自适应导航栏
12-12
web前端开发例子，基于Bootstrap样式实现的html渐变顶部固定自适应导航栏，效果很不错！网上搜集，供参考学习。
bootstrap-navbar：帮助程序生成Twitter Bootstrap导航栏
01-29
BootstrapNavbar 帮助程序生成Bootstrap样式导航栏 安装 该gem仅提供一个带有生成HTML方法的帮助程序模块。 其他gem可以使用它来使这些帮助程序可用于框架的渲染引擎，例如： 对于Rails： : 对于 ： : 简而言之：除非您知道自己在做什么，否则请不要在应用程序中直接使用此gem！ 要求 仅支持Bootstrap> = 2.1.0。 不过，它可能也适用于早期版本。 建立 设置bootstrap_version（必需） BootstrapNavbar需要知道它正在处理哪个版本的Bootstrap，因为每个版本与上一个版本相比都有很小的变化。 BootstrapNavbar . configure do | config | config . bootstrap_version = '4.0.0' end 设置current_url_method（必需） 呈现导航栏时，BootstrapNavbar必须能够查询当前URL，例如，确定菜单项是否处于活动状态。 由于确定当前URL的方式因您是否使用Rails，Sinatra等而异，因此必须在某
bootstrap3 侧边导航栏
11-15
这是一个 bootstrap3 的侧边导航栏,东西大家应该都很熟习。希望对大家有所帮助
Bootstrap----导航栏
weixin_52247167的博客
04-14 9749
文章目录 一、导航栏 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 5-导航栏
m0_73839298的博客
09-24 869
​​​​​​​所有的导航栏文本颜色效果图。特征:导航栏默认，垂直显示。所有的导航栏颜色效果图。代码图​​​​​​​。
Bootstrap 5-导航栏-固定导航栏和粘性导航栏
m0_73839298的博客
09-26 622
位置固定导航栏顶部代码图效果图位置固定导航栏底部代码图效果图粘性导航栏代码图效果图。
写给自己-链接警告
m0_57434744的博客
01-06 1922
收藏从未停止，学习从未开始
架构师书单
万里长江横渡，极目楚天舒
08-15 4392
一、大型网站架构系列 第一本：《大型网站技术架构：核心原理与案例分析》--李智慧 第二本：《大型网站系统与Java中间件实践》 第三本：《大型分布式网站架构设计与实践》--陈康贤。 第四本：《Web信息架构——设计大型网站》 第五本：《高性能网站建设》，对web前端架构做了非常好的讲解。 第六本：《实用负载均衡技术：网站性能优化攻略》，本书较详细的介绍了负载均衡，缓存代理等知识，对系统
springboot(酒店管理系统)
04-25
开发语言：Java JDK版本：JDK1.8（或11） 服务器：tomcat 数据库：mysql 5.6/5.7（或8.0） 数据库工具：Navicat 开发软件：idea 依赖管理包：Maven 代码+数据库保证完整可用，可提供远程调试并指导运行服务（额外付费）～ 如果对系统的中的某些部分感到不合适可提供修改服务，比如题目、界面、功能等等... 声明： 1.项目已经调试过，完美运行 2.需要远程帮忙部署项目，需要额外付费 3.本项目有演示视频，如果需要观看，请联系我 4.调试过程中可帮忙安装IDEA，eclipse，MySQL，JDK，Tomcat等软件 重点： 需要其他Java源码联系我，更多源码任你选，你想要的源码我都有！ 需要加v19306446185
BP神经网络matlab实例.doc
最新发布
04-25
数学模型算法
设计.zip
04-25
设计.zip
基于 Spring Cloud 组件构建的分布式服务架构
04-25
Java SSM项目是一种使用Java语言和SSM框架（Spring + Spring MVC + MyBatis）开发的Web应用程序。SSM是一种常用的Java开发框架组合，它结合了Spring框架、Spring MVC框架和MyBatis框架的优点，能够快速构建可靠、高效的企业级应用。 1. Spring框架：Spring是一个轻量级的Java开发框架，提供了丰富的功能和模块，用于开发企业级应用。它包括IoC（Inverse of Control，控制反转）容器、AOP（Aspect-Oriented Programming，面向切面编程）等特性，可以简化开发过程、提高代码的可维护性和可测试性。 2. Spring MVC框架：Spring MVC是基于Spring框架的Web框架，用于开发Web应用程序。它采用MVC（Model-View-Controller，模型-视图-控制器）的架构模式，将应用程序分为模型层、视图层和控制器层，提供了处理请求、渲染视图和管理流程的功能。 3. MyBatis框架：MyBatis是一个持久层框架，用于与数据库进行交互。它提供了一种将数据库操作与Java对象映射起来的方式，避免了手动编写繁琐的SQL语句，并提供了事务管理和缓存等功能，简化了数据库访问的过程
【微信小程序毕业设计】书店系统开发项目(源码+演示视频+说明).rar
04-25
【微信小程序毕业设计】书店系统开发项目(源码+演示视频+说明).rar 【项目技术】 微信小程序开发工具+java后端+mysql 【演示视频-编号：246】 https://pan.quark.cn/s/cb634e7c02b5 【实现功能】 用户信息管理，图书信息管理，图书类型管理，图书留言管理，论坛信息管理等
基于java的-44-17-宠物销售系统-源码.zip
04-25
提供的源码资源涵盖了Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试，可以直接运行，可以放心下载使用。有任何使用问题欢迎随时与博主沟通，第一时间进行解答！
Web开发工具和方法课程的学术项目Java、Spring、Hibernate、Angular
04-25
Java SSM项目是一种使用Java语言和SSM框架（Spring + Spring MVC + MyBatis）开发的Web应用程序。SSM是一种常用的Java开发框架组合，它结合了Spring框架、Spring MVC框架和MyBatis框架的优点，能够快速构建可靠、高效的企业级应用。 1. Spring框架：Spring是一个轻量级的Java开发框架，提供了丰富的功能和模块，用于开发企业级应用。它包括IoC（Inverse of Control，控制反转）容器、AOP（Aspect-Oriented Programming，面向切面编程）等特性，可以简化开发过程、提高代码的可维护性和可测试性。 2. Spring MVC框架：Spring MVC是基于Spring框架的Web框架，用于开发Web应用程序。它采用MVC（Model-View-Controller，模型-视图-控制器）的架构模式，将应用程序分为模型层、视图层和控制器层，提供了处理请求、渲染视图和管理流程的功能。 3. MyBatis框架：MyBatis是一个持久层框架，用于与数据库进行交互。它提供了一种将数据库操作与Java对象映射起来的方式，避免了手动编写繁琐的SQL语句，并提供了事务管理和缓存等功能，简化了数据库访问的过程
spring-boot 集成geotools工具包（高分项目）.zip
04-25
Java SSM项目是一种使用Java语言和SSM框架（Spring + Spring MVC + MyBatis）开发的Web应用程序。SSM是一种常用的Java开发框架组合，它结合了Spring框架、Spring MVC框架和MyBatis框架的优点，能够快速构建可靠、高效的企业级应用。 1. Spring框架：Spring是一个轻量级的Java开发框架，提供了丰富的功能和模块，用于开发企业级应用。它包括IoC（Inverse of Control，控制反转）容器、AOP（Aspect-Oriented Programming，面向切面编程）等特性，可以简化开发过程、提高代码的可维护性和可测试性。 2. Spring MVC框架：Spring MVC是基于Spring框架的Web框架，用于开发Web应用程序。它采用MVC（Model-View-Controller，模型-视图-控制器）的架构模式，将应用程序分为模型层、视图层和控制器层，提供了处理请求、渲染视图和管理流程的功能。 3. MyBatis框架：MyBatis是一个持久层框架，用于与数据库进行交互。它提供了一种将数据库操作与Java对象映射起来的方式，避免了手动编写繁琐的SQL语句，并提供了事务管理和缓存等功能，简化了数据库访问的过程
决策树.zip0002
04-25
决策树， 决策树（Decision Tree）是一种常见的数据挖掘算法，它模仿人类决策过程来预测数据。决策树是一种树形结构，它从根节点开始，分支延伸至叶节点，每个内部节点代表了某个特征的测试，而每个叶节点代表了最终的预测结果。
bootstrap左侧导航栏
09-17
Bootstrap 左侧导航栏可以使用 Bootstrap 的 nav 和 nav-pills 组件来实现。通过以下步骤来创建： 1. 创建一个具有左侧导航栏的容器，例如 div。 2. 在容器中创建一个 ul 元素，并添加 nav 和 nav-pills 类。 3. 在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值