美文网首页
第二十六谈:导航栏

第二十六谈:导航栏

作者: 辽A丶孙悟空 | 来源:发表于2020-06-05 14:42 被阅读0次

    本节课我们来开始学习 Bootstrap 的提供导航栏组件功能。

    一.导航栏
    1. 导航栏是一种响应式的组件,主要使用.navbar-toggler 来实现;
          <nav class="navbar navbar-expand-md navbar-light bg-light">
              <span class="navbar-brand">Logo</span>
              <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
                  <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbar">
                  <ul class="navbar-nav">
                      <li class="nav-item active">
                          <a href="#" class="nav-link">首页</a>
                      </li>
                      <li class="nav-item">
                          <a href="#" class="nav-link">列表</a>
                      </li>
                      <li class="nav-item">
                          <a href="#" class="nav-link">图文</a>
                      </li>
                      <li class="nav-item">
                          <a href="#" class="nav-link">关于</a>
                      </li>
                  </ul>
              </div>
          </nav>
    
    1. 如果你不想使用 ul>li 这种方式实现导航列表,可以使用 div>a;
          <div class="collapse navbar-collapse" id="navbar">
              <div class="navbar-nav">
                  <a href="#" class="nav-item nav-link active">首页</a>
                  <a href="#" class="nav-item nav-link">列表</a>
                  <a href="#" class="nav-item nav-link">图文</a>
                  <a href="#" class="nav-item nav-link">关于</a>
              </div>
          </div>
    
    1. 给导航栏增加一个查询的表单;
          <form action="" class="form-inline">
              <input type="text" class="form-control" placeholder="关键字">
              <button class="btn btn-outline-secondary ml-2">搜索</button>
          </form>
    
    1. 如果你想给导航栏增加文本,使用.navbar-text;
          <span class="navbar-text">这里是文本! </span>
    
    1. 导航栏可以设置主题配色,主要修改.navbar-dark 和.bg-dark 两个样式;
          <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    
    1. 如果想要响应式的菜单按钮显示在左边,只要把 LOGO 移入隐藏切换区域即可;
          <div class="collapse navbar-collapse" id="navbar">
              <span class="navbar-brand">Logo</span>
                  ...
    

    相关文章

      网友评论

          本文标题:第二十六谈:导航栏

          本文链接:https://www.haomeiwen.com/subject/ejugzhtx.html