BS3 Medias
簡介
BS3 中的 Media 主要是用來快速產生類似部落格中或社群網站中留言的格式外觀，但其作用不限於此。其基礎類別有二： .media 及 .media-list。.media 一般和 <div> 搭配使用，產生單一的 Media object。.media-list 一般和 <ul> 搭配使用，產生一系列的 media 物件。兩者都可以以巢狀方式存在。Media 的基本結構為一幅圖像（可置於文字的左邊或文字的右邊），一段主題文字，再加上一段敘述性的文字。預設狀態下，圖像的上緣和文字段落的上緣切齊。請參考範例圖。
修飾類別如下：
- .media-middle
- 圖像的中線切齊文字段落的中線。
- .media-bottom
- 圖像的下緣切齊文字段落的下緣。
- .media-left
- 圖像靠左。這裡樣式的設定是將圖像的 padding-right 設定為 10px，而非將圖像移至文字段落的左邊
- .media-right
- 圖像靠右。這裡樣式的設定是將圖像的 padding-left 設定為 10px，而非將圖像移至文字段落的右邊
- .media-heading
- 指定標記內容為主題樣式，般會搭配 <h1> 。。。 <h6> 標記使用。
以下為 BS3 V3.3.6 的 bootstrap.css 樣式表中，有關 .media 類別的定義。
.media {
margin-top: 15px;
}
.media:first-child {
margin-top: 0;
}
.media,
.media-body {
overflow: hidden;
zoom: 1;
}
.media-body {
width: 10000px;
}
.media-object {
display: block;
}
.media-object.img-thumbnail {
max-width: none;
}
.media-right,
.media > .pull-right {
padding-left: 10px;
}
.media-left,
.media > .pull-left {
padding-right: 10px;
}
.media-left,
.media-right,
.media-body {
display: table-cell;
vertical-align: top;
}
.media-middle {
vertical-align: middle;
}
.media-bottom {
vertical-align: bottom;
}
.media-heading {
margin-top: 0;
margin-bottom: 5px;
}
.media-list {
padding-left: 0;
list-style: none;
}
範例
範例中用水平分隔線區分兩個展示，上方一個展示單一的 .media 容器。下方則展示一個 .media-list 的容器，並以巢狀方式顯示三個 media object。範例中的圖像都用 holder.js 工具來產生圖像。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
max-width: 1000px;
padding: 20px;
}
</style>
CSS 中沒有特別需要定義的類別。
HTML
<body>
![Photo_1]()
Subject
Bla, bla, bla . . .
-
Subject
Bla, bla, bla . . .
Subject
Bla, bla, bla . . .
-
Subject
Bla, bla, bla . . .
</body>
第 3~13 行建立一個 .media 的元件。第 17~45 行建立一個 .media-list 的元件。
第 6 行用 .img-circle 的修飾類別，將圖像以圓形呈現。
如果要將圖像呈現在文字段落的右邊，可以將其在 HTML 和式碼中的位置對調即可，或使用 .pull-right 修飾類別以逹到目的。
沒有留言:
張貼留言