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

最新推荐文章于 2020-11-28 14:20:06 发布

原创

最新推荐文章于 2020-11-28 14:20:06 发布 · 5.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #导航

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

<!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">