Bootstrap, from Twitter, is the most popular front-end framework at present. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is simple and flexible, making web development faster. Let me tell you the key points of learning.
Key points for learning:
1. Giant screen component
2. Header component
3. Thumbnail component
4. Warning box component
In this lesson, we will mainly learn about the four component functions of Bootstrap: giant screen component, header component, thumbnail component and warning box component.
one. Giant screen component
The giant screen component is mainly a key area of the website.
//In a fixed range, there are rounded corners <div><div><h2>Website title</h2><p>This is a learning website! </p><p><a href="#">More content</a></p></div></div> //100% full screen, no rounded corners<div><div><h2>Website title</h2><p>This is a learning website! </p><p><a href="#">More content</a></p></div></div>
two. Header component
//Add some space <div><h1>Large title<small>Subtitle</small></h1></div>
three. Thumbnail component
//Thumbnails are combined with responsiveness<div><div><img src="img/pic.png"></div><div><div><img src="img/pic.png"></div></div><div><div><img src="img/pic.png"></div></div><div><img src="img/pic.png"></div></div></div> //Custom content<div><div><div><img src="img/pic.png"><div><h3>Two pictures and text</h3><p>This is a thumbnail with pictures combined with text</p><p><a href="#">Enter</a></p></div></div><div><div><img src="img/pic.png"><div><h3>Pictures and texts</h3><p>This is a thumbnail with pictures and texts</p><p><a href="#">Enter</a></p></div></div><div><div><img src="img/pic.png"><div><h3>Pictures and texts</h3><p>This is a thumbnail with pictures and texts</p></div></div><div><div><img src="img/pic.png"><div><h3>Pictures and texts</h3><p>This is a thumbnail with pictures and texts</p><p><a href="#">Enter</a></p></div></div><div><div><img</a></p></div><div><div><img</a></p></div></div><div><div><img</a></p></div><div><div><img</a></p></div></div><div><div><img</a></p></div><div><div><img</a></p></div></div><div><div><img</a></p></div><div><div><img</a></p></div></div><div><div><img</a></p></div><div><div><img</a></p></div></div><div><div><img</a></p></div><div><div><img</a></p></div></div><div><div><img</a></p></div><div src="img/pic.png"><div><h3>Style and text</h3><p>This is a thumbnail with pictures and text</p><p><a href="#">Enter</a></p></div></div></div></div>
Four. Warning box component
The warning box component is a set of predefined messages.
//Basic warning box <div>Bootstrap</div><div>Bootstrap</div><div>Bootstrap</div><div>Bootstrap</div><div>Bootstrap</div> //Warning box with closed<div>Bootstrap<button type="button" data-dismiss="alert"><span>×</span></button></div> //Auto-adapt hyperlink <div>Bootstrap, please go to the official website <a href="#">Download</a></div>
The above content is the Thumbnail and Warning Box Component of the Big Screen Header and Warning Box Component that the editor introduced to you. I hope it will be helpful to everyone!