Bootstrap4 导航栏

Bootstrap4 导航栏


目录

Bootstrap4 导航栏

动态选项卡

标准的导航栏 

导航对齐方式

导航栏的组成

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

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

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

下拉菜单

垂直导航

垂直导航栏

不同颜色导航栏

品牌/Logo

导航栏的表单与按钮 

 导航栏使用下拉菜单

导航栏文本

固定导航栏

面包屑导航



简单的水平导航栏,可以在 

     元素上添加 .nav类,在每个 
  •  选项上添加 .nav-item 类,在每个链接上添加 .nav-link 类:

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

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

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

    动态选项卡

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

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

    选项卡切换



    HOME

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    标准的导航栏 

    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;

     Logo 

    导航栏的表单与按钮 

    导航栏的表单 

     元素使用 class="form-inline" 类来排版输入框与按钮;

     导航栏使用下拉菜单

    导航栏文本

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

      
        Navbar text
      
     

    固定导航栏

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

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

    面包屑导航

     

     

你可能感兴趣的:(前端)