###### tags: `Bootstrap` `切版`
# 第一次接觸Bootstrap
Bootstrap是尛，這個是我第一次看到老師在課堂上示範BS的時候的心裡話，尤其是在class = "d-flex"時做出在css上的display-flex時，那個時候覺得有點多此一舉，css能寫為甚麼要繞個圈子呢??

接下來做完第五周的切版直播班作業後，Bootstrap真香!!

以下是初次使用BS後的感想與為什麼要用Class寫css效果的原因(個人想法)

1.以功能性命名取代語意性命名，在寫一個新聞的div時可能會這樣子命名內部的div。

   <div class="new_content">
       <div class="news_title">
           <h1>title</h1>
       </div>
           <div class="news_pictrue">
           img
           </div>
       <div class="new_content">
           <h2>subtitle</h2>
           <p>
           content
           </p>
       </div>   
   </div>

然後再加上css

.new_content{
        dplay:flex
        jucstify-content:space-between;
        .news_pictrue{
                width:100%;
        }
        .new_content{
                    p{
                        padding-left:4rem;
                    }
}

但是在BS中則直接以功能當作class的名稱，
2.而這些功能名稱也不是好玩的，是有實在作用的，下面就是使用BS寫相同HTML結構與部分樣式的範例。

<div class="card f-flex jucstify-content-between">
       <div class="card-header">
           <h1>title</h1>
       </div>
           <div class="img-fluid....">
           img
           </div>
       <div class="fromgroup">
           <h2 class="h2">subtitle</h2>
           <p class=" ps-4">
           content
           </p>
       </div>
   </div>

看到上面寫了HTML沒有寫到SCSS但能與第一個呈現相同的結構，與部分相同樣式。

功能性命名的好處是只要功能對了，出現在哪邊都不奇怪，一樣從上面舉例，相同的HTML結構我可以用在電商網頁的購物車，但購物車出現news的命名不合理，但是使用功能性命名就沒有這個問題了。

至於部分樣式不同的原因是因為BS會些寫好樣式，直接套用，不像從SCSS從白紙從零寫成自己要的樣子。

這個也是BS的缺點，對現在的我來說，因為對BS還不熟悉，還有很多地方不知道要怎麼改，就會想說乾脆自己寫好了，幹嘛用BS改，但也許以後知道怎麼改了還是一樣會說BS真香!!