Bootstrap 4 - 元件筆記

tags: FrameWork-bootstrap4

一 . Card

(一) . 基礎

<div class="card"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some example text. Some example text.</p> </div> </div>
  1. card class:給出整個卡片的外框,border為1px。
    • 高 : 依內容變動。
    • 寬 : 父容器的100%
  2. card-body class: 加入padding,使內文看起來有排版。
  3. card-title class: 加一點margin-bottom而已,可以直接用<h>取代。
  4. card-text class : 加一點margin-bottom而已,可以直接用<p>取代。

(二) . headr 、footer

<div class="container"> <div class="card"> <div class="card-header"> <div class="card-title"> header-title</div> <div class="card-text"> header-text</div> </div> <div class="card-body"> <div class="card-title"> body-title</div> <div class="card-text"> body-text</div> </div> <div class="card-footer"> <div class="card-title"> footer-title</div> <div class="card-text"> footer-text</div> </div> </div> </div>
  1. card-headr class : 跟card-body幾乎一樣,padding數據不一樣,加上在底下會加入一個底線。
  2. card-footer class : 跟card-body幾乎一樣,padding數據不一樣,加上在上方會加入一個底線。
  3. 可以在footer和headr加入card-title和card-text : 效果跟在card-body加入完全一樣。

(三) . 加入影像 :

<div class="card" style="width:400px"> <div class="card-body"> <h4 class="card-title">John Doe</h4> <p class="card-text">Some example text some example text.John Doe is an architect and engineer</p> <a href="#" class="btn btn-primary">See Profile</a> </div> <img class="card-img-top" src="http://fakeimg.pl/300x300" alt="Card image" style="width:100%"> </div>
  1. img-top class : 將影像加入card-body前面時。
  2. img-bottom class : 將影像加入card-body後面時。
  3. 基本上兩個沒甚麼差,css properity一樣,數據不一樣而已。
  4. 把img加入 card-body或card-headr或card-footer : 使影像佔不到整個card的畫面,因為有padding。

二 . Alert

(一) . 基本

第一點 : 基本class

  1. class="alert" : alert最外層的wraper。
    • 通常用<div>
    • 長寬 : width填滿父元素,heigth依內容。
    • 邊界 : 有padding,1px的border,有margin-butomm。
  2. class="alert-info" : 改變alert的背景,字體顏色。
    • 改變color、background-color、border-color的屬性。
  3. class="alert-link" : 使<a>的文字可以對應class="alert-info" 改變顏色。
    • 通常用<a>
    • 沒有任何長寬、padding、margin、order屬性。
    • 僅改變文字顏色,字體大小。
  4. class="alert-heading" : 使heading的文字顏色跟隨class="alert-info" 改變顏色。
    • 通常用<h>類。
    • 沒有任何長寬、padding、margin、order屬性。
    • 僅改變顏色。
  5. alert的內文直接用<p>即可,也可以不要用。

第二點 : 基本佈局

<div class="alert alert-info"> <h5 class="alert-heading"> heading </h5> <p> context <a class="alert-link" href="#">Link</a> </p> </div>
  1. 佈局模型 :
    • alert alert-info : 為底,最基本外層。
    • alert-heading包住<h>tag,改變顏色。
    • alert-link :包住<a>tag, 改變顏色。
  2. 顏色 :
    • alert-info為主要的決定。
    • alert-headingalert-link會依照外層的alert-info改變顏色。
    • 內文可以用<p>包住,沒有class可以加,顏色在alert-info已經設定好。

(二) . 標準動態佈局

第一種變化 : 關閉alert

  1. data-dismiss="alert" : 加在alert內部的tag中,當此tag被點擊時,關閉外層alert
    • 只要有這個屬性,基本上就可以關閉alert了。
    • 每個alert都要有一個這個,不再任一個alert的data-dismiss="alert" 被點擊時不有作用。
  2. class="close" : 可以使關閉button的外型好看點。
  3. class="fade" : 有此設定下的tag會在關閉的時候會有淡去的動畫。
    • 如果直接加上此class的話,tag會在初次渲染的時候就觸發消失。
    • 所以要加上下一個提及的class。
  4. class="show" : 通常加在一個有關閉和開啟動作的tag,可以使初次渲染的時候,此tag不被消失。
