BootStrap整體框架之基礎(chǔ)布局組件
1 基礎(chǔ)布局組件
在12柵格系統(tǒng)上基礎(chǔ)上,BootStrap還提供了多種基礎(chǔ)布局組件。
CSS組件,總結(jié)為8大類型的樣式:
基礎(chǔ)樣式、顏色樣式、尺寸樣式、狀態(tài)樣式、特殊元素樣式、并列元素樣式、嵌套子元素樣式、動(dòng)畫樣式
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)畫樣式
動(dòng)畫樣式在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)一些僅供視覺識(shí)別的元素,比如說“漢堡包菜單按鈕”只有視力正常的人才能清楚辨識(shí)這些元素的作用。而殘障人士,比如弱勢(shì)或盲人是不可能知道這些視覺識(shí)別元素是什么的。他們上網(wǎng)使用的是屏幕閱讀器,也就是 screen reader(sr),屏幕閱讀器需要找到能辨識(shí)的文本說明然后“讀”出來給用戶聽。
//源碼 .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è)置尺寸又要考慮并列元素的情況,所以從高層往下考慮,考慮需要寫哪幾種樣式。
2.還有就是樣式利用CSS重載覆蓋的概念,注意定義的順序,以免重載順序錯(cuò)誤。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- BootStrap table表格插件自適應(yīng)固定表頭(超好用)
- Markdown+Bootstrap圖片自適應(yīng)屬性詳解
- Markdown與Bootstrap相結(jié)合實(shí)現(xiàn)圖片自適應(yīng)屬性
- 使用jQuery和Bootstrap實(shí)現(xiàn)多層、自適應(yīng)模態(tài)窗口
- Bootstrap頁面布局基礎(chǔ)知識(shí)全面解析
- bootstrap配合Masonry插件實(shí)現(xiàn)瀑布式布局
- BootStrap學(xué)習(xí)系列之布局組件(下拉,按鈕組[toolbar],上拉)
- Bootstrap表單布局
- Bootstrap 布局組件(全)
- bootstrap實(shí)現(xiàn)的自適應(yīng)頁面簡(jiǎn)單應(yīng)用示例
相關(guān)文章
js 實(shí)現(xiàn) list轉(zhuǎn)換成tree的方法示例(數(shù)組到樹)
這篇文章主要介紹了js 實(shí)現(xiàn) list轉(zhuǎn)換成tree的方法示例(數(shù)組到樹),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08javascript計(jì)時(shí)器編寫過程與實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了javascript計(jì)時(shí)器編寫過程與實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02js變量值傳到php過程詳解 將php解析成數(shù)據(jù)
這篇文章主要介紹了js變量值傳到php過程詳解 將php解析成數(shù)據(jù),傳參數(shù)去后臺(tái),用ajax,或者原生js方式拼接url。明白原理,洞悉系統(tǒng)是先解析php,再執(zhí)行html代碼和js代碼。,需要的朋友可以參考下2019-06-06Bootstrap學(xué)習(xí)筆記之css樣式設(shè)計(jì)(1)
這篇文章主要為大家詳細(xì)介紹了bootstrap學(xué)習(xí)筆記之css樣式設(shè)計(jì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06使用typescript+webpack構(gòu)建一個(gè)js庫的示例詳解
這篇文章主要介紹了typescript+webpack構(gòu)建一個(gè)js庫,本文主要記錄使用typescript配合webpack打包一個(gè)javascript library的配置過程,需要的朋友可以參考下2022-07-07javascript遍歷對(duì)象的五種方式實(shí)例代碼
在我們?nèi)粘9ぷ鬟^程中,我們對(duì)于javaScript遍歷對(duì)象、數(shù)組的操作是十分的頻繁的,這篇文章主要給大家介紹了關(guān)于javascript遍歷對(duì)象的五種方式,需要的朋友可以參考下2021-10-10Bootstrap學(xué)習(xí)筆記 輪播(Carousel)插件
Bootstrap 輪播(Carousel)插件是一種靈活的響應(yīng)式的向站點(diǎn)添加滑塊的方式。這篇文章主要介紹了Bootstrap學(xué)習(xí)筆記 輪播(Carousel)插件,需要的朋友可以參考下2017-03-03