BS4(1)-網格&Flex介紹

範例結果

二、【網格】&【Flex】介紹

(1) 何謂Containers(容器)

【Documentaion(文件)】>【Layout(排版)】>【Overview(概觀)】>【Containers(容器)】(連結處)

S1:預備工作

HTML結構

  <div class="container">
    <section>
      <!-- S0:一般情形 -->
        <div class="row">
          <div class="h3 mx-3">S0:一般情形</div>
          <p>結構:<br>
            .container>.row>.col-1.box{$$}*12
          </p>
        </div>
      <!-- 練習 -->


      <!-- S1:實際寬度 -->
        <div class="row">
          <div class="h3 mx-3">S1:實際寬度</div>
          <p>結構:<br>
            .box
          </p>
        </div>
      <!-- 練習 -->


    </section>
    <section>
      <!-- S2:何謂網格 -->
        <div class="row">
          <div class="h3 mx-3">S2:何謂網格</div>
          <p>結構:<br>
            .row>.col-1*12>.box{$$}
          </p>
        </div>
      <!-- 練習 -->


      <!-- 結論 -->
      <div class="row">
        <div class="h3 mr-5 pl-5">結論</div>
        <ol>
          <li>【class="container"】之下是【class="row"】:才不會有水平捲軸</li>
          <li>【class="row"】之下是【class="col=xx"】</li>
          <li>頁面內容應放在【class="col=xx"】之下:才會依網格規則排列</li>
        </ol>
      </div>
    </section>
    <section>
      <!-- S3:中斷點討論 -->
        <div class="row">
          <div class="h3 mx-3">S3:中斷點討論</div>
          <p>結構:<br>
            .row>.col-3.col-sm-6.col-md-2.col-lg-1.col-xl-2*4>.box{$$}
          </p>
        </div>
      <!-- 練習 -->


    </section>
    <section>
      <!-- S4:flex討論 -->
        <div class="row">
          <div class="h3 mx-3">S4:flex討論</div>
            <p>結構:</p>
            <ol>
                <li>S1:.row>.col-2*3>.box{$$}</li>
                <li>S2:.row加入【.justify-content-end】</li>
                <li>S3:第1個.col-1加入【.order-3】</li>
                <li>S4:第2個.col-2加入【.mr-auto】</li>
              </ol>
        </div>
      <!-- 練習 -->


    </section>
  </div>

CSS美化

*{
  padding: 0;margin: 0;
}
body{
  font-family: 'Verdana','Microsoft JhengHei', sans-serif;
  transition: all .5s;
}
.container,.container-fluid{
  background: #fff2b9;
}
section{
  border-bottom: 1px solid red;
}
.box{
  height: 80px;  background-color: #7952b3;  border: 1px solid red; 
  font-size: 1.1em; text-align: center; line-height: 80px; color: 000;
}
.row{
  padding-bottom: 10px;padding-top: 10px;
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .box{background-color: #c9a6fd; color: #000;}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .box{background-color: #a6fdb2; color: #000;}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .box{background-color: #a6fdf1; color: #000;}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .box{background-color: #96810a; color: #fff;}
}