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>
# web
# css
# flask