您的位置：首页 > Web前端 > BootStrap

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

2017-09-04 22:32 363 查看
    组件最后一篇就不写目录了，都比较简单，我们下来讲讲什么是具有响应式的情如内容。

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

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



 ok,示例代码

1
<!DOCTYPE html>
2
<html>
3
<head lang="en">
4
   <meta charset="UTF-8">
5
   <title>组件</title>
6
   <!--引入bootstrap样式文件-->
7
   <link href="css/bootstrap.min.css" rel="stylesheet">
8
   <!--引入jq（必须在bootstrap.min.js文件之前）-->
9
   <script type="application/javascript" src="js/jquery-3.2.0.js"></script>
10
   <!--引入bootstrap js-->
11
   <script type="application/javascript" src="js/bootstrap.min.js"></script>
12
13
</head>
14
<body style="margin: 60px">
15
16
<div class="panel panel-success">
17
   <div class="panel-heading">
18
       响应式小视频
19
   </div>
20
   <div class="panel-body">
21
       <div class="embed-responsive embed-responsive-16by9">
22
23
           <embed class="embed-responsive-item" src="//player.youku.com/embed/XMjY3MzgzODg0">
24
25
           </embed>
26
       </div>
27
   </div>
28
</div>
29
</body>
30
</html>
    其中视频来之闲心的layui前端框架教程，有兴趣的伙伴也可以学习一下他的前端框架，地址：http://www.layui.com/doc/

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



 照旧是示例代码：



1

<!DOCTYPE html>


2

<html>


3

<head lang="en">


4

   <meta charset="UTF-8">


5

   <title>组件</title>


6

   <!--引入bootstrap样式文件-->


7

   <link href="css/bootstrap.min.css" rel="stylesheet">


8

   <!--引入jq（必须在bootstrap.min.js文件之前）-->


9

   <script type="application/javascript" src="js/jquery-3.2.0.js"></script>


10

   <!--引入bootstrap js-->


11

   <script type="application/javascript" src="js/bootstrap.min.js"></script>


12



13

</head>


14

<body style="margin: 60px">


15



16

<div class="panel panel-success">


17

   <div class="panel-heading">


18

       well


19

   </div>


20

   <div class="panel-body">


21



22

       <div class="well">


23

           如果爱情不如此悲伤，我想我不会禁足观望；像每个秋冬飘落那样，纵贯梧桐红枫的坠向。如果爱情不如此悲伤，我想我可以营造天堂；


24

           不大的小屋阳光荡漾，天使永不折翼的飞翔。三生情殇，流沙而逝，一生情缘，只为伊人而憔悴。


25

       </div>


26



27

       <div class="well well-sm">


28

           如果爱情不如此悲伤，我想我不会禁足观望；像每个秋冬飘落那样，纵贯梧桐红枫的坠向。如果爱情不如此悲伤，我想我可以营造天堂；


29

           不大的小屋阳光荡漾，天使永不折翼的飞翔。三生情殇，流沙而逝，一生情缘，只为伊人而憔悴。


30

       </div>


31



32

       <div class="well well-lg">


33

           如果爱情不如此悲伤，我想我不会禁足观望；像每个秋冬飘落那样，纵贯梧桐红枫的坠向。如果爱情不如此悲伤，我想我可以营造天堂；


34

           不大的小屋阳光荡漾，天使永不折翼的飞翔。三生情殇，流沙而逝，一生情缘，只为伊人而憔悴。


35

       </div>


36

   </div>


37

</div>


38

</body>


39

</html>


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

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                bootstrap
                                                响应式
                                                well
                                                video
                                                embed
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航