<div class="alert alert-info fade show"> <h1 class="alert-heading"> heading </h1> <button type="button" class="close" data-dismiss="alert" >close</button> <p> context <a class="alert-link" href="#">Link</a> </p> </div>

第二種變化 : 加上<hr>

  • 因為alert的設計本身沒有向card元素有headerfooter
  1. 可以<hr>加上分別出來上面跟下面。
  2. <hr> : 一條線加上margin-topmargin-bottom
  3. 一般用一個<hr>就好,不要用兩個,比例看起來怪怪的。
  4. 再加上<br><button>的尾端。
    • 因為<button>是一個inline tag,後面直接接上一個<hr>會有重複的問題。
    • 加上<br>可以使button結束就換行,不會跟<hr>搶位子。
<div class="alert alert-info fade show"> <h3 class="alert-heading"> heading </h3> <button type="button" class="close" data-dismiss="alert">close</button><br> <hr> <p> context <a class="alert-link" href="#">Link</a> </p> </div>

三 . Model

(一) . 基本

第一點 : 基本class :

  1. class="modal" : 最外層的wrap,在modal被呼叫後佔滿整個視窗。
  2. class="modal-dialog" : 第二層的wrap,有margin,讓視覺上modal的內容跟整個視窗分離。
  3. class="modal-content" : 第三層wrap,包住內容的。
    • 長寬 : width填滿父元素,heigth依內容。
    • 邊界 : 沒有padding,margin,有1px的border。
  4. class="modal-body" : 主要包住內文的,若要使用row-col的話,必須加在這裡。
    • 長寬 : width填滿父元素,heigth依內容。
    • 邊界 : 有padding, 沒有marginborder
  5. data-target="#id_for_modal" data-toggle="modal" : 加在modal外。
    • 由外層開啟modal的基本方法。
    • 外部tag : 加入data-target="#id_for_modal" data-toggle="modal"
    • 內部tag : 在class="modal"中加入id="id_for_modal",記住,內部tag的id必須跟外部data-target="" 的一樣。

第二點 : 基本佈局 :

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#tar"> Launch static backdrop modal </button> <div class="modal" id="tar"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> test </div> </div> </div> </div>
  1. 佈局模型 :
    • 第一層wrap為class="modal"
    • 第二層wrap為class="modal-dialog"
    • 第三層wrap為class="modal-content"
      • class="modal-content"內開始加入真正的內容。
    • class="modal-content"可以視為card元件中的class="card"內部加入body header footer
  2. 顏色 : 基本上可以自己加入,沒有boostrap4已經做好的。

(二) . 標準動態佈局

第一種變化 : 加入header、footer和關閉按鈕

  1. class="modal-header" : 在下方加入一條線的區域。
    • 長寬 : width填滿父元素,heigth依內容。
    • 邊界 : 有padding,沒有margin和border。
  2. class="modal-footer" : 在上方加入一條線的區域。
    • 長寬 : width填滿父元素,heigth依內容。
    • 邊界 : 有padding,但比class="modal-header"小,沒有margin,有1px的border。
  3. class="modal-title" : 多用於class="modal-header"內顯示modal的標題。
    • 只有增加行寬的功能,所有仍要搭配<h>類的tag。
  4. data-dismiss="modal" : 加在class="modal" 內部的元素的屬性,可以關閉所包覆的modal(同於上面alert的關閉。)。
    • 只要有這個屬性,基本上就可以關閉modal了。
    • 每個modal都要有一個這個,不再任一個modal的data-dismiss="alert" 被點擊時不有作用。
    • 可以加入close或btn等等的class使按鈕外觀好看一點。
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#tar"> Launch static backdrop modal </button> <div class="modal" id="tar"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h2 class="modal-title">heading </h2> </div> <div class="modal-body"> test </div> <div class="modal-footer"> <button type="button" class="close" data-dismiss="modal">Close </button> </div> </div> </div> </div>

