iT邦幫忙

2021 iThome 鐵人賽
DAY 20
0
Modern Web

初階 Rails 工程師的養成系列 第 20 篇

Day20. 懂Bootstrap，並讓Bootstrap帶你上天堂

13th鐵人賽 html bootstrap css
3864 瀏覽

  • 分享至 

  • xImage
    •  

工程師都有google的習慣，但是 bootstrap 的使用方式不用特別去估狗，基本的用法只要看官網的介紹就可以了。若發現自己看不懂文件，多半都是自己還沒有補足樣式相關的知識，建議相關的常識記得先補齊，也可以參考Day19的文章。

Spacing: margin & padding

Bootstrap 的空間使用方式為距離、方向、量級的排列組合

  • 內距p、外距m

  • 方向：上下左右、x軸、y軸、全方位

  • 量級：0~5, auto

基本概念可以查看Day19，而如何使用可以查看 官方

flex

我們以下列條件為前提做討論：

element.style {
  display: flex;
  flex-direction: row;
}

⭐️ 以flex-direction: row; 的前提下，水平相關的用法

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

⭐️ 以flex-direction: row; 的前提下，垂直相關的用法

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

更多的 flex 用法可以參考官方

container

相信大家一定都知道 container，但大家知道 container 代表什麼意思嗎？我們來看誠品的網站，框起來的內容

https://ithelp.ithome.com.tw/upload/images/20210916/20115854J5xVLHns5u.png

container 指的是網頁的內容要被多少寬包覆，舉例來說當我們使用 <div class="container"><div>

  • 瀏覽器寬度大於等於1400px ➡️ 1320px
  • 瀏覽器寬度大於等於1200px ➡️ 1140px
  • 瀏覽器寬度大於等於992px ➡️ 960px
  • 瀏覽器寬度大於等於768px ➡️ 720px
  • 瀏覽器寬度大於等於576px ➡️ 540px
  • 瀏覽器寬度小於576px ➡️ 滿版。

以下 container 定義不一樣，但由於我們不需要做精細的響應式，會不會使用container對後端工程師來說，差別可能不大。

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

grid

這是bootstrap的網格系統，和Day19提到的 grid 用法差不多。

<div class="container">
  <div class="row">
    <div class="col-6">
      內容
    </div>
    <div class="col-6">
      內容
    </div>
    <div class="col-6">
      內容
    </div>
    <div class="col-6">
      內容
    </div>
  </div>
</div>

想必後端的朋友們，上述的排版方式應該再熟悉這個不過。對大部分後端來說，上述的排法就是前端實力的天花板 ? 。不過讀者們知道 grid 還可以做響應式嗎？只要搭配lg, md，就可以作出響應

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- CSS only -->
    <!-- https://getbootstrap.com/ -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-12 col-lg-6 border">內容</div>
        <div class="col-12 col-lg-6 border">內容</div>
        <div class="col-12 col-lg-8 border">內容</div>
        <div class="col-12 col-lg-4 border">內容</div>
      </div>
    </div>
  </body>
</html>

關於lg, md, xl 等尺寸表可以參考下方官網的表格。

Extra small <576px Small ≥576px Medium ≥768px Large ≥992px Extra large ≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Column ordering Yes

d-none

d-none 為display: none; ，但它絕對不是只有這麼簡單而已。當我們使用了這個屬性，我們可以玩很多響應式的東西，沿用上面的例子，我們來新增更多樣式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- CSS only -->
    <!-- https://getbootstrap.com/ -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-12 col-lg-6 border">
          <div class="d-none d-lg-block">
            <a class="btn btn-primary" href="#" role="button">母訂單列表</a>
            <a class="btn btn-primary" href="#" role="button">母訂單列表</a>
          </div>

          <div class="d-lg-none">
            <a class="btn btn-primary" href="#" role="button">母湯</a>
            <a class="btn btn-primary" href="#" role="button">母湯</a>
          </div>
        </div>
        <div class="col-12 col-lg-6 border">
          <div class="d-none d-lg-block">
            <a class="btn btn btn-outline-secondary" href="#" role="button">母訂單列表</a>
            <a class="btn btn btn-outline-secondary" href="#" role="button">母訂單列表</a>
          </div>

          <div class="d-lg-none">
            <a class="btn btn btn-outline-secondary" href="#" role="button">母湯</a>
            <a class="btn btn btn-outline-secondary" href="#" role="button">母湯</a>
          </div>
        </div>
        <div class="col-12 col-lg-8 border">
          <div class="col-12 col-lg-6 border">
            <div class="d-none d-lg-block">
              <a class="btn btn btn-outline-success" href="#" role="button">母訂單列表</a>
              <a class="btn btn btn-outline-success" href="#" role="button">母訂單列表</a>
            </div>

            <div class="d-lg-none">
              <a class="btn btn btn-outline-success" href="#" role="button">母湯</a>
              <a class="btn btn btn-outline-success" href="#" role="button">母湯</a>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-4 border">
          <div class="d-none d-lg-block">
            <a class="btn btn btn-secondary" href="#" role="button">母訂單列表</a>
            <a class="btn btn btn-secondary" href="#" role="button">母訂單列表</a>
          </div>

          <div class="d-lg-none">
            <a class="btn btn btn-secondary" href="#" role="button">母湯</a>
            <a class="btn btn btn-secondary" href="#" role="button">母湯</a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

