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
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>
# Web
# CSS
# Flask