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 关闭时 #事件
    - 隐藏后清空数据
      - 1 $("#myModalID").on("hidden.bs.modal", function () { 2 $(this).removeData("modal"); 3 });
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

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
5
      type="radio"
6
      class="btn-check"
7
      name="btnradio"
8
      id="btnradio1"
9
      autocomplete="off"
10
      checked
11
    />
12
    <label
13
      class="btn btn-outline-primary"
14
      for="btnradio1"
15
      data-bs-toggle="pill"
16
      href="#pills-home"
17
      >Radio 1</label
18
    >
19

20
    <input
21
      type="radio"
22
      class="btn-check"
23
      name="btnradio"
24
      id="btnradio2"
25
      autocomplete="off"
26
    />
27
    <label
28
      class="btn btn-outline-primary"
29
      for="btnradio2"
30
      data-bs-toggle="pill"
31
      href="#pills-profile"
32
      >Radio 2</label
33
    >
34

35
    <input
36
      type="radio"
37
      class="btn-check"
38
      name="btnradio"
39
      id="btnradio3"
40
      autocomplete="off"
41
    />
42
    <label
43
      class="btn btn-outline-primary"
44
      for="btnradio3"
45
      data-bs-toggle="pill"
46
      href="#pills-contact"
47
      >Radio 3</label
48
    >
49
  </div>
50
</div>

选项卡

id 的值要和 button 的 href 对应

1
<div class="tab-content" id="pills-tabContent">
2
  <div
3
    class="tab-pane fade show active"
4
    id="pills-home"
5
    role="tabpanel"
6
    aria-labelledby="pills-home-tab"
7
  >
8
    A
9
  </div>
10
  <div
11
    class="tab-pane fade"
12
    id="pills-profile"
13
    role="tabpanel"
14
    aria-labelledby="pills-profile-tab"
15
  >
16
    B
17
  </div>
18
  <div
19
    class="tab-pane fade"
20
    id="pills-contact"
21
    role="tabpanel"
22
    aria-labelledby="pills-contact-tab"
23
  >
24
    C
25
  </div>
26
</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
7
      type="radio"
8
      class="btn-check"
9
      name="btnradio"
10
      id="btnradio1"
11
      autocomplete="off"
12
      checked
13
    />
14
    <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
15

16
    <input
17
      type="radio"
18
      class="btn-check"
19
      name="btnradio"
20
      id="btnradio2"
21
      autocomplete="off"
22
    />
23
    <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
24

25
    <input
26
      type="radio"
27
      class="btn-check"
28
      name="btnradio"
29
      id="btnradio3"
30
      autocomplete="off"
31
    />
32
    <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
33
  </div>
34
</div>