# Bootstrap 5 學習筆記
## 互動視窗Modal

* 「data-backdrop="static"」 鎖定背景，點擊背景時不自動關閉視窗
* 「fade」 淡入、淡出的轉場效果
* 「modal-dialog」 視窗大小 通常會搭配modal-lg、modal-md、modal-sm
* 「data-dismiss="modal"」 關閉視窗
* 「data-keyboard="true"」 是否用ESC鍵關閉，預設為true
* 「required」 若無填入資料則不能送出
* 「aurofocus」 網頁一開啟光標鎖定欄位
* 「aria-labelledby」 引用互動視窗標題
* 「tabindex="-1"」 點擊可以聚焦,但用tab不會選取
* 「aria-hidden=true」 對瀏覽器隱藏
* 「btn-close」 XX的按鈕
* 「img-fluid」 響應式圖片,讓圖片可依父元素進行縮放
* 「:true-value="1"」 true為1
* 「:false-value="0"」 false為0

## 製作圖片與文字交疊的版面
這邊介紹兩種方式
1.offset: 主要特性是margin-left，範例中圖片本身是七欄，offset-5是往左邊推了五欄，剛好是格線系統的十二欄，所以左右的空間會一致。

<div class="container">
  <div class="row">
    <div class="col-12 col-md-7">
      <div class="pic">
        <img src="https://picsum.photos/300/200?random=1" class="w-100">
      </div>
    </div>
    <div class="col-12 col-md-7 offset-md-5 double-move">
      <div class="txt bg-danger text-center p-3">
        <h3>標題</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis corrupti harum sapiente quaerat adipisci iure veniam vero ullam nesciunt amet qui neque expedita sequi ad delectus ducimus, voluptatibus soluta dolores minima odio fuga! Similique tempora, enim est amet tempore beatae explicabo ex consectetur accusantium necessitatibus adipisci, consequuntur odio sapiente eos?
        </p>
      </div>
    </div>
  </div>
</div>

2.ms-auto: 由於offset的特性就是margin-left，我們當然也可以直接使用margin-left來做。

<div class="container">
  <div class="row">
    <div class="col-12 col-md-7">
      <div class="pic">
        <img src="https://picsum.photos/300/200?random=1" class="w-100">
      </div>
    </div>
    <div class="col-12 col-md-7 ms-auto double-move">
      <div class="txt bg-danger text-center p-3">
        <h3>標題</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis corrupti harum sapiente quaerat adipisci iure veniam vero ullam nesciunt amet qui neque expedita sequi ad delectus ducimus, voluptatibus soluta dolores minima odio fuga! Similique tempora, enim est amet tempore beatae explicabo ex consectetur accusantium necessitatibus adipisci, consequuntur odio sapiente eos?
        </p>
      </div>
    </div>
  </div>
</div>

手刻css的部分
768px以下交疊

@media screen and (min-width: 768px) {
  .double-move {
    margin-top: -100px;
  }
}

兩者呈現的畫面皆如下: