實作後台版型 Dashboard 作業 範例

『註』圖表不在這次範圍中,所以老師提供的範例已寫好圖表 JavaScript 只要填上 Class 圖表就會顯現。

使用 Flex 伸展特性安排組件 -四欄式排版 範例

CH10 97

| 此方式無兩欄式排列時,無垂直置中 |
右方文字區域離邊框還有距離沒有滿版 ( 下方左圖 ) ,可使用 w-100 ( 下方右圖 )

  • 右方 width=100% ( Utilities / Sizing ) 是已經扣除 Fontawesome Icon ( 橘色範圍 ) 的尺寸大小。
  • 文字區塊的 h5、h3 Class 在 Bootstrap 中只是套用樣式,無語意。

Bootstrap-後台版型四欄區塊示意

  • 內容不同導致 card 不等高時,可於 .card 加入 h-100
  • 會員增加的數字右更大時,可使用 MARKDOWN_HASH5fd57bf0b35b795850dfd35b52607791MARKDOWNHASH ( content / typography display headings )

Bootstrap-後台版型四欄區塊_不等高

  • 斷點 lg 以上呈現一列四欄,以下則呈現一列兩欄
<div class="row">
    <div class="col-lg-3 col-6"></div>
    <div class="col-lg-3 col-6"></div>
    <div class="col-lg-3 col-6"></div>
    <div class="col-lg-3 col-6"></div>
</div>
  • 在斷點 sm 以上顯示 icon,sm 以下隱藏 icon 。
    • .d-nond 本來隱藏, .d-sm-block 於斷點 sm 以上顯示 icon 。Bootstrap 是由小裝置寫到大裝置
<i class="fas fa-journal-whills fa-3x text-secondary mr-2 d-none d-sm-block"></i>
  • Dashboard 的空間很有限,所以通常字會設定較小,這邊可以自己客製 CSS

    • 改 font-size 整體網頁的文字就會更著調整。
html{
    font-size:14px;
}
  • 垂直置中問題 | 版面縮小至兩欄式排版時,上下的 icon 與文字並無垂直置中對齊。解決方式如下 ↓

Bootstrap-後台版型四欄區塊無垂直置中

使用 Flex 伸展特性安排組件 -四欄式排版垂直置中 範例

| 此方式無兩欄式排列時,有垂直置中 |

Bootstrap-後台版型四欄區塊垂直置中

  • 問答出處
  • .card-body 設置 .d-flex.justify-content-around.align-items-center 。把文字區的 w-100拿掉。
    • 上個範例中使用 .d-flex.align-items-center 並於文字區用 w-100 推出與 icon的距離。
  • 另外課程問答區中,有同學使用使用 style 加入 icon 寬度,但無效。由此推測出 w-100 會影響 icon 設定的寬度。

為後台加上圖表版型 範例

CH10 98

Chart.js 官方網站

選擇圖表 Chart 要注意的要點 :

  • 有沒有符合需求的圖表類型
  • 資料結構是否易懂或意於變化
  • 有沒有要支援 Responsive
  • 授權

步驟

  • 下方 <script> 中有 .chart-item#barCanvas ( line 8824 , line 8836 ) 兩個標籤。 這兩個標籤在使用須使用 canvas 這個標籤,因此兩個皆屬於 Canvas 的繪圖。注意,一個是 Class,一個是 ID

Bootstrap-後台加圖表版型01

<canvas class="chart-item"></canvas>
<canvas id="barCanvas"></canvas>

表格結構注意細節 範例

CH10 99

表單 Form

  • class="sr-only" 只有使用螢幕閱讀器的人看的到,一般人看到的為隱藏狀態。
  • 不要表單 width:100% ,可使用 inline forms 會依提供的內容呈現寬度
  • 做 Dashboard 會把按鈕或 inpt 調整的小一點,因為 Dashboard 資料量很大,所以會盡量騰出一些空間
    • 按鈕調整小一點 : .btn-sm ,input 調整小一點 : .form-control-sm

