Boostrap4 学习笔记 ——导航类,下拉菜单,轮播

说明

本文每个bootstra4的class用法和HTML结构相关
结构和样式的表明用css选择器简单表示
其中[]代表可选
||代表或者
其中data-
是H5中数据存储的方式,
在bootstrap4中不能缺省,用[]进行表示,会和class分开

导航

ul.nav[.flex-column ||.justify-content-center||.justify-content-end||.nav-justify||nav-pills||nav-tabs]//【垂直导航||居中||右对齐||胶囊导航||选项卡导航】
    li.nav-item
        a.nav-link[.active.disable]

导航栏

最简导航栏

nav.navbar[.navbar-expand-xl|lg|md|sm .bg-dark ||.fixed-top||.fixed-bottom]
    a.navbar-brand
    ul.navbar-nav
        li.nav-item
            a.nav-link

注:没有bg时默认白色背景,没有navbar-expand-*时,导航栏垂直排列

折叠导航栏


面包屑导航

ul.breadcrumb
    li.breadcrumb-item[.active || .diable]

下拉菜单

div.dropdown
    button.dropdown-toggle[data-toggle="dropdown"]
    div.dropdown-menu
          a.dropdown-item[.active || .disable]
    

可新添加的内容和类


内嵌按钮组及下拉菜单

拆分按钮下拉菜单


轮播


你可能感兴趣的:(Boostrap4 学习笔记 ——导航类,下拉菜单,轮播)