bootstrap四

弹出框组件

  <div class="container">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
      删除内容
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">确认提示</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            删除后不可恢复！
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">继续删除</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  当将背景设置为静态时，弹框不会因为点击背景而关闭。将`data-bs-backdrop="static" data-bs-keyboard="false"` 加入`<div class="modal fade">`就可以。
 
 加modal-dialog-scrollable 让弹窗可以滚动
 
 modal-dialog-centered 垂直居中

提示组件

<div class="container">
      <br><br><br><br>
      <button type="button" 
          class="btn btn-lg btn-danger example-popover" 
          data-bs-toggle="popover" 
          title="提示标题" 
          data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
          点此按钮弹出提示
      </button>
      
    </div>
     <script src="./public/bootstrap-5.3.3-dist/bootstrap-5.3.3-dist/js/bootstrap.bundle.js" ></script>
     <script>
      var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
          container: 'body'
          })
   </script>
   
   在按钮中加 data-bs-placement=“位置” 可以设置弹出位置
   在vue里面使用有问题
   
   data-bs-trigger="focus"点击任意处关闭 需要在js中加 trigger: 'focus'
   

吐司消息Toasts组件

需要用再搜索 使用不经常

loading组件

 <button class="btn btn-primary" type="button" disabled>
      <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
      Loading...
    </button>