w3school - Notes Learning Bootstrap

Reference from w3schools

筆記是我從w3school邊學邊做筆記的。
廢話不多說，讓我們開始吧！

BS4 Containers

• Container, Container-fluid
  • 不同的地方在於fluid會水平滿版
• m(margin), p(padding）
  • t, b, l, r 分別代表上、下、左、右，不打表示全都要！
  • x代表左右、y代表上下
  • 程度為1~5
  • Example: mt-4, pr-2, m-1, p-3等等，都可以任意組合！
• 顏色
  • text-muted （灰色）
  • text-primary （藍色）
  • text-success （綠色）
  • text-info （藍綠色）
  • text-warning （黃色）
  • text-danger （紅色）
  • text-secondary （灰色）
  • text-white （白色）
  • text-dark （深灰色）
  • text-body （通常為黑色）
  • text-light （亮灰色）
• 以上的text改成bg，就會變背景顏色！也適用於table！還有btn！

BS4 Grid Basic

我自己看下來有一點display: flex的感覺啦，還好有先學一點css😅

• 大小區分
  • col-sm(small), col-md(medium), col-lg(large), col-xl

不過要讓他們乖乖排好的話···

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

這樣就可以了，簡單明瞭吧！

另外，bootstrap把網頁分成12份。
所以你想要左邊三分之一，右邊三分之二的話···

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

就這樣寫！
相信大家國小數學都沒有忘記吧。

BS4 Typography

就是字體的各種樣式！
字體大小有一點無聊，我提一些有趣的好了。

• mark
  • 螢光筆！
• abbr
  • 炫泡底線，哦不md沒有
• dl, dd, dt
  • 很像條列的感覺
  ​​​​    <dl>
  ​​​​        <dt>Coffee</dt>
  ​​​​        <dd>- black hot drink</dd>
  ​​​​        <dt>Milk</dt>
  ​​​​        <dd>- white cold drink</dd>
  ​​​​    </dl>  
  

• code
  • 會讓文字長得很像code？
  • 那個上面的"code"缺了紅色的顏色哦！
• kbd
  • 黑底白字，oops，md沒有

BS4 Tables

一樣提一些有趣的！

• table-hover
  • 滑鼠一上去會變灰色，酷

就···就這樣，其他都還好。

BS4 Jumbotron

這太適合頁面的header了吧吧吧吧吧！

    <div class="jumbotron">
        <h1>Bootstrap Tutorial</h1>
        <p>Bootstrap is the most popular HTML, CSS...</p>
    </div>

大大框框，好爽好爽。
加 jumbotron-fluid 會變成水平滿版，終了！

BS4 Buttons

按鈕來啦！！直接上實際語法！

    <button type="button" class="btn btn-(上面提到的顏色)">The Btn</button>

• btn-(color)
  • 按鈕變顏色
• btn-outline-(color)
  • 按鈕外面的顏色
• btn-lg, btn-sm
  • 按鈕大小，但感覺用不到
• btn-block
  • 水平滿版btn
• disabled
  • 不能點的按鈕
• spinner-border
  • 按鈕可以加這個，超惱人的loading，好好笑

BS4 Button groups

完完全全就是navigation bar啊啊啊啊啊！

<div class="btn-group（橫的） / .btn-group-vertical（直的）">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

還有下拉式選單！（我當初設計這個設計的好痛苦啊）
為甚麼不提早學這個呢😅

<div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>

BS4 Progress Bars

好香啊···

<div class="progress">
  <div class="progress-bar bg-(color)" style="width:70%">70%</div>
</div>

很漂漂！還可以換顏色！

BS4 Pagination

To Be Continued…