表格 Table

  • 欄寬定位方式 : ❶ 彈性百分比 ❷ 固定寬度 ,建議使用固定寬度,把固定性較高的先設定好 (例如 : 金額 、數量、日期 ) ,較不固定的例如品項、email 長度。
  • 把固定性較高的寬度設定好後,其餘的部分它會自行去分配剩餘的寬度,所以不要把所有 <th> 內的寬度都寫完,否則就沒有可發展的彈性空間。 所有寬度建議往上寫,寫在最上方的 <th> 修改時下方的會一起套用。
<table class="table">
    <thead>
        <tr>
            <th width="50" scope="col">日期</th>
            <th width="80" scope="col">訂單數</th>
            <th scope="col">出貨數</th>
            <th scope="col">總金額</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">9/1</th>
            <td>300</td>
            <td>1</td>
            <td>600</td>
        </tr>
        <tr>
            <th scope="row">9/2</th>
            <td>300</td>
            <td>2</td>
            <td>1,400</td>
        </tr>               
    </tbody>    
</table>
  • 表格內容太多時會有響應式問題,畫面太小內容會跑出去。Bootstrap Tables / Responsive tables 可解決此問題,在小裝置下,會出現 X 捲軸方便滑動。記得加在 <table class="table"> 外層。

為後台加上控制 & 為表格加上回饋式訊息 範例

CH10 100 101

  • 左方使用 input-group & 滑鼠滑入會出現提示 ( 使用 Tooltips ,注意: 須加入 function 啟用 )

Bootstrap-為後台加上控制_input group

$(document).ready(function () {
    $('[data-toggle="tooltip"]').tooltip();
});

把 Tooltips 中的文字變斜體

  • 加入 data-html="true"; 表示允許將 html 的格式輸出
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" data-html="true" title="<em>按下Enter快速搜尋</em>">
  Tooltip on top
</button>

為表格加上回饋式訊息

  • 做表格列表要注意,是否需要很強的互動性,像上方的月營運狀態表格,就屬於比較簡單的表格。
  • 顏色
    • 互動性強的表格可加上 .table-hover 讓滑鼠滑入列表上會顯示不同背景色 。路徑 : Tables / Hoverable rows
    • 商品列表中需要被注意,例如 : 缺貨、未出貨 ,就可加入特定色彩,不建議加入太多色彩會失去重點。 路徑: Tables / Contextual classes
  • 操作排版
    • Dashboard 訊息量很龐大,表格內的按鈕建議使用 Button group 來做,可省去掉按鈕與按鈕間的空間。
    • 按鈕資訊太多,可使用下拉式選單 Drowpdown
    • 最後記得幫表單 Table 加入 Responsive .table-responsive

Bootstrap-操作按鈕

Bootstrap-為表格加上回饋式訊息

進階 Modal 使用,動態傳入參數 範例

CH10 102

Bootstrap-進階 Modal 使用,動態傳入參數

  • 避免點擊到 modal 叉叉和 Close 按鈕以外的背景位置 ( 上圖淺灰色區塊 ), modal 視窗被關掉,可於 button 位置使用 data-backdrop="static"
  • 後台訂單中品項中有很多個編輯、查看等按鈕,可在點擊按鈕時,寫 jQ 把參數傳進 modal 內,編輯寫一起,查看寫一起,這樣就不需要寫很多個 modal。

