Bootstrap制作精美渐变顶部固定自适应导航栏

最新推荐文章于 2025-05-29 17:34:35 发布

JAVA_Drious

最新推荐文章于 2025-05-29 17:34:35 发布

阅读量5.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Bootstrap框架文章标签： bootstrap 导航

本文链接：https://blog.youkuaiyun.com/MrJavaweb/article/details/72529945

本文介绍如何利用Bootstrap创建一个精美、渐变效果且顶部固定的自适应导航栏。通过9行CSS代码实现，关键点包括设置html和body的100%宽度和高度以填充全屏，使用nav-fixed-top类固定导航栏，利用scroll事件实现动态效果，以及通过transition属性平滑过渡。

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

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
    <title></title>  
    <meta charset="utf-8" />
    <link href="<%=path%>/css/style.css" rel="stylesheet" type="text/css" /> 
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>  
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>  

</head>  
<body>  
    <nav class="navbar navbar-fixed-top my-navbar" role="navigation">  
        <div class="container-fluid">