Bootstrap组件 - Well

.well 用在元素上,就能有嵌入的简单效果。

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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,679评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,935评论 25 709
  • FreeCodeCamp - Responsive Design with Bootstrap Use Respo...
    付林恒阅读 7,521评论 0 8
  • 生活一旦放纵一段时间,哪怕只是一天,生活对你的惩罚也会在以后归还给你。我不知道别人是否放纵得起,但我放纵不起,放纵...
    丛中笑笑生阅读 2,472评论 0 0
  • 最近无所事事,一点都不忙,闲的蛋疼。 今天回来的路上想明白了两个问题:房子和工作 房子呢,不一定买在市区,或者本来...
    东平陵县令阅读 936评论 0 0