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重載覆蓋的概念，注意定義的順序，以免重載順序錯誤。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。