Bootstrap# 1– 基礎內容之一
Bootstrap 是個前端開發者 CSS 樣式的框架，在裡面有無限個元件並可以透過簡單的操作就做出一個實體網頁，那我們就來看看如何操作吧！
重置 (Reboot)
在 Bootstrap 中使用 重置樣式為 Normalize，此方式有許多品牌公司網頁都使用如 Twitter, TweetDeck, GitHub, Soundcloud, Guardian, Medium, GOV.UK, Bootstrap, HTML5 Boilerplate 等等。
文字排版 (Typography)
第一個先來說明 文字排版方式，在這當中最重要的就是標籤，在 Bootstrap 的標籤有 <h1> ~ <h6> 與 文字段落 <p> 這兩種為基本的元素，其它們也有語意(這部份之後會在 SEO 章節中說明)，以下範例來呈現 如下 :
//**HTML**
<h1>我是 h1</h1>
<p>我是 p</p>
<div class="h1">我是 div</div>
在這裡會發現 標籤 <h1> 與 使用.h1 選擇器的 <div> 元素樣式一樣， 沒錯它們在使用上是相同的，差異在 標籤 <h1>有語意反之 <div>沒有。如果想要在更有特色或突出的標籤，可以使用 display heading 的設定此樣式有四種 .display-1~.display-4 如下 :
<div class="display-1">我是 div</div>
也可以加入 .lead 樣式讓段落更突出。
<p>我是 p 元素</p>
<p class="lead">我是 p 元素並且使用 .lead 樣式</p>
在排版上如果有引用他人的文章時，就可以使用 .blockquote 與 .blockquote-footer 方式注記。
<blockquote class="blockquote m-3">
<p>會李福臺期下關白過展嗎是不邊道經是也。品表竟人朋單笑一動排寶過言技集不長傷每公一發。夜好是操式教開我這路流不集是府男我王的遠值導們境立利百位。</p>
<footer class="blockquote-footer text-right">著態消行水的如國師但動蘭 </footer>
</blockquote>
並且可以透過文字對齊類選擇器的方式來完成。
<p class="text-left">我是左邊對齊</p>
<p class="text-center">我是中間對齊</p>
<p class="text-right">我是右邊對齊</p>
我們常常在頁面上看到一則新聞以下有很多列表，現在就來學習它的使用方式。
//**HTML**
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
如果想要將列表中的樣式除移就可以使用.list-unstyled 方式移除。
<ul class="list-unstyled"> ... </ul>
如上圖，此.list-unstyled 樣式套用於外層 <ul> 中並不會影響 內層 <ul> 的樣式。
在這裡如果想將列表改成 內聯元素(inline) 並移除樣式時，可以使用 .list-inline 和 .list-inline-item 來呈現。
<ul class="list-inline">
<li class="list-inline-item border">Lorem ipsum dolor sit amet</li>
<li class="list-inline-item border">Consectetur adipiscing elit</li>
<li class="list-inline-item border">Integer molestie lorem at massa</li>
</ul>
我有使用 border 樣式更好來判別 已經呈現出 內聯元素(inline)的樣式。
在 Bootstrap 中有個響應式排版功能也是 Bootstrap 的核心之一，我們先來簡單的說明。
此功能透過父層 .container 容器包住子元素，並在子元素中設定 .row 行與 .col 欄 兩者樣式，就可以依照開發者的設計圖加以設計。
<div class="container mt-2">
<div class="row text-center">
<div class="col-sm-4 bg-primary">1</div>
<div class="col-sm-4 bg-success">2</div>
<div class="col-sm-4 bg-info">3</div>
</div>
</div>
…
參考： bootstrap以上是我對 Bootstrap# 1– 基礎內容之一 的學習筆記 😉。
***如果有任何想法，也歡迎留言與我分享~
***也謝謝你(妳)的閱讀，覺得有幫助的話別忘了順手拍個手喔！***
