BS4(2)-基本版面運用

範例結果

四、Flex應用

S0:預備工作

  <section>
    <div class="col-4">
      <img src="./images/info01.jpg" alt="">
      <h2>網頁設計先修</h2>
      <p>隨著網路深入生活,許多企業也日益注重網路行銷,網頁設計師儼然成為熱門職務。</p>
      <p>設計的工作最注重實力,投入此行業者必須對於網頁的規劃、設計、發佈、維護與更新皆必須有完整的了解,透過不斷累積經驗,強化作品展現的豐富度。</p>
    </div>
    <div class="col-4">
      <img src="./images/info02.jpg" alt="">
      <h2>響應式跨平台網頁設計</h2>
      <p>企業愛用網頁設計人才必備能力</p>
      <p>想成為企業最搶手的網頁人才嗎?加入多媒體網頁視覺設計人才培訓班,學習到網頁的設計、架構、排版到網站上傳,建立豐富而具有互動性的網頁。</p>
    </div>
    <div class="col-4">
      <img src="./images/info03.jpg" alt="">
      <h2>網頁設計先修</h2>
      <p>購物網站設計與經營</p>
      <p>網站的製作,網頁資料庫是不可或缺的一環。學員可了解PHP 的各種應用、MySQL資料庫的基本語法與實例、學習製作資料庫網站架構、會員管理系統、前台及後台管理、網站維護及資料更新,成為全方位網站設計師的必學課程。</p>
    </div>
</section>

S1:基本結構【.container】>【.row】>【.col-*】

  <section>
    <div class="container">
      <div class="row">
        <div class="col-4">
          <img src="./images/info01.jpg" alt="">
          <h2>網頁設計先修</h2>
          <p>隨著網路深入生活,許多企業也日益注重網路行銷,網頁設計師儼然成為熱門職務。</p>
          <p>設計的工作最注重實力,投入此行業者必須對於網頁的規劃、設計、發佈、維護與更新皆必須有完整的了解,透過不斷累積經驗,強化作品展現的豐富度。</p>
        </div>
        ...
        ...
    </div>
  </section>

S2:利用BS4特性加入類別名稱進行美化

  <section class="bg-info">
    <div class="container">
      <div class="row py-5 text-white">
        <div class="col-md-4">
          <img src="./images/info01.jpg" alt="" class="img-thumbnail">
          <h2 class="h3 text-center font-weight-bold my-3 text-warning">網頁設計先修 </h2>
          <p>隨著網路深入生活,許多企業也日益注重網路行銷,網頁設計師儼然成為熱門職務。</p>
          <p>設計的工作最注重實力,投入此行業者必須對於網頁的規劃、設計、發佈、維護與更新皆必須有完整的了解,透過不斷累積經驗,強化作品展現的豐富度。</p>
        </div>
        ...
        ...
      </div>
    </div>
  </section>

S3:按鈕加入

【Documentaion(文件)】>【Components(元件)】>【Buttons(按鈕)】(連結處)

  <section class="bg-info">
    <div class="container">
      <div class="row py-5 text-white">
        <div class="col-md-4">
          <img src="./images/info01.jpg" alt="" class="img-thumbnail">
          <h2 class="h3 text-center font-weight-bold my-3 text-warning">網頁設計先修 </h2>
          <p>隨著網路深入生活,許多企業也日益注重網路行銷,網頁設計師儼然成為熱門職務。</p>
          <p>設計的工作最注重實力,投入此行業者必須對於網頁的規劃、設計、發佈、維護與更新皆必須有完整的了解,透過不斷累積經驗,強化作品展現的豐富度。</p>
          <!-- <a href="#" class="btn btn-outline-warning  align-self-end mt-auto">了解更多</a> -->
          <button class="btn btn-outline-warning">了解更多</button>
        </div>
        ...
        ...
      </div>
    </div>
  </section>

S4:Flex應用,將按鈕置於右下角

  <section class="bg-info">
    <div class="container">
      <div class="row py-5 text-white">
        <div class="col-md-4 d-flex flex-column">
          <img src="./images/info01.jpg" alt="" class="img-thumbnail">
          <h2 class="h3 text-center font-weight-bold my-3 text-warning">網頁設計先修 </h2>
          <p>隨著網路深入生活,許多企業也日益注重網路行銷,網頁設計師儼然成為熱門職務。</p>
          <p>設計的工作最注重實力,投入此行業者必須對於網頁的規劃、設計、發佈、維護與更新皆必須有完整的了解,透過不斷累積經驗,強化作品展現的豐富度。</p>
          <!-- <a href="#" class="btn btn-outline-warning  align-self-end mt-auto">了解更多</a> -->
          <button class="btn btn-outline-warning align-self-end mt-auto">了解更多</button>
        </div>
        ...
        ...
      </div>
    </div>
  </section>