BootStrap整體框架之基礎布局組件

更新時間：2016年12月15日 13:23:14 作者：github_34514750

這篇文章主要為大家詳細介紹了BootStrap整體框架之基礎布局組件的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

1 基礎布局組件

在12柵格系統(tǒng)上基礎上，BootStrap還提供了多種基礎布局組件。
CSS組件，總結為8大類型的樣式：
基礎樣式、顏色樣式、尺寸樣式、狀態(tài)樣式、特殊元素樣式、并列元素樣式、嵌套子元素樣式、動畫樣式

1.1基礎樣式

基本樣式，一般包含文本字體，顏色背景，邊框，定位等，如下面警告框：

//源碼
.alert {
 padding: 15px;
 margin-bottom: 20px;
 border: 1px solid transparent;
 border-radius: 4px;
}

1.2顏色樣式

看BootStrap官網(wǎng)的按鈕btn或者alert警告框會發(fā)現(xiàn)許多組件默認的5種顏色樣式：
primary(重點藍)、success(成功綠)、info(信息藍)、warning(警告橙)、danger(危險紅)
http://getbootstrap.com/examples/theme/

定義規(guī)則：組件名稱-顏色類型，比如btn-primary，alert-info

//源碼
.btn-primary {
 color: #fff;
 background-color: #337ab7;
 border-color: #2e6da4;
}

1.3尺寸樣式

BootStrap為大部分組件都提供了尺寸的快捷設置。一般組件包含xs、sm、普通、lg四種尺寸
定義規(guī)則：組件名稱-尺寸，比如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狀態(tài)樣式

高亮可用的時候用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警告框內(nèi)一般有警告標題、內(nèi)容、關閉鏈接元素；nav導航中常用li元素

//源碼
//alert內(nèi)連接的樣式
.alert .alert-link {
 font-weight: bold;
}
//alert內(nèi)p元素和ul元素的底部外邊距設置
.alert > p,
.alert > ul {
 margin-bottom: 0;
}
//兩個段落之間，增加一個段落外邊距
.alert > p + p {
 margin-top: 5px;
}
//增大右內(nèi)邊距，以便關閉按鈕
.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并列元素樣式

很多情況下，一個組件內(nèi)部需要放置多個子元素，比如導航欄nav里放置多個li元素，按鈕組可以放置多個button元素。
一般并列元素考慮：1.水平并列時左右內(nèi)邊距(padding-left padding-right)和外邊距(margin-left margin-right)2.垂直并列時上下內(nèi)邊距(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像素細節(jié)引起的沖突
.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 上會出現(xiàn)一些僅供視覺識別的元素，比如說“漢堡包菜單按鈕”只有視力正常的人才能清楚辨識這些元素的作用。而殘障人士，比如弱勢或盲人是不可能知道這些視覺識別元素是什么的。他們上網(wǎng)使用的是屏幕閱讀器，也就是 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狀態(tài)時候還要兼顧顏色和尺寸樣式，設置尺寸又要考慮并列元素的情況，所以從高層往下考慮，考慮需要寫哪幾種樣式。
2.還有就是樣式利用CSS重載覆蓋的概念，注意定義的順序，以免重載順序錯誤。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js 效率組裝字符串 StringBuffer
js 效率組裝字符串,主要是利用了數(shù)組原理。
2009-12-12
js 實現(xiàn) list轉(zhuǎn)換成tree的方法示例（數(shù)組到樹）
這篇文章主要介紹了js 實現(xiàn) list轉(zhuǎn)換成tree的方法示例（數(shù)組到樹），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-08-08
javascript計時器編寫過程與實現(xiàn)方法
這篇文章主要為大家詳細介紹了javascript計時器編寫過程與實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-02-02
TypeScript類型推論與類型斷言實例詳解
如果沒有明確的指定類型,那么TypeScript會依照類型推論（Type Inference）的規(guī)則推斷出一個類型,下面這篇文章主要給大家介紹了關于TypeScript類型推論與類型斷言的相關資料,需要的朋友可以參考下
2022-11-11
js變量值傳到php過程詳解將php解析成數(shù)據(jù)
這篇文章主要介紹了js變量值傳到php過程詳解將php解析成數(shù)據(jù)，傳參數(shù)去后臺，用ajax，或者原生js方式拼接url。明白原理，洞悉系統(tǒng)是先解析php，再執(zhí)行html代碼和js代碼。,需要的朋友可以參考下
2019-06-06
Bootstrap學習筆記之css樣式設計(1)
這篇文章主要為大家詳細介紹了bootstrap學習筆記之css樣式設計，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-06-06
使用typescript+webpack構建一個js庫的示例詳解
這篇文章主要介紹了typescript+webpack構建一個js庫,本文主要記錄使用typescript配合webpack打包一個javascript library的配置過程，需要的朋友可以參考下
2022-07-07
微信小程序表單彈窗實例
這篇文章主要為大家詳細介紹了微信小程序表單彈窗實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-07-07
javascript遍歷對象的五種方式實例代碼
在我們?nèi)粘９ぷ鬟^程中,我們對于javaScript遍歷對象、數(shù)組的操作是十分的頻繁的,這篇文章主要給大家介紹了關于javascript遍歷對象的五種方式,需要的朋友可以參考下
2021-10-10
Bootstrap學習筆記輪播（Carousel）插件
Bootstrap 輪播（Carousel）插件是一種靈活的響應式的向站點添加滑塊的方式。這篇文章主要介紹了Bootstrap學習筆記輪播（Carousel）插件,需要的朋友可以參考下
2017-03-03