BS3 Panels
簡介
Panel 的意思是「面板」或「儀錶板」。在 BS3 中 .panel 的 CSS 基礎類別構建了一個相當獨立的介面元件，.panel 可以依需求具有 .panel-heading, .panel-body, .panel-footer 及 .panel-title 等子元件，各子元件間又可以包含各種不同的子元件，幾乎等於一個小型的 HTML 架構。在這樣一個架構下，可以大到類似形成一個主題的子網站，也可以小到單純的一個小廣告。還可以用 .panel-group 將數個 .panel 元件包住，讓 .panel 元件形成一個群組，.panel-group 會修改一些樣式定義中 margin-* 的定義值，讓 .panel 元件能靠得稍微近些，比較像個群組。這個元件可以運用的層面相當廣泛，得有點創意就是了。
若要改變 panel 的顏色，有下列的修飾類別可供選擇，這些類別只會修飾 .panel-heading 的底色和字體的顏色，以及邊框的顏色。.panel-body 及 .panel-footer 都保持預設的樣式。
- .panel-default
- .panel-primary
- .panel-success
- .panel-info
- .panel-warning
- .panel-danger
以下為 BS3 v3.3.6 之 bootstrap.css 中一小部份有關 .panel 及其相關的樣式定義，由於相關的樣式定義實在太多，為節省篇幅，其它部部份只好省略，有必要時，還是得開啟 bootstrap.css 檔案，作進一步的瞭解。
.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 {
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,
.panel-title > small,
.panel-title > .small,
.panel-title > small > a,
.panel-title > .small > 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-group {
margin-bottom: 20px;
}
.panel-group .panel {
margin-bottom: 0;
border-radius: 4px;
}
.panel-group .panel + .panel {
margin-top: 5px;
}
範例
範例中展示了二個 .panel 元件，第一個很一般，就是一個很簡單完全使用預設值的元件。第二個修改了底色，在點按 .panel-heading 元件時，會在展開及收納其它元件的兩個模式中切換。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
max-width:1000px;
padding:20px;
}
</style>
CSS 中沒有特別的設定。
HTML
<body>
Panel Title
Panel Body
Contact Info
Contact detail information.
</body>
第 2 行，建立一個 .panel-group，裡面包含二個 .panel 元件。
第 3 行，的 .panel 元件採用 .panel-default 的樣式。具有 .panel-heading, .panel-body, 及 .panel-footer 等子元件。
第 12 行， .panel 元件採用 .panel-info 的樣式。只有 .panel-heading 及 .panel-body 兩個子元件
第 14 行， 自訂屬性 data-toggle 的值必須設定為 "collapse"，這是設定此元件作為展開及收納的切換開關。 href 的值必須指定要收納區塊所設定 id 值；也就是第 16 行中所定的 id 值。
第 16 行，用一個 .panel-collapse 的容器將 .panel-body 元件納入，讓 .panel-body 子元件可以展開及收納。.collapse 指定要用 BS3 的 collapse 的插件； .in 是展開的狀態。
沒有留言:
張貼留言