bootstrap固定响应式导航

最新推荐文章于 2025-08-06 16:42:26 发布

转载最新推荐文章于 2025-08-06 16:42:26 发布 · 95 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dzxczx/p/5517082.html

文章标签：

#javascript #ViewUI

本文介绍如何使用Bootstrap创建一个固定的响应式导航栏。通过HTML和Bootstrap提供的样式及JavaScript插件，实现了一个顶部固定且能适应不同屏幕尺寸的导航栏。此导航栏包括品牌标识和四个菜单项。

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

 1 <div class="navbar navbar-default navbar-fixed-top">
 2   <div class="container"><!--用container包裹住可以居中-->
 3     <div class="navbar-header">
 4       <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
 5         <span class="sr-only">qqq</span>
 6          <span class="icon-bar"></span>
 7          <span class="icon-bar"></span><!--图标-->
 8          <span class="icon-bar"></span><!--sr-only类可以对屏幕阅读器以外的设备隐藏内容-->
 9         </button>
10          <a class="navbar-brand" href="#">dzxczx</a>
11       </div>
12        <div class="collapse navbar-collapse navbar-responsive-collapse">
13            <ul class="nav navbar-nav">
14                  <li><a href="#">1</a></li>
15                  <li><a href="#">2</a></li>
16                  <li><a href="#">3</a></li>
17                  <li><a href="#">4</a></li>
18           </ul>
19     </div>
20   </div>
21 </div>