1 基礎布局組件
在12柵格系統上基礎上，BootStrap還提供了多種基礎布局組件。
CSS組件，總結為8大類型的樣式：
基礎樣式、顏色樣式、尺寸樣式、狀態樣式、特殊元素樣式、并列元素樣式、嵌套子元素樣式、動畫樣式
1.1基礎樣式
基本樣式，一般包含文本字體，顏色背景，邊框，定位等，如下面警告框：
//源碼.alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px;}1.2顏色樣式
看BootStrap官網的按鈕btn或者alert警告框會發現許多組件默認的5種顏色樣式：
primary(重點藍)、success(成功綠)、info(信息藍)、warning(警告橙)、danger(危險紅)
http://getbootstrap.com/examples/theme/
定義規則：組件名稱-顏色類型，比如btn-primary，alert-info
//源碼.btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4;}1.3尺寸樣式
BootStrap為大部分組件都提供了尺寸的快捷設置。一般組件包含xs、sm、普通、lg四種尺寸
定義規則：組件名稱-尺寸，比如btn-xs
//源碼.btn-lg,.btn-group-lg > .btn { padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px;}.btn-sm,.btn-group-sm > .btn { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px;}.btn-xs,.btn-group-xs > .btn { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px;}1.4狀態樣式
高亮可用的時候用active樣式，禁用的時候用disabled樣式或disabled屬性。
//源碼.btn:active,.btn.active { background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);}1.5特殊元素樣式
所謂特殊元素，即特定類型的組件一般只使用某一種或者幾種固定的元素。
比如：alert警告框內一般有警告標題、內容、關閉鏈接元素；nav導航中常用li元素
//源碼//alert內連接的樣式.alert .alert-link { font-weight: bold;}//alert內p元素和ul元素的底部外邊距設置.alert > p,.alert > ul { margin-bottom: 0;}//兩個段落之間，增加一個段落外邊距.alert > p + p { margin-top: 5px;}//增大右內邊距，以便關閉按鈕.alert-dismissable,.alert-dismissible { padding-right: 35px;}//關閉按鈕，右對齊.alert-dismissable .close,.alert-dismissible .close { position: relative; top: -2px; right: -21px; color: inherit;}//源碼.nav > li { position: relative; display: block;}.nav > li > a { position: relative; display: block; padding: 10px 15px;}.nav > li > a:hover,.nav > li > a:focus { text-decoration: none; background-color: #eee;}.nav > li.disabled > a { color: #777;}.nav > li.disabled > a:hover,.nav > li.disabled > a:focus { color: #777; text-decoration: none; cursor: not-allowed; background-color: transparent;}1.6并列元素樣式
很多情況下，一個組件內部需要放置多個子元素，比如導航欄nav里放置多個li元素，按鈕組可以放置多個button元素。
一般并列元素考慮：1.水平并列時左右內邊距(padding-left padding-right)和外邊距(margin-left margin-right)2.垂直并列時上下內邊距(padding-top padding-bottom)和外邊距(margin-top margin-bottom)
//源碼.alert > p,.alert > ul { margin-bottom: 0;}.alert > p + p { margin-top: 5px;}.modal-footer .btn + .btn { margin-bottom: 0; margin-left: 5px;}1.7嵌套子元素樣式
需要將兩個相同或不同的組件嵌套在一起使用，這時會有特殊情況，比如，多個按鈕組在一起使用，或者按鈕和下拉菜單一起使用。
需要考慮嵌套元素的使用情況。比如多個分組按鈕一起使用的時候，需要考慮浮動方向和間距
//源碼//消除2個按鈕(或一個按鈕和另外一個按鈕組)之間的1像素細節引起的沖突.btn-group .btn + .btn,.btn-group .btn + .btn-group,.btn-group .btn-group + .btn,.btn-group .btn-group + .btn-group { margin-left: -1px;}1.8動畫樣式
動畫樣式在BootStrap中的進度條progress組件中才使用到。
<div class="progress"> <div class="progress-bar" style="width:45%"> <span class="sr-only">45% complete</span> </div></div>
注意用.progress是總進度條，progress-bar是進度條顯示的部分，還有五種顏色progress-bar-success等
sr-only，全稱是 screen reader only（僅供）屏幕閱讀器有時候 UI 上會出現一些僅供視覺識別的元素，比如說“漢堡包菜單按鈕”只有視力正常的人才能清楚辨識這些元素的作用。而殘障人士，比如弱勢或盲人是不可能知道這些視覺識別元素是什么的。他們上網使用的是屏幕閱讀器，也就是 screen reader（sr），屏幕閱讀器需要找到能辨識的文本說明然后“讀”出來給用戶聽。
//源碼.progress { height: 20px; margin-bottom: 20px; overflow: hidden; background-color: #f5f5f5; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);}.progress-bar { float: left; width: 0; height: 100%; font-size: 12px; line-height: 20px; color: #fff; text-align: center; background-color: #337ab7; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); -webkit-transition: width .6s ease; -o-transition: width .6s ease; transition: width .6s ease;}.progress-striped .progress-bar,.progress-bar-striped { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); -webkit-background-size: 40px 40px; background-size: 40px 40px;}.progress.active .progress-bar,.progress-bar.active { -webkit-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite;}.progress-bar-success { background-color: #5cb85c;}.progress-striped .progress-bar-success { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}.progress-bar-info { background-color: #5bc0de;}.progress-striped .progress-bar-info { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}.progress-bar-warning { background-color: #f0ad4e;}.progress-striped .progress-bar-warning { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}.progress-bar-danger { background-color: #d9534f;}.progress-striped .progress-bar-danger { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}1.9總結
1.通常8種類型樣式，需要組合使用，比如設置active狀態時候還要兼顧顏色和尺寸樣式，設置尺寸又要考慮并列元素的情況，所以從高層往下考慮，考慮需要寫哪幾種樣式。
2.還有就是樣式利用CSS重載覆蓋的概念，注意定義的順序，以免重載順序錯誤。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
