Navbar 加入購物車,點選顯示商品資訊 範例

CH11 106

Bootstrap-購物網站navbar

  • 購物車 icon 使用 dropdown 與 button ,旁邊的數量顯示使用 badge
    • 把 dropdown 背景色拿掉 : 自訂 .btn-cart 的 Class 並於設定背景為透明 .btn-cart{ background-color: transparent; }
    • 旁邊的箭頭拿掉 : 刪除 .dropdown-toggle
    • badge 顯示於 icon 上 : 因為 button 和 badge 都各自佔有空間就會被撐開。badge 以 .btn-cart 為定位就可消除空間疊在 icon 上,使用上、下、左、右 方位來調整適合的位置。

Bootstrap-購物網站navbar02

  • 點選購物車 Icon 顯示商品資訊 → Dropdown / Forms
    • 把裡面的 form 替換成 table ,table 部分也可使用 .table-sm 讓版面小一點
    • button 部分可使用 .btn-block 或 w-100 讓它撐滿 100% 空間
    • dropdown-menu 預設顯示在右方,使用 dropleft 靠右
    • dropdown menu 的定位問題,Bootstrap 的 dropdown menu 一般都會自動計算位置避開會擋住的地方 ,除了在 Navbar ,所以這邊位於 Navbar 我們可以使用 Menu alignment.dropdown-menu-right

▼ ▼ 練習,因 icon 於 navbar右方, dropdown menu 跑到右方會被遮住,所以自行使用 .dropleft.dropdown 上,後來老師使用了 .dropdown-menu-right 的方式,這邊以圖示劃分一下不同處。

Bootstrap-購物網站dropdown-menu差異

Jumbotron 大區塊排版 範例

CH11 107

  • 要加入背景圖,可於 .jumbotron 加入自己客製的 .jumbotron-bg
.jumbotron-bg{
    background:url('') no-repeat;
    background-position: center center;
    background-size: cover;
    min-height: 400px;
}
  • 圖片內的內容文字可加入背景色,閱讀性較高
    • 如果文字區塊與文字想要垂直置中,可使用 flex 排版
<style>
.jumbotron-bg{
    background:url('') no-repeat;
    background-position: center center;
    background-size: cover;
    min-height: 400px;
}
.bg-lighter{
    background-color: rgba(255, 255, 255 , .8);;
}
</style>

<div class="jumbotron jumbotron-fluid jumbotron-bg d-flex align-items-center ">
    <div class="container text-center">
        <div class="bg-lighter p-3">
            <h1 class="display-4">買到剁手手!最後出清</h1>
            <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.
            </p>
        </div>
    </div>
</div>

卡片式排版與 Grid System 整齊排版手法

CH11 108

  • 去掉 border 的用法可看 Utilities / Borders
  • .card 加上 h-100 ,每個卡片內容多寡皆可等高。
  • 陰影 : box-shandow{ 水平值 垂直值 擴散值 rgba( ) }; ,另外也可加入其他特效
    • hover 效果 .box-shandow:hover{}
    • 漸變效果 transition : box-shandow 持續時間 ;
.box-shandow{
    box-shandow:0 3px 5px rgba(0 , 0 ,0 , .16);
    transition: box-shandow .3s;  /*滑鼠滑入 shandow 持續0.3s*/
}
.box-shandow:hover{
    box-shandow: 0 4px 10px rgba(0,0,0,.24);
}

使用 List group 切換產品類別 範例

CH11 109

  • 產品類別固定於左方,右方商品往下滑依舊固定於左方。
    • 往下滑動依舊固定於左方可於 .list-group 使用 Utilities / Position : sticky top

產品購買區製作

CH11 110

  • 價錢排版可使用 Flex 排版的 .align-items-end ,並把售價靠左 .ml-auto 。這樣排版的好處是,當沒有特價時,售價會自置右方,有特價就會自行跑到左方。

Bootstrap -網站購物價錢排版

解決按鈕 disabled 點擊問題

  • Button 可以使用 Checkbox 和 Radio 的形式 ( Button / Checkbox and radio ) ,在其一按鈕加入 .disabled 會無法選取,但滑鼠還是可滑入。

    解決方法 :

    • 範例 : 試試把 css 拿掉,點擊 .disabled 按鈕部分
    • 自行設定一個 CSS 滑鼠就不會點擊到設定 .disabled 的部分
    • 另外 : 沒有使用 button Group 而使用 Button Radio 是因為,Button Radio 點選按鈕後再點選旁邊空間,選取的按鈕不會消失。

Bootstrap -pointer-購物網站events使用

.btn.disabled{
    pointer-events:none;
}
  • 下拉式選單和按鈕可使用 .input-group 再加入 margin 推出距離。

Bootstrap -pointer-購物網站 input group使用

  • 最後可於左方選購區塊加入 sticky top ,讓用戶在觀看右方商品資訊往下滑動時,隨時可購買。
    • 不要加在 column 上,建議在加一個 <div> 包覆
    • 小技巧 : 如果右方商品往下滑動,覺得左方 sticky top 的區塊太貼近上方,可於 .sticky-top 加入 <style="top:30px ;">
  • 圖片
    • 自適應 .img-fluid , 置中 .d-block .mx-auto ( Images )

『註』背景透明,可使用 .bg-tranparent ,此方式 Bootstrap 並未提到,隱藏版用法 XD。

使用 Alert 元件置做多步驟提示

CH11 111

  • alert 使用 Grid system 做出一列三塊,如果想要間距小一點,可使用 .form-row ( 如下圖所示 )

Bootstrap -pointer-購物網站_使用row與form-row差異

  • 斷點設定 範例
    • 避免小視窗內容文字呈現換行狀態,可使用 .col-12 .col-sm ( 小裝置下想要呈現多列,大裝置一列三欄 )
    • column 斷點 sm 以上沒有加數字,方便 alert 在增加多個時會自己做等距分配。

Bootstrap -pointer-購物網站_避免alert呈現換行

收合購物車列表及表單排版技巧

CH11 112

  • 使用折疊式口風琴效果 Collapse
  • 讓折疊內容空間變大,行動裝置版會較好閱讀 範例
    • .collapse.card 內層移出,刪除 .collapse 內的 .card-body,就會從下圖中 B 變 A
  • 商品結帳區使用 範例
    • alert 與 collapse

Bootstrap-購物網站_把.collapse 從.card 內層拿出空間變大

Form 一排兩欄間的距離排版技巧

  • 使用一般的 row , column 在 Form 內會顯得 input 間的 gutter 過於大,所以可使用 Form row ,讓 input 間的 gutter 小一點。

Bootstrap-Form 一排兩欄間的距離排版技巧

  • Form 中有些欄位不一定會需要,這時候可以不去寫 column 後方的數值,當 column 增加或減少時,它會自動把欄位剩下的空間補齊。這樣表單設計上的彈性也會比較大。

資料來源

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

作者