Bootstrap之CSS篇(5)
本篇介紹了bootstrap響應式按鈕、圖片的使用方法,輔助類、響應式工具的使用,也算是對bootstrap全局CSS樣式的完結篇。
按鈕
可作為按鈕使用的元素
-?```` -?``
按鈕類
-?``.btn-default``??標準效果 -?``.btn-primary``??原始效果 -?``.btn-success``??成功效果 -?``.btn-info``?信息效果 -?``.btn-warning``??警示效果 -?``.btn-danger``???危險效果
輔助類
-?.active???點擊效果 -?.disapbled????禁用效果 -?.btn-link?鏈接效果 -?.btn-lg???尺寸:大按鈕 -?.btn-sm???尺寸:小銨鈕 -?.btn-xs???尺寸:超小按鈕 -?.btn-block????塊級按鈕????父元素內寬度拉伸100%
創建按鈕實例
btn?基礎樣式
???? ???? ????btn?-?a標簽 ????????
input按鈕?-?六種樣式
???? ???? ???? ???? ???? ???? ????????
button按鈕?-?六種樣式
???? ???? ???? ???? ???? ???? ????????
?a標簽按鈕?-?六種樣式??(輔助類效果演示)
????btn-default?(active) ????btn-primary?(disabled?-?1) ????btn-success?(disabled?-?2) ????btn-info?(btn-lg) ????btn-warning?(btn-sm) ????btn-danger?(btn-xs) ??按鈕小結:
實現按鈕有三個標簽、
按鈕效果為:基礎樣式+按鈕樣式(六種)btn btn-default ......
按鈕的輔助類并不復雜,三種按鈕尺寸類和disabled類這些都是經驗會使用到的
disabled有兩種使用方法,1種是作為.disabled類引用,另1種作為屬性引用disabled:"disabled"這種效果更好鼠標上也會有禁止圖標
如無必要請使用來做為頁面的按鈕來使用,以獲得最佳的效果支持
圖片
響應式圖片
.img-responsive類 讓圖片支持響應式布局
基本原理是為圖片設置了max-width:100%、height:auto、display:block這三個屬性,從而在父元素中獲得更好的縮放效果。
輔助類
.center-block?設置元素為block,并居中顯示
img-rounded?圓角邊形狀
img-circle?圓型形狀
img-thumbnail?圓角邊框形狀
創建圖片
img-responsive?響應式圖片
??????img-rounded
??????img-circle
??????img-thumbnail
??????圖片小結:
在img引用.img-responsive類即可,非常簡單,用不著總結當輔助類使用就可以了
img輔助類可以了解一下,主要是對圖片邊角進行修飾作用
輔助類
輔助類也叫工具類,在一些基礎類有時候需要一些輔助類來實現特定的效果
文本顏色
text-mutd
text-primary
text-success
text-warning
text-danger
如果text-*類 在某些選擇器下無法生效,可嘗試將文本放在中再引用text-*類
背景顏色
bg-primary
bg-success
bg-info
bg-warning
bg-danger
如果bg-*類 在某些選擇器下無法生效,可嘗試將文本放在
中再引用bg-*類
這是一個text-muted的文本效果
????這是一個text-primary的文本效果
????這是一個text-success的文本效果
????這是一個text-info的文本效果
????這是一個text-warning的文本效果
????這是一個text-danger的文本效果
????????
這是一個bg-primary的背景色效果
????這是一個bg-success的背景色效果
????這是一個bg-info的背景色效果
????這是一個bg-warning的背景色效果
????這是一個bg-danger的背景色效果
??快速浮動
pull-left、pull-right工具類具備?!important屬性,不能用于導航條組件中(導航組件中有專用的工具類)
.pull-left?左浮動
.pull-right?右浮動
.clearfix?清除浮動
內容居中
.center-block?設置元素為block,并居中顯示
顯示或隱藏
.show?顯示元素,僅作用于塊級元素
.hidden?隱藏元素,僅作用于塊級元素
.sr-only?僅在閱讀器中顯示,其他設備上隱藏元素
.invisible?僅影響元素的可見性,元素仍能影響文檔流的布局效果
text-hide?隱藏文本
特殊的按鈕
關閉按鈕?
三角符號?
輔助類小結:
輔助類的使用方法都相同,只要在class中引用即可
注意有些效果需要在父元素中引用,這需要在以后的使用過程中慢慢去積累經驗
也有一些效果因為選擇器的原因沖突,需要通過額外的
響應式工具
為了滿足不同設備展示布局效果,在某些特殊的情況下,我們可能針對不同的設備來獨立設計他們的頁面顯示內容,其中還包含了針對打印機顯示或隱藏的內容。我們完全可以為移動設備和電腦設備分別獨立的設計頁面。
響應式工具類快速查詢表
在柵格系統中我們可以通過這些類來控制不同設備中頁面的顯示內容
柵格系統中的塊級效果應用
從v3.2.0版本起,所有的.visible-*-*類都有三種塊級效果,分別對應display:block,display:inline,display:inline-block;
以xs小屏幕設備為例,可以使用.visible-xs-block、.visible-xs-inline、.visible-xs-inline-block來設置元素的塊級屬性
打印類
與顯示和隱藏類一樣,只是這些類針對打印機做出了處理。
我們對Bootstrap之CSS篇(2)中非常規布局示例代碼做一些小修改,除了xs最小設備第2列不顯示外,第1列在瀏覽器打印時也不顯示。
響應式工具小結:
在我們熟悉了柵格系統后,通過這個響應式工具,我們可以設計更具特性的頁面效果
只要掌握好了這些響應式工具的應用,在不同設備上展現不同的形式的網站都是十分容易的事情,但對美工設計人員是有一定要求,除了需要設計主版面外,還要提供過渡到各設備的頁面,對于過渡時的各頁面效果都是需要提前作出與設計才能保證效果。
初期此響應式工具的掌握好它們的使用效果即可,如何在動態版式布局中發揮效果,還需要我們借鑒更多網站模仿練習。
本篇的總結
本篇介紹了Bootstrap響應式按鈕、圖片的使用方法,輔助類、響應式工具的使用,也算是對Bootstrap全局CSS樣式的完結篇。
Bootstrap當然不止只有這點內容,它還提供非常漂亮與實用的組件供我們使用,當然這些我們后續逐步介紹。
Bootstrap相關資源文件,已上傳至我的Gitee項目?https://gitee.com/net_master/Ajax_Node/tree/master/Bootstrap
書山有路勤為徑,學海無涯苦作舟!!!
zhoubo
2020.9.21 at home
Bootstrap
版權聲明:本文內容由網絡用戶投稿,版權歸原作者所有,本站不擁有其著作權,亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容,請聯系我們jiasou666@gmail.com 處理,核實后本網站將在24小時內刪除侵權內容。
版權聲明:本文內容由網絡用戶投稿,版權歸原作者所有,本站不擁有其著作權,亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容,請聯系我們jiasou666@gmail.com 處理,核實后本網站將在24小時內刪除侵權內容。