【CSS】Bootstrap4彈性盒子排版

flexbox排版

外層flex，item寬度超出container也不會超出
item內有文字或div時撐開高度時，其他item會以(最高)來延伸成等高

外容器(Container)

 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


ul{
    display: flex;

    /*主軸方向*/
    flex-direction: row; /*從左到右(預設)*/
    flex-direction: row-reverse; /*從右到左*/
    flex-direction: column; /*從上到下*/
    flex-direction: column-reverse; /*從下到上*/

    /*主軸線排列*/
    justify-content: flex-start; /*從頭開始(預設)*/
    justify-content: flex-end; /*從尾開始*/
    justify-content: center; /*置中排列*/
    justify-content: space-between; /*貼齊頭和尾*/
    justify-content: space-around; /*平均分散*/

    /*交錯線排列*/
    align-items: flex-start; /*從交錯線頭開始對齊(預設值)*/
    align-items: flex-end; /*從交錯線尾開始對齊*/
    align-items: center; /*從交錯線置中對齊*/
    align-items: stretch; /*從交錯線延伸到底*/
    align-items: baseline; /*從交錯線對齊(文字)基線*/

    flex-wrap: nowrap; /*內容超出範圍不換行(預設值)*/
    flex-wrap: wrap; /*內容超出範圍自動換行*/
    flex-wrap: wrap-reverse; /*內容超出範圍反向換行*/

    flex-flow: row nowrap; /*(預設值)*/
    flex-flow: column wrap; /*從上到下，自動換行*/

    /*使用前提flex-wrap: wrap*/
    align-content: stretch; /*第一行與最後一行都延伸至滿版(預設值)*/
    align-content: flex-start; /*第一行與最後一行都從交錯線頭開始排列*/
    align-content: flex-end; /*第一行與最後一行都從交錯線尾開始排列*/
    align-content: center; /*第一行與最後一行都對齊交錯線中間位置*/
    align-content: space-between; /*第一行從交錯線頭，最後一行從交錯線尾*/
    align-content: space-around; /*第一行與最後一行平均分散在交錯軸上*/
}

內元件(Items)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


ul > li{
    align-self: flex-start; /*元件本身從頭對齊*/
    align-self: flex-end; /*元件本身從尾對齊*/
    align-self: center; /*元件本身對齊中線*/
    align-self: stretch; /**元件本身延伸到底*/
    align-items: baseline; /**元件本身對齊(文字)基線*/
    
    flex-grow: 0; /*伸展比(預設值)*/
    flex-grow: 1; /*將容器剩餘空間，進行比例分配*/

    flex-shrink: 1; /*被壓縮比(預設值)*/
    flex-shrink: 0; /*不要被壓縮*/

    flex-basis: auto; /*預先被分配比(預設值)*/
    flex-basis: 200px; /*絕對被分配值*/

    flex: 0 1 auto; /*(預設值)*/
    flex: flex-grow | flex-shrink | flex-basis;
    flex: 3; /*永遠佔30%*/
    flex: none; /*取消彈性，保持原尺寸*/
    
    order: 0; /*(預設值)*/
    order: 1~100; /*設定排序，數字小的先*/
}

Bootstrap4樣板

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<!DOCTYPE html>
<html lang="zh-tw">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Bootstrap 4</title>
    <style>
      body{
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif
      }
    </style>
</head>
<body>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap4排版方式與斷點

單位是rem

以12欄方式排版

.container > .row > .col-* > 內容

以下為Bootstrap4的斷點：

0~576	576~768	768~992	992~1200	1200~
.col-*	.col-sm-*	.col-md-*	.col-lg-*	.col-xl-*
Extra Small	Small	Medium	Large	Extra Large
auto	540px	720px	960px	1140px

Bootstrap是從手機版開始製作網頁版型，要超過斷點才會套用樣式

容器(Container)

 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


.container{
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px){
  .container {
    max-width: 540px;
    background-color: yellow;
  }
}
@media (min-width: 768px){
  .container {
    max-width: 720px;
    background-color: green;
  }
}
@media (min-width: 992px){
  .container {
    max-width: 960px;
    background-color: blue;
  }
}
@media (min-width: 1200px){
  .container {
    max-width: 1140px;
    background-color: purple;
  }
}

滿版容器可用.container-fluid

列(Row)

1
2
3
4
5
6


.row{
  display: flex; 
  flex-wrap: wrap; /*預設裡面容器會自動換行*/
  margin-right: -15px;
  margin-left: -15px;
}

可添加的樣式

 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


.row .flex-row
.row .flex-row-reverse
.row .flex-column
.row .flex-column-reverse

.row .justify-content-start
.row .justify-content-end
.row .justify-content-center
.row .justify-content-between
.row .justify-content-around

.row .align-items-start
.row .align-items-end
.row .align-items-center
.row .align-items-baseline
.row .align-items-stretch

.row .flex-nowrap
.row .flex-wrap
.row .flex-wrap-reverse

.row .flex-wrap .align-content-start 
.row .flex-wrap .align-content-end 
.row .flex-wrap .align-content-center
.row .flex-wrap .align-content-around
.row .flex-wrap .align-content-stretch

欄(Col)

1
2
3
4
5
6
7


<div class="container">
    <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


.col{
    /*螢幕低於576px時width: 100%*/
    max-width: 100%;
    flex-grow: 1; /*佔總欄(3)比是1*/
    flex-basis: 0; 
}
.col-sm-6{
    /*螢幕超過576px時width: 50%*/
}
.col-md-6{
    /*螢幕超過768px時width: 50%*/
}
.col-lg-4{
    /*螢幕超過在992px時width: 33.3%*/
}
.col-xl-3{
    /*螢幕超過在992px時width: 25%*/
}

