Bootstrap4 导航栏

耗尽温柔 提交于 2019-12-30 00:25:35

Bootstrap4 导航栏


目录

Bootstrap4 导航栏

动态选项卡

标准的导航栏 

导航对齐方式

导航栏的组成

ul 元素中包含navbar-nav 类 表示导航栏中ul

li元素中包含nav-item类 表示导航栏中ul中li 的元素

li-> a 中class="nav-link”表示元素是连接  

下拉菜单

垂直导航

垂直导航栏

不同颜色导航栏

品牌/Logo

导航栏的表单与按钮 

 导航栏使用下拉菜单

导航栏文本

固定导航栏

面包屑导航



简单的水平导航栏,可以在 <ul> 元素上添加 .nav类,在每个 <li> 选项上添加 .nav-item 类,在每个链接上添加 .nav-link 类:

 .nav-tabs 类可以将导航转化为选项卡。

.nav-pills 类可以将导航项设置成胶囊形状。

.nav-justified 类可以设置导航项齐行等宽显示。

动态选项卡

如果你要设置选项卡是动态可切换的,可以在每个链接上添加 data-toggle="tab" 属性。 然后在每个选项对应的内容的上添加 .tab-pane类。

如果你希望有淡入效果可以在 .tab-pane 后添加 .fade类:

<div class="container">
  <h2>选项卡切换</h2>
  <br>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
  </div>
</div>

标准的导航栏 

nav元素中用 .navbar 类来创建一个标准的导航栏

导航对齐方式

.justify-content-center 类设置导航居中显示, .justify-content-end 类设置导航右对齐。

导航栏的组成

nav元素中包含  .navbar  导航栏垂直 、响应式的、 导航栏颜色、 导航栏适应 等类 

nav元素中包含  ul

ul 元素中包含navbar-nav 类 表示导航栏中ul

li元素中包含nav-item类 表示导航栏中ul中li 的元素

结构如下:

nav -> a或者a->img 或者ul->->li->a等

li-> a 中class="nav-link”表示元素是连接  

下拉菜单

.dropdown 类用来指定一个下拉菜单。

.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线;

.dropdown-header 类用于在下拉菜单中添加标题;

.disabled 类禁用下拉菜单;

 .dropdown-menu 类后添加 .dropdown-menu-right 类 让下拉菜单右对齐

向上弹出的下拉菜单.dropup类:

垂直导航

.flex-column 类用于创建垂直导航:

垂直导航栏

删除 .navbar-expand-xl|lg|md|sm 类  变化为 ->垂直导航栏;

不同颜色导航栏

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark和 .bg-light类  创建不同颜色导航栏

.navbar-brand 类用于高亮显示品牌/Logo;

<a class="navbar-brand" href="#"> <img src="*.jpg" alt="Logo" style="width:40px;"> </a>

导航栏的表单与按钮 

导航栏的表单 <form> 元素使用 class="form-inline" 类来排版输入框与按钮;

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <form class="form-inline">
    <input class="form-control" type="text" placeholder="Search">
    <button class="btn btn-success" type="submit">Search</button>
  </form>
</nav>

 导航栏使用下拉菜单

<li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Dropdown link
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
      </div>
    </li>

导航栏文本

使用 .navbar-text 类来设置导航栏上非链接文本,可以保证水平对齐,颜色与内边距一样。

  <span class="navbar-text">
    Navbar text
  </span>
 

固定导航栏

.fixed-top 类来实现导航栏的固定;

.fixed-bottom 类用于设置导航栏固定在底部;

面包屑导航

<nav class="breadcrumb">
  <a class="breadcrumb-item" href="#">Home</a>
  <a class="breadcrumb-item" href="#">Library</a>
  <a class="breadcrumb-item" href="#">Data</a>
  <span class="breadcrumb-item active">Bootstrap</span>
</nav>

 

<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Library</a></li>
  <li class="breadcrumb-item active">Data</li>
</ol>

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!