11th progress bar Media Object and well component

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 This component of the well component allows for a simple embedding effect. Embedding Effect<Divclass= "Well">Bootstrap</Div>//With LG and SM two selectable values<Divclass= "Well well-lg">Bootstrap</Div>two. The progress bar Component progress bar component provides constant feedback on the current workflow or action. Basic progress bar<Divclass= "Progress"><Divclass= "Progress-bar"style= "width:60%;">40g</Div></Div>//Minimum progress bar<Divclass= "Progress"><Divclass= "Progress-bar"style= "min-width:20px">0%</Div></Div>//A progress bar combining scenarios<Divclass= "Progress"><Divclass= "Progress-bar progress-bar-success"style= "min-width:20px;width:60%">40g</Div></Div>//Striped, ie10+ support<Divclass= "Progress"><Divclass= "Progress-bar progress-bar-successprogress-bar-striped"style= "min-width:20px;width:60%">40g</Div></Div>//animation effects<Divclass= "Progress"><Divclass= "Progress-bar progress-bar-success progress-bar-stripedactive"style= "min-width:20px;width:60%">40g</Div></Div>//Stacking effect<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 component 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<ulclass= "Media-list"><Liclass= "Media">//Store Each media in Media-body ... More code, specific video</Li></ul>

11th progress bar Media Object and well component