BS4(3)-首頁

範例結果

四、【Tabs】頁籤加入

【Documentaion(文件)】>【Components(元件)】>【Navs(導覽)】(連結處)

S1:準備工作:在作品集之前加入Tabs,進行內容分頁

Awesome CDN link 加入

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

HTML自BS4官網貼入後,調整之

  <section>
    <!-- Tabs nav 頁籤項目 -->
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="thumbnail-tab" data-toggle="tab" href="#thumbnail" role="tab">
          <span>學習相簿</span>
          <span>
            <i class="fa fa-home"></i>
          </span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="theme-tab" data-toggle="tab" href="#theme" role="tab">
          <span>課程主題</span>
          <span>
            <i class="fa fa-book"></i>
          </span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="design-tab" data-toggle="tab" href="#design" role="tab">
          <span>設計學院</span>
          <span>
            <i class="fa fa-bar-chart"></i>
          </span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="news-tab" data-toggle="tab" href="#news" role="tab">
          <span>最新消息</span>
          <span>
            <i class="fa fa-newspaper-o"></i>
          </span>
        </a>
      </li>
    </ul>
    <!-- Tabs Panes 內文區 -->
    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade show active" id="thumbnail" role="tabpanel">學習相簿內文</div>
      <div class="tab-pane fade" id="theme" role="tabpanel">課程主題內文</div>
      <div class="tab-pane fade" id="design" role="tabpanel">設計學院內文</div>
      <div class="tab-pane fade" id="news" role="tabpanel">最新消息內文</div>
    </div>
  </section>

S2:頁籤美化調整

/* Tabs 頁籤調整 */
  @media( max-width:720px ){
    /* 小於720px以下時的tab部份 */
    .nav-tabs>li>a { padding:5px; }
    .nav-tabs>li>a>span:nth-child(2) { display:block; color: #16016d; font-size: 20px; }
    .nav-tabs>li>a>span:nth-child(1) { display:none; }
  }