WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

3-13. Collapse 折疊面板 / Accordion 手風琴效果設計

Collapse 折疊面板： Bootstrap說明網站(中)
　 Accordion 手風琴效果： Bootstrap說明網站(中)

這二個網站 Collapse 與 Accordion 的介紹在同一頁： w3schools(英) 、 RUNOOB(中)

先安排畫面的設計框

HTML部份

<h1>保養有道</h1>
<div class="container-xl">
  <div class="row">

    <div class="col-12 col-md-8">
      <h4 class="mb-md-4">優良的保養方式才能養出水潤光滑的美麗肌膚</h4>

    </div>

  </div>
</div>

CSS部份 (以下參考使用, 不一定要相同的設定)

/* 手機版h1下方距離 */
#sec4 h1 { margin-bottom: 20px; }

/* 手機版才出現的影像(上方) */
#sec4 .row {
  padding-top: 130px;
  background: url(../img/sec4m1.png) no-repeat right top;
  background-size: auto 130px;
  position: relative;
}

/* 手機版才出現的影像(上方小花圖) */
#sec4 .row::before {
  content: '';  background-image: url(../img/sec4m2.png);
  width: 29px; height: 23px;
  position: absolute; right: 88px; top: 130px;
  transform: translateY(-60%);
}

/* 白色區域網格系統區 */
#sec4 .row .col-12 { background-color: #fff; }

/* 桌機版時 ------------------------------------------------- */
@media (min-width: 768px) {
  /* h1下方距離 */
  #sec4 h1 { margin-bottom: 40px; }

  /* 換背景圖 */
  #sec4 .row { 
    padding-top: 0; 
    background: url(../img/sec4bg.png) no-repeat center top, 
                url(../img/sec4bg2.png) repeat-y center top;
    background-size: 100% auto;
    min-height: 680px;
  }
  
  /* 將手機版呈現的小花圖不顯示 */
  #sec4 .row::before { content: none; }
}

複製 Collapse 折疊式面板的基本結構再加以修改

HTML部份

