Bootstrap筆記-02

1. bootstrap的載入scss檔案的細節
   如果你的all.css檔案本身就已經有引入了，bootstrap的scss的檔案時，
   記得不要再你的檔案裏面又再引入一次bootstrap的scss檔案囉~

2. 載入bootstrap的js檔案
   當你像要利用bootstrap中，某些互動性的效果，就得載入它們家的js程式碼。
   bootstrap的js檔案，要放在</body>前面。

3. 在bootstrap的按鈕樣式裡面
   寫法如下
   ex:

   <div class="btn btn-primary">按鈕</div>

   你可以看到以上是按鈕的bootstrap寫法，
   第一個.btn的className，是用來為按鈕樣式打底的
   第二個.btn-primary的className是擴充樣式，可能是來為這個按鈕新增顏色，或者，修改該按鈕大小之類
   的功能。
   bootstrap是用這樣模組化的方式，來讓他們的框架的code比較簡潔，不會出現大量重複的code內容。

4. 在bootstrap中的.row，原本就有display:flex的屬性了，
   所以，你不需要在.row中新增d-flex的className了。

5. bootstrap的javascript用法
   首先，一定要先載入他們自己的bootstrap的js檔案。
   第二，在bootstrap的元件文件檔中，有個互動視窗的單元，
   裡面你任選一個你想要的互動效果，再將裡面的範例程式碼貼到你的專案裡面。
   第三，我們以bootstrap的官網文件中的Components中的Modal中的Live demo為範例
   以下是它的原始碼
   ex:

   <!-- Button trigger modal -->
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
     Launch demo modal
   </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">Modal title</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">Close</button>
           <button type="button" class="btn btn-primary">Save changes</button>
         </div>
       </div>
     </div>
   </div>

   你可以看到以上範例中，BUTTON元件的程式碼中有一個data-bs-target後面跟著一個id，
   那這個id的名稱，跟Modal中的div元素的id一樣。
   就代表，當該按鈕被按下時，這個對應的id的內容會被啟動，也就是會呈現在畫面中。

6. 你想要在codepen上面使用Bootstrap的互動效果的話，要記得引入他們的所有js檔案，
   例:

   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

   以上，是bootstrap提供的所有的js檔案，那你要在codepen中引用這三支js檔案的話，
   你就將該三個選項中的src中的網址，貼到你的codepen中，引入JS的網址欄位中，即可使用了。