Bootstrap Getting Started (16) component 10:well and embedded content with responsive features

Bootstrap Getting Started (16) component 10:well and embedded content with responsive features

The well component can add a cut-in effect to the content.

Embedded content with responsive characteristics can automatically create a fixed scale based on the width of the external container in which the content is embedded, allowing the browser to automatically determine the size of the video or slideshow and scale on a variety of devices.

These rules are applied directly to <iframe> , <embed> ,, <video> and <object> elements. You can also explicitly use a derived class if you want the final style to match the other properties .embed-responsive-item . Commonly used are 16:9 4:3

1. Embedded content with responsive features

2.well components

1. Embedded content with responsive features

Introduce a local CSS file first

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

Create embedded content with responsive attributes first

Create a div with class embed-responsive in the container div and specify whether it is 16:9 or 4:3

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

In the browser to maximize the time of the bite effect is not obvious, we have to shrink down the browser, the effect is significantly more (in the browser out of the top and bottom, scroll left and right scroll bar, keep 16:9)

Change to 4:3, the effect is obviously different.

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

2.well components

The well component can add a cut-in effect to the content

There's a difference in size, too.

<divclass="Container"> <divclass=" Well">in the well</div> <divclass="Well well-sm">in the well</div> <divclass="Well WELL-LG">in the well</div> </div>

Effect

Bootstrap Getting Started (16) component 10:well and embedded content with responsive features