BS3 Wells
簡介
在 BS3 中，.well 這個 CSS 基礎類別所提供的功能再簡單不過了，主要就是提供一個簡單的方式，在一段文章中插入一小段比較突顯的文字，如此而己。有時會和 <blockquote> 標記一起使用，標示文章中引言的文字段落。Well 的外觀就是一個深灰色的外框，加上淺灰的底色。只有二個修飾類別 well-sm (small) 及 well-lg (large)。稍為特別的是這二個修飾類別只會改變留白的寬度及圓角的大小，並不會改變元件字體的大小。由下列的樣式表可以很清楚的看出差別所在。
以下為 BS3 v3.3.6 之 bootstrap.css 樣式表中，.well 相關類別的樣式設定。
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.well blockquote {
border-color: #ddd;
border-color: rgba(0, 0, 0, .15);
}
.well-lg {
padding: 24px;
border-radius: 6px;
}
.well-sm {
padding: 9px;
border-radius: 3px;
}
範例
範例中展示了不同尺寸的 well 元件，最後一個和 <blockquote> 配合使用，顯示其在流覽器中呈現的外觀。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
max-width:1000px;
padding:20px;
}
</style>
CSS 中沒有特別的樣式定義。
HTML
<body>
Small well.
Default size.
Large well.
A Quote from other article.
</body>
最後一個 well 元件，搭配 <blockquote> 使用。
沒有留言:
張貼留言