<!-- 折疊式面板 start ---------------------------------------------- -->
<div class="accordion" id="accordionObj">

  <!-- 折疊式面板 - 一組QA項目 -->
  <div class="accordion-item">
    <!-- Q.標題 -->
    <h2 class="accordion-header" id="item-heading1">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#item-collapse1" aria-expanded="false" aria-controls="item-collapse1">
        1、保養順序第一個步驟: 適度的清潔
      </button>
    </h2>
    <!-- A.內容 -->
    <div id="item-collapse1" class="accordion-collapse collapse" aria-labelledby="item-heading1"
        data-bs-parent="#accordionObj">
      <div class="accordion-body">
        <p>
          保養順序的第一個步驟當然就是清潔，但是清潔必須適當，過度的清潔就傷皮膚了，肌膚想要水潤透亮，
          就必須維持油水平衡，保濕是絕對必要的，因此選擇洗面乳時，必須選擇含有保濕因子的產品，幫助維持肌膚需要的水分。
        </p>
        <p>
          如果白天有上妝時，晚上的保養必須先重視卸妝，潔膚水也就是俗稱的卸妝水，除了卸除防曬、彩妝之外，
          還可以幫助清潔毛細孔中的空氣髒污。
        </p>
      </div>
    </div>
  </div>

  <!-- 折疊式面板 - 一組QA項目 -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="item-heading2">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#item-collapse2" aria-expanded="false" aria-controls="item-collapse2">
        2、幫助保養品吸收的前導液: 化妝水
      </button>
    </h2>
    <div id="item-collapse2" class="accordion-collapse collapse" aria-labelledby="item-heading2"
        data-bs-parent="#accordionObj">
      <div class="accordion-body">
        為了避免肌膚太過乾澀，在清潔後常會使用化妝水或面膜濕潤角質，幫助後續保養品的推勻，才能更有效的吸收，
        化妝水可以視為是協助後續保養品吸收的前導液，主要目的為維持臉部角質濕潤，以便讓保養品更好滲透到肌膚底層，
        發揮保養品的效果。
      </div>
    </div>
  </div>

  <!-- 折疊式面板 - 一組QA項目 -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="item-heading3">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#item-collapse3" aria-expanded="false" aria-controls="item-collapse3">
        3、選擇添加各種保養成分的精華液
      </button>
    </h2>
    <div id="item-collapse3" class="accordion-collapse collapse" aria-labelledby="item-heading3"
        data-bs-parent="#accordionObj">
      <div class="accordion-body">
        <p>
          精華液是專門為賦活肌膚而設計的密集保養，其質地輕盈細膩，能迅速滲透肌膚表面，直達肌底，為後續保養品做好準備。
          精華液蘊含多種活性成份，協同發揮極致保養功效，使一般保養程序的效果激增，打造緊實豐盈的肌膚，煥發肌底光澤。 
          臉部精華液應與日常保養品搭配使用，針對肌膚所需進行重點保養。
        </p>
        <p>
          精華液通常被認為是保養步驟中的核心角色，精華液會添加高濃度的精華成分，能夠為肌膚密集補充最需要的養分，
          讓臉部有保濕鎖水的功能，讓肌膚吸收更多的養分，肌膚健康了，膚色自然不會呈現不健康的蠟黃色。
        </p>
      </div>
    </div>
  </div>

  <!-- 折疊式面板 - 一組QA項目 -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="item-heading4">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#item-collapse4" aria-expanded="false" aria-controls="item-collapse4">
        4、鎖住水分的重要關鍵: 乳液/乳霜
      </button>
    </h2>
    <div id="item-collapse4" class="accordion-collapse collapse" aria-labelledby="item-heading4"
        data-bs-parent="#accordionObj">
      <div class="accordion-body">
        <p>
          化妝水的主要成分是由水構成的，原則上塗上後一段時間就會蒸發，通常只是協助後續保養品有更好的推勻。
          最後就需要乳液登場協助鎖水的幫助了。
        </p>
        <p>
          乳液含有適度的油脂，能夠在使用化妝水補充的水分上，像是蓋上一層蓋子，能夠防止水分在被肌膚吸收前蒸發，
          有效保濕。此外乳液能讓皮膚軟化、提升保養效果，養成使用乳液的習慣，讓皮膚能以更好的狀態吸收下一段的保養
          為了使乳液的作用發酵。
        </p>
      </div>
    </div>
  </div>

  <!-- 折疊式面板 - 一組QA項目 -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="item-heading5">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#item-collapse5" aria-expanded="false" aria-controls="item-collapse5">
        5、面膜適合天天敷的迷思解惑
      </button>
    </h2>
    <div id="item-collapse5" class="accordion-collapse collapse" aria-labelledby="item-heading5"
        data-bs-parent="#accordionObj">
      <div class="accordion-body">
        <p>
          面膜有區分清潔、保濕、美白、抗老、加強...等等效能的，原則上如果妳的肌膚沒有敏感上的問題，
          基本上屬於一般性温和性保濕的面膜天天敷、常常敷是可以的，但是如果是敏感性肌膚，或是加強性面膜就不適合，
          建議一週一次左右即可，畢竟過度保養容易使毛囊堵塞,引發粉刺與痘痘。
        </p>
      </div>
    </div>
  </div>

  <!-- 折疊式面板 - 一組QA項目 -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="item-heading6">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#item-collapse6" aria-expanded="false" aria-controls="item-collapse6">
        6、常常去角質能讓肌膚光滑無瑕？
      </button>
    </h2>
    <div id="item-collapse6" class="accordion-collapse collapse" aria-labelledby="item-heading6"
        data-bs-parent="#accordionObj">
      <div class="accordion-body">
        角質層若囤積、沒有代謝，會使肌膚變得暗沉粗糙而顯老，許多人因為年齡增長，新陳代謝變慢了，就卯起來去角質，
        但其實角質層具有隔絕外界髒污、細菌入侵身體肌膚的作用。過度去角質會讓肌膚完全暴露在危險環境中，
        肌膚反而容易泛紅、發癢。因此，去角質還是一個月一次就好。
      </div>
    </div>
  </div>

</div>
<!-- 折疊式面板 end ------------------------------------------------ -->

CSS部份 (以下參考使用, 不一定要相同的設定)

/* 折疊式面板 - 四周留白 ---------------------------- */
.accordion { padding: 0.5rem; }

/* 折疊式面板 - 一組QA項目 */
.accordion-item { border: none; }

/* 折疊式面板 - 目錄標題h2內的按鈕區 */
.accordion-button { padding: 1rem 0 1.25rem 0; }

/* 折疊式面板 - 目錄標題h2內的按鈕區 - 沒有收合時 */
.accordion-button:not(.collapsed) {
  color: var(--c-word1);
  font-size: 1.05rem;  
  font-weight: bold;
  background-color: transparent;  
  box-shadow: none;
}

/* 折疊式面板 - 目錄標題h2內的按鈕區 - 點選後焦點停佇時 */
.accordion-button:focus {
  border-color: transparent;  
  box-shadow: none;
}

/* 折疊式面板 - 內容區域 */
.accordion-body {
  padding: .5rem 0rem 1.5rem 1.5rem;
  border-top: 1px dotted #999;
  text-align: justify;
}

/* 桌機版時 ------------------------------------------------- */
@media (min-width: 768px) {

  /* 折疊式面板 - 四周留白 */
  .accordion { padding: 1rem 1.5rem; }
  /* 折疊式面板 - 內容區域 - 四周留白 */
  .accordion-body { padding: .5rem 2.5rem 3rem 2rem; }
}

 

 

go TOP