BootStrap-CSS样式_布局组件_固定导航栏(顶部底部静态面包屑导航)

最新推荐文章于 2024-05-14 09:55:02 发布

有梦的小草

最新推荐文章于 2024-05-14 09:55:02 发布

阅读量4.9k

点赞数 1

分类专栏： BootStrap 文章标签： BootStrap BootStrap-CSS样式_布局组件

本文链接：https://blog.csdn.net/LoveyourselfJiuhao/article/details/85109994

版权

BootStrap 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

固定导航栏

Bootstrap 导航栏可以动态定位。默认情况下，它是块级元素，它是基于在 HTML 中放置的位置定位的。通过一些帮助器类，您可以把它放置在页面的顶部或者底部，或者您可以让它成为随着页面一起滚动的静态导航栏。为了防止导航栏与页面主体中的其他内容的顶部相交错，请向 <body> 标签添加至少 50 像素的内边距（padding），内边距的值可以根据您的需要进行设置。

固定到顶部

如果您想要让导航栏固定在页面的顶部，请向 .navbar class 添加 class .navbar-fixed-top。

固定到底部

如果您想要让导航栏固定在页面的底部，请向 .navbar class 添加 class .navbar-fixed-bottom。

静态的顶部

如需创建能随着页面一起滚动的导航栏，请添加 .navbar-static-top class。该 class 不要求向 <body> 添加内边距（padding）。

navbar-inverse样式：设置黑底白字样式的导航栏

breadcrumb样式：设置面包屑导航栏

代码实例：

<!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">
    <title>固定导航栏</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body style="padding:50px;">
   <h2>8. 固定到顶部的导航栏</h2>
   <!-- navbar-fixed-top样式：设置固定顶部导航栏 -->
    <div class="container" style="padding:40px">
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="navbar-header">
                <a class="navbar-brand" href="#"> 固定到顶部的导航栏</a>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-nav" >
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div id="my-nav" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">.NET</a>
                    </li>
                    <li><a href="#">PHP</a>
                    </li>
                    <li><a href="#">HTML5</a>
                    </li>
                    <li><a href="#">Java</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <h2>9. 固定到底部的导航栏</h2>
    <!-- navbar-fixed-bottom样式：设置固定底部导航栏 -->
    <div class="container" style="padding:40px">
        <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">固定到底部的导航栏</a>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-nav1" >
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div id="my-nav1" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">.NET</a>
                    </li>
                    <li><a href="#">PHP</a>
                    </li>
                    <li><a href="#">HTML5</a>
                    </li>
                    <li><a href="#">Java</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    
    <h2>10. 静态固定到顶部的导航栏</h2>
    <!-- navbar-static-top样式：设置静态导航栏 -->
    <div class="container" style="padding:40px">
        <nav class="navbar navbar-default navbar-static-top " role="navigation">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">静态固定到顶部的导航栏</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">.NET</a>
                    </li>
                    <li><a href="#">PHP</a>
                    </li>
                    <li><a href="#">HTML5</a>
                    </li>
                    <li><a href="#">Java</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
   
    <h2>11. 设置黑底白字样式的导航栏</h2>
    <!-- navbar-inverse样式：设置黑底白字样式的导航栏 -->
    <div class="container" style="padding:40px">
        <nav class="navbar navbar-default navbar-inverse " role="navigation">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">黑底白字导航栏</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">.NET</a>
                    </li>
                    <li><a href="#">PHP</a>
                    </li>
                    <li><a href="#">HTML5</a>
                    </li>
                    <li><a href="#">Java</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    
    <h2>12. 面包屑导航栏</h2>
    <!-- breadcrumb样式：设置面包屑导航栏 -->
    <ol class="breadcrumb">
        <li><a href="#">程序设计</a></li>
        <li><a href="#">Java语言</a></li>
        <li><a href="#">JSP</a></li>
    </ol>
    <script src="../js/jquery-1.11.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</body>
</html>

显示效果：

页面缩小后：

有梦的小草

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
BootStrap-CSS样式_布局组件_固定导航栏(顶部底部静态面包屑导航)

固定导航栏Bootstrap 导航栏可以动态定位。默认情况下，它是块级元素，它是基于在 HTML 中放置的位置定位的。通过一些帮助器类，您可以把它放置在页面的顶部或者底部，或者您可以让它成为随着页面一起滚动的静态导航栏。为了防止导航栏与页面主体中的其他内容的顶部相交错，请向 &lt;body&gt; 标签添加至少 50 像素的内边距（padding），内边距的值可以根据您的需要进行设置。...
复制链接

扫一扫

专栏目录