步驟

  1. 把 modal 架構加入,修改裡面的 ID,並把 button 的 ID 設同名稱,modal-header 顯示的名稱就會對應 。 可到 Vertically centered 了解如何加入 jQuery 設定參數。
  2. $('#exampleModal').on('show.bs.modal', function (event) {}); → 當 #editModal 觸發 ( show.bs.modal ) 時,執行以下的程式碼 ( 括號內的程式碼 )
  3. var button = $(event.relatedTarget) → 按鈕去觸發這個 modal
    • 可寫入 console.log('btn') 並於檢視程式碼中查看此 var button 只的是哪個按鈕
  4. var title = button.data('title') → 取出按鈕的值,所以宣告一個 title
    • 把 data-title 寫入按鈕上 → <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#editModal" data-title="快速下單"> 快速下單 </button>
    • data-title 為 HTML 5 的屬性,可於 data- 後方加入自定義的名稱,所以於 var title = button.data('title') 引號內加入相同的自定義名稱。
    • 可寫入 console.log ('title' , title ) 看看目前的 title 是甚麼, 前面 'title' 是字串,後面 title 是取出的變數。
  5. var modal = $(this) → 宣告 modal 就是它自己
  6. modal.find('.modal-title').text(title) → 在 modal 內找到自己的 title
    • modal.find('.modal-title').text('New message to ' + recipient) 括號中 ” 引號內的為固定 title ,後方沒引號的名稱需與步驟 4 宣告的名稱一樣,否則會顯示錯誤。
  7. modal.find('可寫入ID 或 Class ').val(recipient) → 範例中編輯modal 內的品項 input 可顯示對應的品項名稱。
    • 品項 input 設定和 jQ 對應的 ID ( #edititems )
    • modal.find('#edititems ').val(title) → 找到 #edititems 後會顯示 var title = button.data('title') 對應的 title ( 品項名 )
  8. 前方已設定好 jQ 後,下方的品項編輯可直接套用。此段加入要使用的 button 內即可 → data-toggle="modal" data-target="#editModal" data-title="自定義要顯示於 modal-header 的名稱"

順序 : #exampleModal 被觸發時 → 須找到哪個按鈕去觸發它的 → 把按鈕的 data 屬性取出 → 宣告 modal 就是它自己 → 取出後寫到 modal-title 這個地方。

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)  
});

製作刪除步驟

  • 可直接複製上方編輯的 jQ 與 modal 架構,並修改 ID 即可。
    • button 加入 data-toggle="modal" data-target="#需與 jQ 的 ID 相同" data-title="自訂要顯示於 modal-header 的名稱"
<a class="dropdown-item text-danger" href="#" data-toggle="modal" data-target="#removeModal" data-title="超纖細肥皂 1盒">刪除訂單</a>

<!--Modal remove刪除-->
<div class="modal fade" id="removeModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header bg-danger text-white">
            <h5 class="modal-title" id="ExampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
        </div>
        <div class="modal-body">
            ...
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-danger">Save changes</button>
        </div>
    </div>
</div>
</div>

<script>
    $(function () {
        //編輯的Modal 事件
        $('#editModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var title = button.data('title');

            var modal = $(this);
            modal.find('.modal-title').text(title);
        });
        //刪除的Modal 事件
        $('#removeModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var title = button.data('title');

            var modal = $(this);
            modal.find('.modal-title').text('刪除'+title);
        });
    })
</script>

footer 因頁面不夠長,而無法置底怎麼辦?

CH10 103

  • footer 因為頁面不夠長,所以沒有置底,這時可於最上層 .container-fluid 加入 .main 並做設定 ,讓 .mian 最小高度不會低於 calc ( ) 裡面的數值。
  • 100vh → 裡面內容最小不能低於 100vh 的裝置高,這邊要扣掉上面的 navbar 和下面的 footer 高度。
  • calc(100vh – (49px+49px+42px+14px)) → navbar+footer+footer 提供的 margin top +footer 本身文字大小。
  • 架構
    • navbar
    • .container-fluid.main
    • footer

footer margin

.main{
    min-height:calc(100vh - (49px+49px+42px+14px))
}

課堂問與答

  1. 有時候表單有 form 包住,有時無 ? 原出處
    • form 標籤通常用於一個表單,而 input 也可以單純當成輸入內容使用,所以不一定有 input 存在就要用 form 包住,可根據不同的使用情境而定。

資料來源

最後修改日期: 12 5 月, 2020

作者