Bootstrap元件 - Well

weixin_34393428發表於2017-06-16
boot元件

把 .well 用在元素上，就能有嵌入的簡單效果。

1683603-16d03db353caf5bf.png
well
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="Resource-type" content="Document"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>元件-嵌入內容</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <style>
        <!--
        .line{border-top:1px solid #afd9ee;margin:20px 0;}
        -->
    </style>
</head>
<body>
<div class="container">
    <!--不需要為 <iframe> 元素設定 frameborder="0" 屬性-->
    <div class="row">
        <div class="col-xs-6">
            <div class="embed-responsive embed-responsive-16by9">
                <iframe src="Assembly-Button.html" class="embed-responsive-item"></iframe>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="embed-responsive embed-responsive-4by3">
                <iframe src="Assembly-Nav.html" class="embed-responsive-item"></iframe>
            </div>
        </div>
    </div>
    <div class="line"></div>
    <!--well-->
    <div class="well">文字背景顯示會有內嵌的效果</div>
    <div class="well well-lg">well-lg</div>
    <div class="well well-sm">well-sm</div>
</div>

</body>
</html>

相關文章