1. 程式人生 > >BootStrap-CSS樣式_佈局元件_Well

BootStrap-CSS樣式_佈局元件_Well

Well

1.Well是一種會引起內容凹陷顯示或插圖效果的容器 <div>

2.建立 Well,只需要簡單地把內 容放在帶有 class .well 的 <div> 中即可

尺寸大小
使用可選類 well-lg 或 well-sm 來改變 Well 的尺寸大小。這兩個類是與 .well 類結合使用 的。這兩個類會影響內邊距(padding),根據使用的類,Well 會顯示得更大或者更小

程式碼例項:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Well</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body style="padding:50px;">
    <!-- 
    .well-lg:大Well
    .well-md:小Well
    -->
    <h4>.well-lg:預設</h4>
    <div class="well">您好,我是BootStrip 預設Well!</div>

    <h4>.well-lg:大Well,預設</h4>
    <div class="well well-lg">您好,我是BootStrip 大Well!</div>
    
    <h4>.well-md:小Well</h4>
    <div class="well well-sm">您好,我是BootStrip 小Well!</div>

    <script src="../js/jquery-1.11.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</body>
</html>

顯示效果: