Bootstrap源碼解讀媒體對象、列表組和面板(10)
媒體對象
基礎媒體對象
例如:
<div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/350x150" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">系列:十天精通CSS3</h4> <div>全方位深刻詳解CSS3模塊知識,經(jīng)典案例分析,代碼同步調試,讓網(wǎng)頁穿上絢麗裝備!</div> </div> </div>
實現(xiàn)原理只是設置他們之間的間距。
媒體對象的嵌套
只需要將另一個媒體對象結構放置在媒體對象的主體“media-body”內即可。
媒體對象列表
使用ul,并且在ul上添加類名“media-list”,而在li上使用類名“media”即可。
媒體對象列表只是把列表的左間距置0以及去掉了項目列表符號,實現(xiàn)源碼如下:
.media-list { padding-left: 0; list-style: none; }
列表組
基礎列表組
基礎列表組主要包括兩個部分:
list-group:列表組容器,常用的是ul元素,也可以是ol或者div元素
list-group-item:列表項,常用的是li元素,也可以是div元素
例如:
<ul class="list-group"> <li class="list-group-item">111</li> <li class="list-group-item">222</li> <li class="list-group-item">333</li> </ul>
主要設置了其間距,邊框和圓角。實現(xiàn)源碼如下:
.list-group { padding-left: 0; margin-bottom: 20px; } .list-group-item { position: relative; display: block; padding: 10px 15px; margin-bottom: -1px; background-color: #fff; border: 1px solid #ddd; } .list-group-item:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } .list-group-item:last-child { margin-bottom: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; }
帶徽章的列表組
其實就是將徽章組件和基礎列表組結合在一起。只需要在“l(fā)ist-group-item”中添加徽章組件“badge”即可。例如:
<ul class="list-group"> <li class="list-group-item"> <span class="badge">2</span>列表項1 </li> <li class="list-group-item"> <span class="badge">3</span>列表項2 </li> <li class="list-group-item"> <span class="badge">4</span>列表項3 </li> </ul>
實現(xiàn)原理就是給徽章設置了一個右浮動,如果有兩個徽章同時在一個列表項中出現(xiàn)時,設置了他們之間的距離。實現(xiàn)源碼如下:
.list-group-item > .badge { float: right; } .list-group-item > .badge + .badge { margin-right: 5px; }
帶鏈接的列表組
要讓列表組帶鏈接,我們可以給列表項的文本添加鏈接<a>標簽,然后增加style=”display: block”使整行可點擊。例如:
<ul class="list-group"> <li class="list-group-item"> <a href="##" style="display: block">111</a> </li> <li class="list-group-item"> <a href="##" style="display: block">222</a> </li> <li class="list-group-item"> <a href="##" style="display: block">333</a> </li> </ul>
不過Bootstrap有另外的實現(xiàn)方式,就是把ul.list-group使用div.list-group來替換,而li.list-group-item直接用a.list-group-item來替換。例如:
<div class="list-group"> <a href="##" class="list-group-item">列表項1</a> <a href="##" class="list-group-item">列表項2</a> <a href="##" class="list-group-item">列表項3</a> </div>
主要是給文本去掉了下劃線,增加懸浮效果。實現(xiàn)源碼如下:
a.list-group-item { color: #555; } a.list-group-item .list-group-item-heading { color: #333; } a.list-group-item:hover, a.list-group-item:focus { color: #555; text-decoration: none; background-color: #f5f5f5; }
自定義列表組
在鏈接列表組的基礎上新增了兩個樣式:
list-group-item-heading:用來定義列表項頭部樣式
list-group-item-text:用來定義列表項主要內容
例如:
<div class="list-group"> <a href="##" class="list-group-item"> <h4 class="list-group-item-heading">標題1</h4> <p class="list-group-item-text">內容1內容1內容1</p> </a> <a href="##" class="list-group-item"> <h4 class="list-group-item-heading">標題2</h4> <p class="list-group-item-text">內容2內容2內容2</p> </a> </div>
實現(xiàn)源碼如下:
a.list-group-item .list-group-item-heading { color: #333; } .list-group-item.disabled .list-group-item-heading, .list-group-item.disabled:hover .list-group-item-heading, .list-group-item.disabled:focus .list-group-item-heading { color: inherit; } .list-group-item.disabled .list-group-item-text, .list-group-item.disabled:hover .list-group-item-text, .list-group-item.disabled:focus .list-group-item-text { color: #777; } .list-group-item.active .list-group-item-heading, .list-group-item.active:hover .list-group-item-heading, .list-group-item.active:focus .list-group-item-heading, .list-group-item.active .list-group-item-heading > small, .list-group-item.active:hover .list-group-item-heading > small, .list-group-item.active:focus .list-group-item-heading > small, .list-group-item.active .list-group-item-heading > .small, .list-group-item.active:hover .list-group-item-heading > .small, .list-group-item.active:focus .list-group-item-heading > .small { color: inherit; } .list-group-item.active .list-group-item-text, .list-group-item.active:hover .list-group-item-text, .list-group-item.active:focus .list-group-item-text { color: #e1edf7; } .list-group-item-heading { margin-top: 0; margin-bottom: 5px; } .list-group-item-text { margin-bottom: 0; line-height: 1.3; }
列表項的狀態(tài)設置
在對應的列表項中添加類名“active/disabled”即可。
彩色列表組
在“l(fā)ist-group-item”基礎上增加對應的類名即可:
list-group-item-success:成功綠
list-group-item-info:信息藍
list-group-item-warning:警告黃
list-group-item-danger:錯誤紅
實現(xiàn)原理其實僅僅是修改了背景、文本和邊框的顏色而已。
面板
基礎面板
基礎面板就是div容器運用了“panel”樣式,產(chǎn)生一個具有邊框的文本顯示塊,然后在里面添加了一個“div.panel-body”來放置面板主體內容。由于“panel”不控制主題顏色,所以我們在“panel”的基礎上增加一個控制顏色的主題“panel-default”。例如:
<div class="panel panel-default"> <div class="panel-body">基礎面板</div> </div>
實現(xiàn)源碼如下:
.panel { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); box-shadow: 0 1px 1px rgba(0, 0, 0, .05); } .panel-body { padding: 15px; }
面板的頭和尾
使用panel-heading和panel-footer即可。例如:
<div class="panel panel-default"> <div class="panel-heading">頭部內容</div> <div class="panel-body正文內容</div> <div class="panel-footer">尾部內容</div> </div>
實現(xiàn)源碼如下:
.panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; } .panel-heading > .dropdown .dropdown-toggle { color: inherit; } .panel-title { margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .panel-title > a { color: inherit; } .panel-footer { padding: 10px 15px; background-color: #f5f5f5; border-top: 1px solid #ddd; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; }
彩色面板
面板組件除了默認的主題樣式panel-default之外,還有以下幾種彩色主題樣式:
panel-primary:重點藍
panel-success:成功綠
panel-info:信息藍
panel-warning:警告黃
panel-danger:危險紅
例如:<div class="panel panel-primary">…</div>
面板中嵌套表格
例如:
<div class="panel panel-primary"> <div class="panel-heading">這里是標題</div> <div class="panel-body"> <p>這里是正文</p> </div> <table class="table table-bordered"> <thead> <tr> <th>表頭1</th> <th>表頭2</th> <th>表頭3</th> </tr> </thead> <tbody> <tr> <td>表內容1</td> <td>表內容2</td> <td>表內容3</td> </tr> </tbody> </table> <div class="panel-footer">這里是尾巴</div> </div>
我們這里吧table放在和panel-body平級的地方。把table放在panel-body里面也可以,不過由于panel-body設置了一個padding:15px的值,所以那樣的話表格和面板邊緣會有一點間距,不太好看。
面板中嵌套列表組
例如:
<div class="panel panel-primary"> <div class="panel-heading">這里是標題</div> <div class="panel-body"> <p>這里是正文</p> </div> <ul class="list-group"> <li class="list-group-item">列表項1</li> <li class="list-group-item">列表項2</li> <li class="list-group-item">列表項3</li> </ul> <div class="panel-footer">這里是尾巴</div> </div>
本文系列教程整理到:Bootstrap基礎教程 專題中,歡迎點擊學習。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
js 數(shù)組實現(xiàn)一個類似ruby的迭代器
今天突然發(fā)現(xiàn)js的數(shù)組處理起來真是麻煩,代碼一些就是一大堆,相比起ruby的迭代器來真是遜色不少。2009-10-10微信小程序實現(xiàn)動態(tài)設置placeholder提示文字及按鈕選中/取消狀態(tài)的方法
這篇文章主要介紹了微信小程序實現(xiàn)動態(tài)設置placeholder提示文字及按鈕選中/取消狀態(tài)的方法,涉及事件綁定及this.setData動態(tài)設置屬性數(shù)據(jù)的相關操作技巧,需要的朋友可以參考下2017-12-12微信小程序實現(xiàn)導航欄和內容上下聯(lián)動功能代碼
這篇文章主要介紹了微信小程序實現(xiàn)導航欄和內容上下聯(lián)動功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06