BootStrap 导航条组件

来源：互联网发布：ubuntu recovery 修复编辑：程序博客网时间：2024/04/28 12:55

基本导航条：
<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">

0 0