亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Bootstrap源碼解讀媒體對象、列表組和面板(10)

 更新時間:2016年12月26日 09:32:01   作者:藝術就是爆炸  
這篇文章主要源碼解讀了Bootstrap媒體對象、列表組和面板,具有一定的參考價值,感興趣的小伙伴們可以參考一下

媒體對象

基礎媒體對象

例如:

<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基礎教程 專題中,歡迎點擊學習。

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

相關文章

最新評論