金魚都能懂的網頁設計入門-Bootstrap 入門

發表於 更新於 分類於 閱讀次數：
金魚都能懂的網頁設計入門-第二十三天 - Bootstrap 入門

Bootstrap 是UI類型的框架，在它限制的規則之下來達成我們要的目的，例如要做RWD網頁需要一些時間，
但如果探用Bootstrap框架，就可以很快速地建構網頁並且有RWD效果。

Boorstrap網站：
https://getbootstrap.com/docs/5.3/getting-started/introduction/#quick-start

稍為講解一下 bootstrap 連結的內容：

  1. CSS 樣式 ：bootstrap.min.css , 只要看到外連的檔案只要有 min , 就是壓縮過的檔案，就是去掉空白及換行，這樣檔案會比較小，關乎到網頁載入的速度。
  2. viewport : 因有 RWD 效果，需宣告 viewport。
  3. bootstrap.bundle.min.js : bootstrap 自訂的一些javascript 的元件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap demo</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
      </head>
      <body>
        <h1>Hello, world!</h1>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
      </body>
    </html>

做滿版寬使用 container-fluid 的class

1
2
3
4
5
6
7
<!-- 1. 做滿版寬 ： container-fluid 
   固定寬： container
   -->

   <div class="container-fluid">
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, dolores odit voluptatum necessitatibus rerum corrupti quisquam omnis earum deserunt quis sint blanditiis quia, fugit architecto quas numquam explicabo optio animi?
   </div>

要建構多欄的版面，使用 row 及col 的class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
    .aa{
        /* 淺粉色 */
        background-color: #faa ; 
    }
    .bb{
        /* 淺紫色 */
        background-color: #aaf ;
    }
  </style>

 <!-- 2. 要建構多欄的版面，使用 row 及col 的class-->
    <div class="container">
        <div class="row">
            <div class="col aa">A  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias aliquid eaque reprehenderit facilis ut, tempore aperiam eligendi earum consequatur exercitationem.</div>
            <div class="col bb">B Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias aliquid eaque reprehenderit facilis ut, tempore aperiam eligendi earum consequatur exercitationem.</div>
        </div>
    </div>

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<style type="text/css">
    .aa{
        /* 淺粉色 */
        background-color: #faa ; 
    }
    .bb{
        /* 淺紫色 */
        background-color: #aaf ;
    }
    .cc{
        /* 淺綠色 */
        background-color: #afa ;
    }
  </style>

   <!-- RWD 效果：bootstrap把裝置分成五個尺寸 ,
    手機 直 .col-佔欄數 「預設值」
    手機 横 .col-sm-佔欄數
    
    平板 直 .col-md-佔欄數
    平板 橫 .col-lg-佔欄數
    
    桌機   .col-xl-佔欄數
    
    bootstrap 把版面切成12等份,就是佔欄數 -->

    <div class="container">
        <div class="row">
            <!-- 手機直向 aa bb cc都是12 col-12 , 手機横向 aa col-sm-12 bb及cc col-sm-6 -->
            <div class="col-12 col-sm-12 aa">A  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias aliquid eaque reprehenderit facilis ut, tempore aperiam eligendi earum consequatur exercitationem.
            </div>

            <div class="col-12 col-sm-6 bb">B Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias aliquid eaque reprehenderit facilis ut, tempore aperiam eligendi earum consequatur exercitationem.
            </div>


            <div class="col-12 col-sm-6 cc">C Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias aliquid eaque reprehenderit facilis ut, tempore aperiam eligendi earum consequatur exercitationem.
            </div>
        </div>
    </div>

建構三欄有圖片的RWD 效果, 手機橫向不用設定，設定平版，因為大的會吃小的 , 圖片滿版，用img-fluid 的 class

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
28
29
30
31
32
33
34
<!-- 因為bootstrap 的圖片是設定 max-width: 100% 最大為圖片的尺寸，所以可能不會滿版，因為要改為 width: 100% 滿版 -->
<style type="text/css">
   .item img{
    width: 100%;
   }
  </style>

 <!-- 4. 建構三欄有圖片的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>

文獻連結:
金魚都能懂的網頁設計入門-第二十三天 - Bootstrap 入門
https://www.youtube.com/watch?v=E9SosNZkX7Y&list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre&index=23 by CSScoke Amos

完整版30集 - 金魚都能懂網頁設計入門
https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre by CSScoke Amos