Landy Blog
0%

bootstrap_製作購物車網頁

發表於 更新於 分類於

購物車按鈕

這邊購物車的按鈕，你只要看上面範例的navbar的購物車按鈕部分就好。

  1. 首先，我們在navbar裡面塞了一個購物車的按鈕，
    這個按鈕有套用dropdown的功能，我們就可以利用點選它跳出相對應的產品內容。

  2. 在購物車上方的數字，適用bootstrap中的badges元件所製作出來的。
    接著，我們需要將這個badge的位置樣式改成postion:absolute。
    並在他的外層加上position:relative。
    並在badge裡面設定相對的top和right來讓他在cart相對應的位置上。

  3. 購務車的dropdown的內容
    我們可以在dropdown-menu的內容中加入表格、按鈕或相關的內容

  1. 購物車點選出來的dropdown-menu內容超出頁面
    在bootstrap中有提到，當dropdown-menu的功能在navbar中使用的時候，
    官網的提示:
    Heads up!
    Dropdowns are positioned thanks to Popper (except when they are contained in a navbar).

它就不會自動去計算dropdown-menu的區塊大小是否有超出頁面囉。
首先，先為你的.dropdown-menu加入.dropdown-menu-end
接著，我們要自己寫css樣式來為.dropdown-menu-end調整
寫下以下的內容:
ex:

1
2
3
4
.dropdown-menu-end{
  right:0;
  left: auto;
}

此時，當我們點擊購物車按鈕，這個dropdown-menu就不會超出頁面囉。

jumbotron

當我們有大版面要用的話，就可以套入jumbotron元件囉。
那這邊就為這個jumbotron加入一張大圖，並利用
background-size:cover; 和 background-position: center center;
來讓這張圖辨變清楚，並且置中。
ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---HTML---
<div class="jumbotron jumbotron-fluid jumbotron_bg">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>

---CSS---
.jumbotron_bg{
 background-image: url("https://upload.cc/i1/2021/01/14/PMgNkr.jpg");
  background-size:cover;
  background-position: center center;
}

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

我們可以利用格線系統，並在格線系統內加入card元件，
如此一來就可以在當某一行的card元素超過格線系統的佈局時，就換行，達成好看的排版。

card-body有自動延展的效果

我們在這邊會使用card元件是因為card-body會隨著內容的增加而延展他自己的高度，並不會去擠壓到在同一元件內，像是card-header和card-footer的高度，相當方便。
如果，你希望同一區域的card的高度都一樣的話，為card元件加上h-100這個className，這樣就可以讓各個card都對齊，儘管他們的內容多寡不同。

你可以看到右邊欄位的card的高度都一樣，儘管他們的card-body內容不一樣。
另外，就算上方的圖片大小不一樣，也一樣不會影響排版喔。

加上衣服尺寸的樣式使用btn-group

我們可以在上面的範例中的card-footer取代掉原本的按鈕，加入btn-group，來創出一個有sm, m, l大小的按鈕，
ex:

1
2
3
4
5
<div class="btn-group btn-group-sm">
      <a href="#" class="btn btn-outline-primary" aria-current="page">sm </a>
      <a href="#" class="btn btn-outline-primary disabled" >m</a>
      <a href="#" class="btn btn-outline-primary">L</a>
</div>

而其中，我們有為其中的m的class加上disabled，這可以讓該按鈕的樣式無法被點選，用來表示它賣完囉~

為card加上box-shadow的效果

ex:

1
2
3
4
5
6
7
8
---CSS---
.box-shadow{
	box-shadow:0 3px 5px rgba(0, 0, 0, 0.4);
	transition:box-shadow .3s;
}
.box-shadow:hover{
	box-shadow:0 3px 5px rgba(0, 0, 0, 0.24);
}

你為card加上這個box-show的class就有滑過去有陰影變換的效果囉。

利用list-group來變換頁面

ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

這段比較單純，你叫按照bootstrap的官網提供的內容貼到你的專案中，並更改相對應的id和href值，如此應可達成變換頁面的效果了。

btn-group用label和input所構成的樣式

ex:

1
2
3
4
5
6
7
8
9
10
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off" disabled>
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

上面這個範例，是用label和input所構成的btn-group。
其中有一個input被我們加入了disabled，表示該選項不能被選擇。

有disabled屬性的input造成radio為空值的問題

但是，當使用者點到這個被disabled的選項的時候，這個radio會呈現空值的狀態，
所以，要避免這種狀況的話，我們要對他的css樣式，加入以下的內容。
記得，這是在用input和label構成的input-group才會有的問題喔。
ex:

1
2
3
4
---CSS---
.btn .disabled{
	pointer-events: none;
}

接下來，你就為那個有disabled屬性的input欄位的className加入disabled，也就是你剛剛自己寫的部分，
如此，就可以避免點擊到disabled的input選項時，造成該radio為空值的問題囉。

使用 Alert 元件製作多步驟提示

以上這個範例我們是利用.form-row來做這個格線系統，並搭配alert元件來完成這個購買流程的效果。

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

在手機板的時候，防止客戶的選購產品太多會占頁面，故我們會用一個收合的效果，當他要開就打開，不要看就收起來，進而提升使用者體驗。

以上的範例，就是用card元件的版，套進collapse的效果，當你按下card-header中的按鈕時，就會顯示出你的商品，若不要看就收闔起來。