BS3 Jumbotron
簡介
Jumbotron 就是個「大型看板」，在網頁中很容易吸引使用者的目光。看板中通常放著企業的願景、標語或是公司主力產品的相片等等。BS3 中的 CSS 容器類別 .jumbotron 可以產生這種大型看板。.jumbotron 可以容納各種不同的介面元件，一般都會佔據流覽器的全寬。.jumbotron 本身的樣式沒有定義 width 及 height 兩個屬性值；box-sizing 屬性值則預設為 content-box，因此其尺寸以內容所佔據的大小為準，所以常在其中加入 .container-* (.container / .container-fluid) 容器，將寬度擴張到流覽器的全寬；有時也會將 .jumbotron 置於 .container-* 之中，兩種作法會產生不同的外觀效果。最好親手試一下，觀察有何不同。沒有標準作法，全視需要而定。
以下為 BS3 v3.3.6 的 bootstrap.css 樣式表中，有關 .jumbotron 及其相關之樣式定義，其中有用到媒體查詢 (media query) 的語法，在螢幕寬度等於及大於 small 的尺寸時，會自行調整 .jumbotron 的週邊留白和字體的大小。
.jumbotron {
padding-top: 30px;
padding-bottom: 30px;
margin-bottom: 30px;
color: inherit;
background-color: #eee;
}
.jumbotron h1,
.jumbotron .h1 {
color: inherit;
}
.jumbotron p {
margin-bottom: 15px;
font-size: 21px;
font-weight: 200;
}
.jumbotron > hr {
border-top-color: #d5d5d5;
}
.container .jumbotron,
.container-fluid .jumbotron {
padding-right: 15px;
padding-left: 15px;
border-radius: 6px;
}
.jumbotron .container {
max-width: 100%;
}
@media screen and (min-width: 768px) {
.jumbotron {
padding-top: 48px;
padding-bottom: 48px;
}
.container .jumbotron,
.container-fluid .jumbotron {
padding-right: 60px;
padding-left: 60px;
}
.jumbotron h1,
.jumbotron .h1 {
font-size: 63px;
}
}
範例
範例中展示了二個 .jumbotron 的例子，第一個修改了底色和字體的顏色。第二個則以一張圖片作為背景，也修改了字體的顏色。.jumbotron 的預設底色為淺灰色，字體為黑色，為了讓這個大型看板在文章中顯得更突出以吸引目光，通常都會改變其底色或以相片做為背景，再改變字體的顏色作為搭配。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
max-width: 1000px;
padding: 20px;
}
#demo1.jumbotron {
background-color: coral;
color: white;
}
#demo2.jumbotron {
background: url("images/flower.jpg");
color: white;
}
</style>
#demo1.jumbotron{} 展示如何修改 .jumbotron 的底色，為了不影響到另一個 .jumbotron 的設定，為容器加上了不同的 id 值做為區分。#demo2.jumbotron{} 則以相片做為背景。
HTML
<body>
My Jumbotron
Think BIG with a Bootstrap Jumbotron!
My Jumbotron
Think BIG with a Bootstrap Jumbotron!
</body>
HTML 中建立了二個 .jumbotron，第一個在內容中加入了水平分隔線及一個大型按鈕。
把第 2 行和第 3 行的容器位置互換，可以產生不同的外觀。
沒有留言:
張貼留言