11th progress bar Media Object and well component

Learning Essentials:

1.Well Components
2. Progress bar Component
3. Media Object Components

Keynote Teacher: Li Tinghui

In this lesson, we'll focus on the three component features of Bootstrap: The well component, the progress bar component, and the media object component.

A Well component
This component allows for simple embedding effects.
Embedding effect

<class= "Well">    Bootstrap</  div>

Available with LG and SM two selectable values

<class= "Well well-lg">    Bootstrap</  div>

Two Progress bar Component
The progress bar component provides constant feedback on the current workflow or action.
Basic progress bar

<class= "Progress">    <class  = "Progress-bar"  style= "width:60%;" >         60%    </div></div> 

Lowest Value progress bar

<class= "Progress">    <class  = "Progress-bar"  style= "min-width:20px">        0%      </div></div>

A progress bar that combines scenarios

<class= "Progress">    <class  = "Progress-bar progress-bar-success"    style= "min-width:20px;width:60%">          60%    </div></Div >

Stripe shape, ie10+ support

<class= "Progress">    <class  = "Progress-bar progress-bar-success    progress-bar-striped"  style= "Min-width:20px;width : 60% ">        60%    </div></  div>

Animation effects

<class= "Progress">    <class  = "Progress-bar progress-bar-success progress-bar-stripedactive"  style= "Min-width:20px;width : 60% ">        60%    </div></  div>

Stacking effects

<Divclass= "Progress">    <Divclass= "Progress-bar progress-bar-success"style= "min-width:20px;width:35%">35%</Div>    <Divclass= "Progress-bar progress-bar-warning"style= "min-width:20px;width:20%">20%</Div>    <Divclass= "Progress-bar Progress-bar-danger"style= "min-width:20px;width:10%">10%</Div></Div>

Three Media Object Components
Media objects can contain media such as pictures, video, or audio to achieve the style effect that the object and text combinations display.

Basic example

<Divclass= "Media">    <Divclass= "Media-left">        <imgsrc= "Img/small.png"alt=""class= "Media-object">    </Div>    <Divclass= "Media-body">        <h4class= "Media-heading">Title</h4>        <P>Penguin (Scientific Name: Spheniscidae): "Boat of the Sea," the name of the Penguin is one of the oldest swimming birds, they are likely to put on the earth before the ice armor, has settled in Antarctica. There are 17 species of penguins in the world, most of which are located in the southern hemisphere. Mainly living in the southern hemisphere, belonging to the Penguin, Penguin family. Characterized by the inability to fly, the foot in the lower part of the body, the upright posture, webbed toes, plantar (the other birds with their toes), flippers, and short feathers to reduce friction and turbulence; a layer of air is left between the feathers to keep warm. Black back, white belly.        The main difference between the various species is the head color and individual size. </P>    </Div></Div>

Media Object on the right

<Divclass= "Media">    <Divclass= "Media-body">        <h4class= "Media-heading">Title</h4>        <P>Penguin (Scientific Name: Spheniscidae): "Boat of the Sea," the name of the Penguin is one of the oldest swimming birds, they are likely to put on the earth before the ice armor, has settled in Antarctica. There are 17 species of penguins in the world, most of which are located in the southern hemisphere. Mainly living in the southern hemisphere, belonging to the Penguin, Penguin family. Characterized by the inability to fly, the foot in the lower part of the body, the upright posture, webbed toes, plantar (the other birds with their toes), flippers, and short feathers to reduce friction and turbulence; a layer of air is left between the feathers to keep warm. Black back, white belly.        The main difference between the various species is the head color and individual size. </P>    </Div>    <Divclass= "Media-right">        <imgsrc= "Img/small.png"alt=""class= "Media-object">    </Div></Div>

Media Object List

<class= "media-list">    <class = "Media" >         //store Each media in Media-body ...        More code, Concrete watch video     </li></ul>

11th progress bar Media Object and well component