bootstrap

• Components：组件
  • Modal
    • 打开/隐藏
      • data-target="#myModalID"：HTML 开启
      • data-dismiss="myModalID：HTML 关闭
      • $('myModalID).modal('show)：手动打开#方法
      • $('myModalID).modal('hide)：手动隐藏#方法
      • shown.bs.modal：Modal 打开时#事件
      • hidden.bs.modal：Modal 关闭时#事件
      • 隐藏后清空数据

        • $('#myModalID').on('hidden.bs.modal', function() {
              $(this).removeData('modal');
          });

• Utilities
  • [Flex](Flex · Bootstrap v5.1)
    • justify-content-md-center：居中对齐
• 无障碍
  • aria-label
  • aria-labelledby
• 界面
  • 阴影 Shadows 向元素添加或删除阴影
    • shadow-none：取消阴影#class
    • shadow-sm#class
    • shadow#class
    • shadow-lg#class
  • 表格 Tables
    • table-striped：隔行颜色#class
    • table-hover：悬停变色#class
• 第三方组件
  • 表单：snapappointments/bootstrap-select#jquery
  • 表格：wenzhixin/bootstrap-table

按键切换选项卡 §

按钮 §

需传递两个元素值

• data-bs-toggle，值为pill
• href，值为对应 div ID

<div class="row">
    <label for="ecs_cpu" class="col-sm-1 col-form-label">内存</label>
    <div class="btn-group col-sm-5 nav nav-pills" role="group">
        <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
        <label class="btn btn-outline-primary" for="btnradio1" data-bs-toggle="pill" href="#pills-home">Radio 1</label>
 
        <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
        <label class="btn btn-outline-primary" for="btnradio2" data-bs-toggle="pill" href="#pills-profile">Radio 2</label>
 
        <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
        <label class="btn btn-outline-primary" for="btnradio3"data-bs-toggle="pill" href="#pills-contact">Radio 3</label>
    </div>
</div>

选项卡 §

• id 的值要和 button 的 href 对应

<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">A</div>
    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">B</div>
    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">C</div>
</div>

按钮平铺 §

<!-- 按钮平铺 -->
<div class="row">
    <label for="ecs_cpu" class="col-sm-1 col-form-label">CPU</label>
    <!-- name 为组名 -->
    <div class="btn-group col-sm-5 nav" role="group">
        <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
        <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
 
        <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
        <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
 
        <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
        <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
    </div>
</div>