Bootstrap入門（十六）組件10：well和具有響應式特性的嵌入內容

Bootstrap入門（十六）組件10：well和具有響應式特性的嵌入內容

well組件可以為內容增添一種切入效果。

具有響應式特性的嵌入內容可以根據被嵌入內容的外部容器的寬度，自動創建一個固定的比例，從而讓瀏覽器自動確定視頻或 slideshow 的尺寸，能夠在各種設備上縮放。

這些規則被直接應用在 <iframe>、<embed>、<video> 和 <object> 元素上。如果你希望讓最終樣式與其他屬性相匹配，還可以明確地使用一個派生出來的 .embed-responsive-item 類。常用的有16:9   4:3

1.具有響應式特性的嵌入內容

2.well組件

 

1.具有響應式特性的嵌入內容

先引入本地的CSS文件

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

先創建具有響應式特性的嵌入內容

在容器div里面創建一個class為embed-responsive的div，還要指定是16:9還是4:3

　　　　　　　　　<div class="container">
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe class="embed-responsive-item" src="https://www.baidu.com/"></iframe>
                    </div>
                </div>

在瀏覽器最大化的時候啃效果不明顯，我們來縮放下瀏覽器，效果就明顯很多（在瀏覽器內出了上下，左右滾動的滾動條，保持16:9）

換成4:3，效果明顯不同了

　　　　　　　　　　<div class="container">
                    <div class="embed-responsive embed-responsive-4by3">
                        <iframe class="embed-responsive-item" src="https://www.baidu.com/"></iframe>
                    </div>
                 </div>

2.well組件

 well組件可以為內容增添一種切入效果

自身也有大小上的區分

   　　 <div class="container">
            <div class="well">
                在 well 中
            </div>
            <div class="well well-sm">
                在 well 中
            </div>  
            <div class="well well-lg">
                在 well 中
            </div>
        </div>    

效果