BS4(2)-基本版面運用

範例結果

三、網格應用

(一)【col-*】

S0:HTML開始結構

  <section>
    <div class="container">
      <div class="row">
        <h2>作品集</h2>
      </div>
      <div class="row">
        <div class="col-3">
          <figure class="figure">
            <img src="./images/Album01.jpg" alt="" class="figure-img img-fluid rounded img-thumbnail border-danger rounded-circle">
            <figcaption class="figure-caption text-center">作品1</figcaption>
          </figure>
        </div>
          ...
          ...
      </div>
    </div>
  </section>

S1:標題h2 美化

【Documentaion(文件)】>【Utilities(通用類別)】

(1) 【Text(文字)】(連結處)

(2) 【Color(顏色)】(連結處)

(3) 【Spacing(間隔)】(連結處): margin 或 padding 值設定

(4) 【Borders(邊框)】(連結處)

(5) 【Sizing(尺寸)】(連結處): width 或 height 值設定

      <div class="row">
        <!-- <h2 class="my-5 py-3 text-center text-white bg-danger rounded" style="width:100%">作品集</h2> -->
        <h2 class="my-5 py-3 text-center text-white bg-danger rounded w-100">作品集</h2>
      </div>

S2:利用網格設定【一列四個圖說組合】:【.col-3】

S3:利用中斷點設定各行動裝置排版情形:【.col-8  .col-sm-6  .col-md-4  .col-lg-3  .col-xl-4】