BootStrap 导航条组件

最新推荐文章于 2024-06-27 19:30:00 发布

xunbaogang

最新推荐文章于 2024-06-27 19:30:00 发布

阅读量525

点赞数

分类专栏： # BootStrap 文章标签： bootstrap 导航条

本文链接：https://blog.csdn.net/xunbaogang/article/details/51967669

版权

BootStrap 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

基本导航条：
<nav class="navbar navbar-default">
   <div class="container">
      <div class="navbar-header">
       <a href="#" class="navbar-brand">标题</a>
      </div>
      <ul class="nav navbar-nav">
       <li class="active"><a href="#">首页</a></li>
       <li class="disabled"><a href="#">资讯</a></li>
       <li><a href="#">产品</a></li>
       <li><a href="#">关于</a></li>
      </ul>
   </div>
</nav>

导航栏中使用表单
<nav class="navbar navbar-default">
   <div class="container">
      <div class="navbar-header">
       <a href="#" class="navbar-brand">标题</a>
      </div>
      <ul class="nav navbar-nav">
       <li class="active"><a href="#">首页</a></li>
       <li class="disabled"><a href="#">资讯</a></li>
       <li><a href="#">产品</a></li>
       <li><a href="#">关于</a></li>
      </ul>
      <form action="" class="navbar-form navbar-right">
           <div class="input-group">
               <input type="text" class="form-control" />
               <div class="input-group-btn">
                   <button class="btn btn-default">提交</button>
               </div>
            </div>
      </form>

   </div>
</nav>

导航栏中使用按钮
<button class="btn btn-default navbar-btn">按钮</button>

导航栏中使用文本
<p class="navbar-text">一段文本</p>

导航栏中使用超链接，一般跟文本放在一起
<p class="navbar-text">一段文本<a href="#" class="navbar-link">超链接</a></p>

导航的固定
固定在顶部：<nav class="navbar navbar-default navbar-fixed-top">
固定在底部：<nav class="navbar navbar-default navbar-static-bottom">

静态导航：就是基本导航，去掉圆角
<nav class="navbar navbar-default navbar-static-top">