说明

本文每个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]

<ul class="nav nav-tabs nav-justified">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>

导航栏

最简导航栏

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-*时，导航栏垂直排列

折叠导航栏

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Navbar</a>
 
  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
 
  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li> 
    </ul>
  </div> 
</nav>

面包屑导航

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

<ul class="breadcrumb">
    <li class="breadcrumb-item"><a href="">Link without class</a></li>
    <li class="breadcrumb-item active"><a href="">Link without class</a></li>
    <li class="breadcrumb-item"><a href="">Link without class</a></li>
</ul>

下拉菜单

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

    <div class="dropdown">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        Dropdown button
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item active" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
      </div>
    </div>

可新添加的内容和类

<div class="dropdown-menu  dropdown-menu-right">
    <a class="dropdown-header active" href="#">Link 1</a>
    <a class="dropdown-divider" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
</div>

内嵌按钮组及下拉菜单

<div class="btn-group">
    <button type="button" class="btn btn-primary"></button>
    <button type="button" class="btn btn-primary"></button>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Button</button>
    <div class="dropdown-menu">
        <a href="" class="dropdown-item">Item1</a>
        <a href="" class="dropdown-item">Item2</a>
        <a href="" class="dropdown-item">Item3</a>
    </div>
</div>

拆分按钮下拉菜单

<div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
         <span class="caret"></span>
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Tablet</a>
        <a class="dropdown-item" href="#">Smartphone</a>
    </div>
</div>

轮播

<div id="demo" class="carousel slide" data-ride="carousel">
 
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="http://static.runoob.com/images/mix/img_fjords_wide.jpg">
      <div class="carousel-caption">
        <h3>第一张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="http://static.runoob.com/images/mix/img_nature_wide.jpg">
      <div class="carousel-caption">
        <h3>第二张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="http://static.runoob.com/images/mix/img_mountains_wide.jpg">
      <div class="carousel-caption">
        <h3>第三张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
 
</div>