四 . Collapse

五 . Navbar

(ㄧ) . 基本

第一點 : 基本class

  1. class="navbar" : 整個navbar的base。
    • 長寬 : width填滿父元素,heigth依內容。
    • 邊界 : 有padding,沒有margin。
    • display : 是flex,內容為justify-content-between。
  2. class="navbar-brand" : navbar的brand,使之特別明顯。
    • 長寬 : heigth填滿父元素,width依內容。
    • 邊界 : 有margin-right,有上下padding。
  3. class="navbar-nav":
    • 長寬 : heigth填滿父元素,width依內容。
    • 邊界 :沒有margin或padding。
    • display : 是flex,內容為colume。
  4. class="navbar-item" :
    • 長寬 : width填滿父元素,heigth依內容。
    • 邊界 : 有padding,沒有margin。

第二點 : 基本佈局

<nav class="navbar navbar-dark bg-dark"> <a href="#" class="navbar-brand"> Brand </a> <ul class="navbar-nav"> <li class="nav-item"><a href="#" class="nav-link">Main</a></li> <li class="nav-item"><a href="#" class="nav-link">Others</a></li> </ul> </nav>
  1. 佈局模型 :

    • navbar為底,最基本的外層。
    • navbar-brand和navbar-nav為兩個主要子元素。
      • navbar-brand放logo。
      • navbar-nav包住其他的選單功能。
    • navbar-item為每一個選單的選項。
  2. 顏色 :

    • navbar-dark : 可以使得此navbar裡面所有的元素的字體顏色變換。
    • bg-dark : 可以使得此navbar的背景變成黑色。
  3. 問題 :

    • navbar是justify-content-between的預設 : 在navbar-nav中加入mr-auto,使navbar-nav在navbar-brand後。
    • navbar-nav的內容安排是colume的,因為boostarp4原本是因應手機而設計的,改方法下面會提及。

(二) . 標準動態佈局

  1. 解決navbar-nav的內容安排是colume的問題 :
    • class="collapse navbar-collapse"包住整個navbar-nav
    • 再在class="navbar"中加入class="navbar-expand-sm"
  2. 原理 : 把整個navbar-nav變成一個可拉的清單,而控制的標準就是navbar-expand-sm。
    • navbar-expand-sm : 在sm大小以上的螢幕,會navbar-collapse內容。
    • navbar-collapse : 對應同一個navbar中的navbar-expand。
<nav class="navbar navbar-expand-sm navbar-dark bg-dark"> <a href="#" class="navbar-brand"> Brand </a> <div class="collapse navbar-collapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item"><a href="#" class="nav-link">Main</a></li> <li class="nav-item"><a href="#" class="nav-link">Others</a></li> </ul> </div> </nav>
  1. 補強 : 在限制之外顯示navbar-nav。
    • 若設定 : navbar-expand-sm,在sm的螢幕上,navbar-nav會完全消失不見。
    • 方法 : 設定一個navbar-toggler,在限制發生時,開啟navbar-nav
<nav class="navbar navbar-expand-sm mynavbar navbar-dark"> <a href="#" class="navbar-brand"> Brand </a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarlist"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarlist"> <ul class="navbar-nav mr-auto"> <li class="nav-item"><a href="#" class="nav-link">Main</a></li> <li class="nav-item"><a href="#" class="nav-link">Others</a></li> </ul> </div> </nav>
  1. 替換<a><span> :
    • <a> 的缺點 : 他一定需要一個href的屬性,會造成,他必須有一個連接。
    • <span>替換 : 除了href的屬性都保留,再加上type="button",可以讓游標移動時有點擊的效果。