可添加的樣式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


.col .offset-4 /*推移col四格*/ 
.col-md-4 .offset-md-4 /*往右4col*/
.col-md-4 .ml-auto /*將右邊col推到最右*/
.col-md-4 .order-md-3 /*在中螢幕時順序3*/

.col .align-self-start
.col .align-self-end
.col .align-self-center
.col .align-self-baseline
.col .align-self-stretch

.col .order-first /*order:-1*/
.col .order-1 /*order:1*/
.col .order-2 /*order:2*/
.col .order-3 /*order:3*/ 
.col .order-last /*order:13*/

order排序應用

1
2
3
4
5
6


<div class="row">
    <div class="col-3 order-3">1</div>
    <div class="col-3 order-4">2</div>
    <div class="col-3 order-1">3</div>
    <div class="col-3 order-2">4</div>
</div>

原本排序：1>2>3>4，加order後排序變：3>4>1>2

1
2
3
4
5
6


<div class="row">
    <div class="col-3 order-sm-3">1</div>
    <div class="col-3 order-sm-4">2</div>
    <div class="col-3 order-sm-1">3</div>
    <div class="col-3 order-sm-2">4</div>
</div>

再加上sm表示在行動版以上排序才會是：3>4>1>2

Bootstrap預設樣式

字體

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


.display1 /*font-size: 96px*/
.display2 /*font-size: 88px*/
.display3 /*font-size: 72px*/
.display4 /*font-size: 56px*/

.h1 /*font-size: 40px*/
.h2 /*font-size: 32px*/
.h3 /*font-size: 28px*/
.h4 /*font-size: 24px*/
.h5 /*font-size: 20px*/
.h6 /*font-size: 16px*/

顏色

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


.primary /*藍色(主要的)*/
.secondary /*灰色(次要的)*/
.success /*綠色(成功的)*/
.danger /*紅色(危險的)*/
.warning /*黃色(警告的)*/
.info /*青色(通知/信息)*/
.light /*灰色*/
.dark /*黑色*/
.white /*白色*/
.transparent /*透明*/
.text-{color} /*文字顏色{替換}*/
.bg-{color} /*背景顏色{替換}*/
.border-{color} /*線框顏色*/

排版

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


/*1rem=16px*/
.mt-1 /*margin-top: 4px*/
.mr-2 /*marign-right: 8px*/
.mb-3 /*margin-bottom: 16px*/
.ml-4 /*margin-left: 24px*/
.mx-auto /*margin: 0 auto*/

.pt-5 /*padding-top: 48px*/
.px-3 /*padding-x: 16px*/
.py-4 /*padding-y: 24px*/
.pl-5 /*padding-left: 48px*/

.w-25 /*width: 25%*/
.w-100 /*佔滿100%等於後面元素自動換行*/
.mw-50 /*max-width: 50%*/
.h-75 /*height: 75%*/
.mh-100 /*max-height: 100%*/

.flex-sm-row-reverse /*在768px時反轉*/
.d-flex /*display:flex*/
.d-inline /*display:inline*/
.d-block /*display:block*/
.d-inline-block /*display:inline-block*/
.d-sm-none /*在超過小尺寸螢幕時消失*/

 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


<!--一列四欄-->
<div class="container">
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>  
</div>

<!--二列二欄-->
<div class="container">
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="w-100"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>  
</div>

<!--二列二欄-->
<div class="container">
  <div class="row">
    <div class="col-6"></div>
    <div class="col-6"></div>
    <div class="col-6"></div>
    <div class="col-6"></div>
  </div>  
</div>

圖片、文字

1
2
3
4
5
6
7


.img-fluid /*max-width:100%，height:auto*/
.img-thumbnail /*在圖片加上外框線*/
.rounded /*增加圓角*/
.text-center /*置中，在圖片外層容器添加可置中*/
.mx-auto .d-block /*圖片置中*/
.clearfix /*清除浮動display:block，clear:both，content:""*/
.sr-only /*畫面隱藏，給瀏覽器了解該元素*/

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<!--圖片置中-->
<img class="img-fluid mx-auto d-block" width="600" src="...">

<!--圖片和文字置中-->
<div class="text-align">
  <img class="img-fluid" width="600" src="...">
</div>

<!--圖片和下方描述-->
<figure class="figure">
  <img src="..." class="figure-img img-fluid">
  <figcaption class="figure-caption">圖片描述</figcaption>
</figure>

影音嵌入

1
2
3


<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="影片網址"></iframe>
</div>

影片網址內需要有/embed/字樣

1
2
3
4


.embed-responsive .embed-responsive-21by9 /*影片尺寸21:9*/
.embed-responsive .embed-responsive-16by9 /*影片尺寸16:9*/
.embed-responsive .embed-responsive-4by3 /*影片尺寸4:3*/
.embed-responsive .embed-responsive-1by1 /*影片尺寸1:1*/

固定選單

1
2
3


<div class="navbar navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#"></a>
</div>

1
2
3


.fixed-top /*將選單固定在上方*/
.fixed-bottom /*將選單固定在下方*/
.sticky-top /*將選單在滾動時固定position:sticky，top:0，z-index: 1020

css

【CSS】Bootstrap4彈性盒子排版

media screen、container、row、col、flexbox

【CSS】Bootstrap4彈性盒子排版

media screen、container、row、col、flexbox

flexbox排版

外容器(Container)

內元件(Items)

Bootstrap4樣板

Bootstrap4排版方式與斷點

容器(Container)

列(Row)

可添加的樣式

欄(Col)

可添加的樣式

order排序應用

Bootstrap預設樣式

字體

顏色

排版

圖片、文字

影音嵌入

固定選單

其他相關