bootstrap

 

2022-11-19

  • Components:组件

    • Modal
      • 打开/隐藏
        • data-target="#myModalID":HTML 开启

        • data-dismiss="myModalID:HTML 关闭

        • $('myModalID).modal('show):手动打开 #方法

        • $('myModalID).modal('hide):手动隐藏 #方法

        • shown.bs.modal:Modal 打开时 #事件

        • hidden.bs.modal:Modal 关闭时 #事件

        • 隐藏后清空数据

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

  • 无障碍

    • aria-label
    • aria-labelledby
  • 界面

    • 阴影 Shadows 向元素添加或删除阴影
      • shadow-none:取消阴影 #class
      • shadow-sm #class
      • shadow #class
      • shadow-lg #class
    • 表格 Tables
      • table-striped:隔行颜色 #class
      • table-hover:悬停变色 #class
  • 第三方组件

按键切换选项卡

按钮

需传递两个元素值

  • data-bs-toggle,值为pill
  • href,值为对应 div ID
1
<div class="row">
2
<label for="ecs_cpu" class="col-sm-1 col-form-label">内存</label>
3
<div class="btn-group col-sm-5 nav nav-pills" role="group">
4
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
5
<label class="btn btn-outline-primary" for="btnradio1" data-bs-toggle="pill" href="#pills-home">Radio 1</label>
6
7
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
8
<label class="btn btn-outline-primary" for="btnradio2" data-bs-toggle="pill" href="#pills-profile">Radio 2</label>
9
10
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
11
<label class="btn btn-outline-primary" for="btnradio3"data-bs-toggle="pill" href="#pills-contact">Radio 3</label>
12
</div>
13
</div>

选项卡

  • id 的值要和 button 的 href 对应
1
<div class="tab-content" id="pills-tabContent">
2
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">A</div>
3
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">B</div>
4
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">C</div>
5
</div>

按钮平铺

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