欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

BootStrap整體框架之基礎(chǔ)布局組件

 更新時(shí)間：2016年12月15日 13:23:14   作者：github_34514750  
這篇文章主要為大家詳細(xì)介紹了BootStrap整體框架之基礎(chǔ)布局組件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

1 基礎(chǔ)布局組件

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

1.1基礎(chǔ)樣式

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

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

1.2顏色樣式

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

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

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

1.3尺寸樣式

BootStrap為大部分組件都提供了尺寸的快捷設(shè)置。一般組件包含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)樣式

高亮可用的時(shí)候用active樣式，禁用的時(shí)候用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)一般有警告標(biāo)題、內(nèi)容、關(guān)閉鏈接元素；nav導(dǎo)航中常用li元素

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

很多情況下，一個(gè)組件內(nèi)部需要放置多個(gè)子元素，比如導(dǎo)航欄nav里放置多個(gè)li元素，按鈕組可以放置多個(gè)button元素。
一般并列元素考慮：1.水平并列時(shí)左右內(nèi)邊距(padding-left padding-right)和外邊距(margin-left margin-right)2.垂直并列時(shí)上下內(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嵌套子元素樣式

需要將兩個(gè)相同或不同的組件嵌套在一起使用，這時(shí)會(huì)有特殊情況，比如，多個(gè)按鈕組在一起使用，或者按鈕和下拉菜單一起使用。

需要考慮嵌套元素的使用情況。比如多個(gè)分組按鈕一起使用的時(shí)候，需要考慮浮動(dòng)方向和間距

//源碼
//消除2個(gè)按鈕(或一個(gè)按鈕和另外一個(gè)按鈕組)之間的1像素細(xì)節(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動(dòng)畫(huà)樣式

動(dòng)畫(huà)樣式在BootStrap中的進(jìn)度條progress組件中才使用到。

<div class="progress">
 <div class="progress-bar" style="width:45%">
  <span class="sr-only">45% complete</span>
 </div>
</div>

注意用.progress是總進(jìn)度條，progress-bar是進(jìn)度條顯示的部分，還有五種顏色progress-bar-success等
sr-only，全稱是 screen reader only（僅供）屏幕閱讀器有時(shí)候 UI 上會(huì)出現(xiàn)一些僅供視覺(jué)識(shí)別的元素，比如說(shuō)“漢堡包菜單按鈕”只有視力正常的人才能清楚辨識(shí)這些元素的作用。而殘障人士，比如弱勢(shì)或盲人是不可能知道這些視覺(jué)識(shí)別元素是什么的。他們上網(wǎng)使用的是屏幕閱讀器，也就是 screen reader（sr），屏幕閱讀器需要找到能辨識(shí)的文本說(shuō)明然后“讀”出來(lái)給用戶聽(tīng)。

//源碼
.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總結(jié)

1.通常8種類型樣式，需要組合使用，比如設(shè)置active狀態(tài)時(shí)候還要兼顧顏色和尺寸樣式，設(shè)置尺寸又要考慮并列元素的情況，所以從高層往下考慮，考慮需要寫(xiě)哪幾種樣式。
2.還有就是樣式利用CSS重載覆蓋的概念，注意定義的順序，以免重載順序錯(cuò)誤。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論