Bootstrap组件学习笔记（八）——具有响应式的嵌入内容和well

最新推荐文章于 2022-08-25 12:18:24 发布

小巷下起了雨

最新推荐文章于 2022-08-25 12:18:24 发布

阅读量1.3k

点赞数

分类专栏： front-end(bootstrap) 文章标签： bootstrap 响应式 well video embed

本文链接：https://blog.csdn.net/qq_28057577/article/details/77843237

版权

front-end(bootstrap) 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

组件最后一篇就不写目录了，都比较简单，我们下来讲讲什么是具有响应式的情如内容。

所谓响应式嵌入式内容就是根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定视频或 slideshow（幻灯片）的尺寸，能够在各种设备上缩放。简单讲就是确定视频或者幻灯片的长宽比，然后浏览器根据更具不同的设备进行等比例缩放。

我们先来看一下响应式视频的效果：

ok,示例代码

 
     
   
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>组件</title>
    <!--引入bootstrap样式文件-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--引入jq（必须在bootstrap.min.js文件之前）-->
    <script type="application/javascript" src="js/jquery-3.2.0.js"></script>
    <!--引入bootstrap js-->
    <script type="application/javascript" src="js/bootstrap.min.js"></script>
</head>
<body style="margin: 60px">
<div class="panel panel-success">
    <div class="panel-heading">
        响应式小视频
    </div>
    <div class="panel-body">
        <div class="embed-responsive embed-responsive-16by9">
            <embed class="embed-responsive-item" src="//player.youku.com/embed/XMjY3MzgzODg0">
            </embed>
        </div>
    </div>
</div>
</body>
</html>

其中视频来之闲心的layui前端框架教程，有兴趣的伙伴也可以学习一下他的前端框架，地址： http://www.layui.com/doc/

接下来是well组件，well组件应用场景在于引入某段文字或者其他。接下来是well的示例效果图：

照旧是示例代码：

 
      
    
 
           
         
 
         
 
          
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>组件</title>
    <!--引入bootstrap样式文件-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--引入jq（必须在bootstrap.min.js文件之前）-->
    <script type="application/javascript" src="js/jquery-3.2.0.js"></script>
    <!--引入bootstrap js-->
    <script type="application/javascript" src="js/bootstrap.min.js"></script>
</head>
<body style="margin: 60px">
<div class="panel panel-success">
    <div class="panel-heading">
        well
    </div>
    <div class="panel-body">
        <div class="well">
            如果爱情不如此悲伤，我想我不会禁足观望；像每个秋冬飘落那样，纵贯梧桐红枫的坠向。如果爱情不如此悲伤，我想我可以营造天堂；
            不大的小屋阳光荡漾，天使永不折翼的飞翔。三生情殇，流沙而逝，一生情缘，只为伊人而憔悴。
        </div>
        <div class="well well-sm">
            如果爱情不如此悲伤，我想我不会禁足观望；像每个秋冬飘落那样，纵贯梧桐红枫的坠向。如果爱情不如此悲伤，我想我可以营造天堂；
            不大的小屋阳光荡漾，天使永不折翼的飞翔。三生情殇，流沙而逝，一生情缘，只为伊人而憔悴。
        </div>
        <div class="well well-lg">
            如果爱情不如此悲伤，我想我不会禁足观望；像每个秋冬飘落那样，纵贯梧桐红枫的坠向。如果爱情不如此悲伤，我想我可以营造天堂；
            不大的小屋阳光荡漾，天使永不折翼的飞翔。三生情殇，流沙而逝，一生情缘，只为伊人而憔悴。
        </div>
    </div>
 
           
</div>
</body>
</html>
 
     

bootstrap的组件就简单学习到这里，接下来我会对bootstrap的

小巷下起了雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap组件学习笔记（八）——具有响应式的嵌入内容和well

组件最后一篇就不写目录了，都比较简单，我们下来讲讲什么是具有响应式的情如内容。所谓响应式嵌入式内容就是根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定视频或 slideshow（幻灯片）的尺寸，能够在各种设备上缩放。简单讲就是确定视频或者幻灯片的长宽比，然后浏览器根据更具不同的设备进行等比例缩放。我们先来看一
复制链接

扫一扫

专栏目录