2024-06-24 bootstrap RWD 初步了解

發表於 分類於 閱讀次數：
2024-06-24 bootstrap RWD 初步了解

2024-06-24 bootstrap RWD 初步了解:

RWD 效果：bootstrap把裝置分成五個尺寸 ,

手機 直 .col-佔欄數 「預設值」
手機 横 .col-sm-佔欄數

平板 直 .col-md-佔欄數
平板 橫 .col-lg-佔欄數

桌機 .col-xl-佔欄數

bootstrap 把版面切成12等份,就是佔欄數 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- 建構三欄有圖片的RWD 效果, 手機橫向不用設定，設定平版，因為大的會吃小的 , 圖片滿版，用img-fluid 的 class-->
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-4">
        <div class="item">
          <img src="https://picsum.photos/300/200/?random=3" class="img-fluid">  
          <h3>title</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At beatae voluptas a reprehenderit corporis laborum illo laudantium saepe enim omnis?</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="item">
          <img src="https://picsum.photos/300/200/?random=3" class="img-fluid">  
          <h3>title</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At beatae voluptas a reprehenderit corporis laborum illo laudantium saepe enim omnis?</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="item">
          <img src="https://picsum.photos/300/200/?random=3" class="img-fluid">  
          <h3>title</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At beatae voluptas a reprehenderit corporis laborum illo laudantium saepe enim omnis?</p>
        </div>
      </div>
    </div>

  </div>