FrameWork-bootstrap4
card
class:給出整個卡片的外框,border為1px。
card-body
class: 加入padding,使內文看起來有排版。card-title
class: 加一點margin-bottom而已,可以直接用<h>
取代。card-text
class : 加一點margin-bottom而已,可以直接用<p>
取代。card-headr
class : 跟card-body幾乎一樣,padding數據不一樣,加上在底下會加入一個底線。card-footer
class : 跟card-body幾乎一樣,padding數據不一樣,加上在上方會加入一個底線。img-top
class : 將影像加入card-body前面時。img-bottom
class : 將影像加入card-body後面時。class="alert"
: alert最外層的wraper。
<div>
。width
填滿父元素,heigth
依內容。class="alert-info"
: 改變alert的背景,字體顏色。
class="alert-link"
: 使<a>
的文字可以對應class="alert-info"
改變顏色。
<a>
。class="alert-heading"
: 使heading的文字顏色跟隨class="alert-info"
改變顏色。
<h>
類。<p>
即可,也可以不要用。alert
和 alert-info
: 為底,最基本外層。alert-heading
包住<h>
tag,改變顏色。alert-link
:包住<a>
tag, 改變顏色。alert-info
為主要的決定。alert-heading
和alert-link
會依照外層的alert-info
改變顏色。<p>
包住,沒有class可以加,顏色在alert-info
已經設定好。data-dismiss="alert"
: 加在alert內部的tag中,當此tag被點擊時,關閉外層alert
。
data-dismiss="alert"
被點擊時不有作用。class="close"
: 可以使關閉button的外型好看點。class="fade"
: 有此設定下的tag會在關閉的時候會有淡去的動畫。
class="show"
: 通常加在一個有關閉和開啟動作的tag,可以使初次渲染的時候,此tag不被消失。<hr>
alert
的設計本身沒有向card
元素有header
跟footer
。<hr>
加上分別出來上面跟下面。<hr>
: 一條線加上margin-top
,margin-bottom
。<hr>
就好,不要用兩個,比例看起來怪怪的。<br>
在<button>
的尾端。
<button>
是一個inline tag,後面直接接上一個<hr>
會有重複的問題。<br>
可以使button結束就換行,不會跟<hr>
搶位子。class="modal"
: 最外層的wrap,在modal被呼叫後佔滿整個視窗。class="modal-dialog"
: 第二層的wrap,有margin,讓視覺上modal的內容跟整個視窗分離。class="modal-content"
: 第三層wrap,包住內容的。
width
填滿父元素,heigth
依內容。class="modal-body"
: 主要包住內文的,若要使用row-col的話,必須加在這裡。
width
填滿父元素,heigth
依內容。padding
, 沒有margin
或border
。data-target="#id_for_modal"
和data-toggle="modal"
: 加在modal外。
data-target="#id_for_modal"
和data-toggle="modal"
。class="modal"
中加入id="id_for_modal"
,記住,內部tag的id必須跟外部data-target=""
的一樣。class="modal"
。class="modal-dialog"
。class="modal-content"
。
class="modal-content"
內開始加入真正的內容。class="modal-content"
可以視為card元件中的class="card"
內部加入body header footer
class="modal-header"
: 在下方加入一條線的區域。
width
填滿父元素,heigth
依內容。class="modal-footer"
: 在上方加入一條線的區域。
width
填滿父元素,heigth
依內容。class="modal-header"
小,沒有margin,有1px的border。class="modal-title"
: 多用於class="modal-header"
內顯示modal的標題。
<h>
類的tag。data-dismiss="modal"
: 加在class="modal"
內部的元素的屬性,可以關閉所包覆的modal(同於上面alert的關閉。)。
data-dismiss="alert"
被點擊時不有作用。class="navbar"
: 整個navbar的base。
width
填滿父元素,heigth
依內容。class="navbar-brand"
: navbar的brand,使之特別明顯。
heigth
填滿父元素,width
依內容。class="navbar-nav"
:
heigth
填滿父元素,width
依內容。class="navbar-item"
:
width
填滿父元素,heigth
依內容。佈局模型 :
顏色 :
問題 :
class="collapse navbar-collapse"
包住整個navbar-nav
。class="navbar"
中加入class="navbar-expand-sm"
navbar-toggler
,在限制發生時,開啟navbar-nav
<a>
為<span>
:
<a>
的缺點 : 他一定需要一個href
的屬性,會造成,他必須有一個連接。<span>
替換 : 除了href
的屬性都保留,再加上type="button"
,可以讓游標移動時有點擊的效果。