我們可以利用d-none 搭配尺寸來去做響應式畫面，很好用 ?

table

bootstrap 對table 的支援相當高，光一個 table 就可以有好幾種變化型，官網就有很多用法可以參考，不過這篇想發想，如何讓table按照自己的比例分配，可以使用網格系統的col 做搭配，理由如下：

  • 由於table排列屬性不為flex，只用看得懂max-width
  • 事實上，如果table再過小尺寸時，讓它順其自然的發展也會比較好。
table
  thead  
    tr   
      th.col-2 商品品號
      th.col-4 商品名稱
      th.col-1 定價
      th.col-1 售價
      th.col-1 顏色
      th.col-1 尺寸
      th.col-1 數量
      th.col-1

.col-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
}

/* 對於table來說 */
.col-2 {
    /* flex: 0 0 16.66667%; */
    max-width: 16.66667%;
}

button

在講d-none的時候已經講過了，此外官網也有專門講 button 的文章。以下為按鈕樣式的各種形式，而官網還特別介紹了顏色、屬性等一些很實用的技巧

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Tab

官網上的範例貼一貼，就有如上基本的頁籤樣式。曾經在前端客製化過頁籤，所以知道要打造好的頁籤不容易，但使用bootstrap就不用擔心樣式的問題

badge

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- CSS only -->
    <!-- https://getbootstrap.com/ -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <button type="button" class="btn btn-primary my-2">
        未出貨訂單 <span class="badge badge-light">4</span>
      </button>
      <button type="button" class="btn btn-primary my-2">
        刷退失敗訂單 <span class="badge badge-light">5</span>
      </button>
      <button type="button" class="btn btn-primary my-2">
        推播 <span class="badge badge-light">8</span>
      </button>
    </div>
  </body>
</html>

https://ithelp.ithome.com.tw/upload/images/20210916/20115854spCMrrLies.png

後台介面，一定碰得到顯示數字的UI畫面，此時就可以使用badge。

另外button 為行內元素，所以不能用區塊的概念控制，意即為使用margin, padding, flex 等等全部都會失效。

Input group

當我們要把多個輸入框併成群組時，可以使用input group，

⭐️ 舉個例子

.form-group
  label.col-md-2.control-label
    | 選擇匯出日期
  .col-md-10.col-lg-9
    .input-daterange.input-group
      input.input-md.form-control type="date" min="#{180.days.ago.to_date}" max="#{Date.today}" name="start_date" required="required" autocomplete="off"
      span.input-group-addon 到
      input.input-md.form-control type="date" max="#{Date.today}" name="end_date" required="required" autocomplete="off"

https://ithelp.ithome.com.tw/upload/images/20210913/20115854Gt0YqQ8tNE.png

⭐️ 再舉一個例子

# 開始時間、結束時間模板
def search_interval(controller: nil, form: nil)
  tag.div class: 'input-group mb-3' do
    datatable_date_tag(controller: controller, target: 'startedAt', value: Date.today - 1.year, form: form) +
      tag.div(class: 'input-group-append') { tag.label '至', class: 'input-group-text' } +
      datatable_date_tag(controller: controller, target: 'endedAt', value: Date.today + 1.day, form: form)
  end
end

⭐️ input_group 有 append, prepend兩個屬性可以調用

<!-- prepend -->
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<!-- append -->
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>

⭐️ 搜尋輸入框，後面append放大鏡

def datatable_search_field(options = {})
  tag.div class: 'input-group mb-2', style: 'max-width: 300px' do
    search_field_tag(options[:name], options[:placeholder], class: 'form-control', data: options[:data]) +
    tag.div(class: 'input-group-append') do 
      tag.i class: 'fas fa-search input-group-text', style: 'padding-top: 10px'
    end  
  end
end

至於如何用helper使用，會在Day22 和大家交代清楚。請大家拭目以待

其他

以下這些主題也很常被提及，讀者們當有機會從頭刻畫後台介面時，不妨可以看看

結語

Day19粗略地提到了樣式的概念；今天粗略地提及了bootstrap的使用方式。

各個公司可能會為了後台的美觀性，會購買市面上的主題，或者使用免費的sb-admin2的主題製作。總之別人寫好的東西我們善加利用，基本的樣式技巧學好，便可以更融會貫通的應用！

覺得只用兩天的篇幅就講完樣式有點太少。日後在IT鐵人賽結束以前，如果有其他要補充的內容會另外修改文章，若讀者有什麼建議的也歡迎留言在下方。

下一篇會開始講Rails 附贈的helper。


上一篇
Day19. 後端工程師需要具備的前端常識
下一篇
Day21. 用 Rails helper 省去更多開發時間
系列文
初階 Rails 工程師的養成 共 34 篇
  1. 30
    Day30. Model 與關聯 - preload, join, includes 一次釐清
  2. 31
    Day31. Rails 搜尋的強大幫手 - Ransack
  3. 32
    Day32. 使用Decorator Pattern 實作攤提
  4. 33
    Day33. 使用RSpec寫測試
  5. 34
    Day34. 結尾語 & 明年的鐵人賽
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