Introduction to Bootstrap
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.
Thumbnail component
The most commonly used thumbnails on websites is the product list page, which displays several pictures in one line, and some have titles, description content, buttons and other information under the pictures.
The bootstrap framework separates this part into a module component, and is implemented through the class name .thumbnail and the bootstrap grid system. Below are the source code files of different versions of the bootstrap thumbnail component:
LESS: tbumbnails.less
SASS: _tbumbnails.scss
Implementation principle:
The implementation of layout mainly relies on the grid system of the bootstrap framework. The following is the style corresponding to the thumbnail
.thumbnail {display: block;padding: 4px;margin-bottom: 20px;line-height: 1.42857143;background-color: #fff;border: 1px solid #ddd;border-radius: 4px;-webkit-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}.thumbnail > img,.thumbnail a > img {margin-right: auto;margin-left: auto;}a.thumbnail:hover,a.thumbnail:focus,a.thumbnail.active {border-color: #428bca;}.thumbnail .caption {padding: 9px;color: #333;}Let’s take a look at an example:
<div><div><a herf="#"><img src="img/1.jpg" style="height:180px;width:100%;display: block"></a></div><div><a herf="#"><img src="img/2.jpg" style="height:180px;width:100%;display: block"></a></div><div><a herf="#"><img src="img/3.jpg" style="height:180px;width:100%;display: block"></a></div><div><a herf="#" ><img src="img/4.jpg" style="height:180px;width:100%;display: block"></a></div></div>
The effects are as follows:
You can view it using Firefox responsive design view
On the basis of only thumbnails, add a div container with class name .caption and place other contents in this container, such as: title, text description, buttons, etc.
<div><div><div><a href="#"><img src="img/1.jpg" style="height:180px;width:100%;display: block"></a><div><h3>Here is the graphic title 1111</h3><p>Here is the description content here is the description content here is the description content here is the description content here is the description content here is the description content here is the description content here is the description content here is the description content here is the description content here is the description content here is the description content</p><a href="#">Begin to learn</a></div><div><a href="#"><img src="img/2.jpg" style="height:180px;width:100%;display: block"></a><div><h3>Here is the graphic title 2222</h3><p>Here is the description content 2222Here is the description content 2222Here is the description content 2222Here is the description content 2222Here is the description content 2222Here is the description content 2222</p><a href="#">Begin to learn</a></div><div><a href="#"><img src="img/3.jpg" style="height:180px;width:100%;display: block"></a><div><h3>Here is the graphic title 3333</h3><p>Here is the description content 3333 Here is the description content 3333 Here is the description content 3333 Here is the description content 222 Here is the description content 3333</p><a href="#">Begin to learn</a></div><div><a href="#"><img src="img/4.jpg" style="height:180px;width:100%;display: block"></a><div><h3>Here is the graphic title 4444</h3><p>Here is the description content 4444Here is the description content 4444Here is the description content 4444Here is the description content 4444Here is the description content 4444Here is the description content 4444</p><a href="#">Begin to learn</a><a href="#">Study</a></div></div></div>
Alert box component
The bootstrap framework uses .alert style to achieve the warning box effect. By default, bootstrap provides four different warning box effects:
1. Success warning box: prompts the user to succeed in the operation, add the .alert-success style on the basis of .alert;
2. Information warning box: Provide users with prompt information, and add .alert-info style on the basis of .alert;
3. Warning warning box: Provide warning information and add .alert-warning style on the basis of .alert;
4. Error warning box: prompts the user for errors in operation, and add .alert-danger style on the basis of .alert;
Among them, the .alert style mainly sets the background color, border, rounded corner, and text color of the warning box. In addition, the style processing is performed on h4, p, ul and .alert-link. The following is the css source code:
.alert {padding: 15px;margin-bottom: 20px;border: 1px solid transparent;border-radius: 4px;}.alert h4 {margin-top: 0;color: inherit;}.alert .alert-link {font-weight: bold;}.alert > p,.alert > ul {margin-bottom: 0;}.alert > p + p {margin-top: 5px;}.alert-success {color: #3c763d;background-color: #dff0d8;border-color: #d6e9c6;}.alert-success hr {border-top-color: #c9e2b3;}.alert-success .alert-link {color: #2b542c;}.alert-info {color: #31708f;background-color: #d9edf7;border-color: #bce8f1;}.alert-info hr {border-top-color: #a6e1ec;}.alert-info .alert-link {color: #245269;}.alert-warning {color: #8a6d3b;background-color: #fcf8e3;border-color: #faebcc;}.alert-warning hr {border-top-color: #f7e1b5;}.alert-warning .alert-link {color: #66512c;}.alert-danger {color: #a94442;background-color: #f2dede;border-color: #ebccd1;}.alert-danger hr {border-top-color: #e4b9c0;}.alert-danger .alert-link {color: #843534;}For example:
<div role="alert">Congratulations on your successful operation! </div><div role="alert">Please enter the correct password</div><div role="alert">You have failed twice, and there is another last chance</div><div role="alert">Sorry, your password was entered incorrectly! </div>
Closeable alert box
1. Append a .alert-dismissable class name to the container of the default warning box.
2. Add .close to the button label to implement the closing button of the warning box
3. Make sure that the custom attribute data-dismiss="alert" is set on the close button element (closing the alert box requires js to detect the attribute, thereby controlling the closing of the alert box)
example:
<div role="alert"><button type="button" data-dismiss="alert">×</button>Congratulations on your successful operation! </div><divrole="alert"><button type="button" data-dismiss="alert">×</button>Please enter the correct password</div><div role="alert"><button type="button" data-dismiss="alert">×</button>You have failed the operation twice, and there is a last chance</div><div role="alert"><button type="button" data-dismiss="alert">×</button>Sorry, your password was entered incorrectly! </div>
Link to alert box
Sometimes you need to add a link to the warning box to tell the user to jump to a new page. The link to the warning box is highlighted in the bootstrap framework. Add a class name as .alert-link to the link added to the warning box. Below is the css style of alert-link
.alert .alert-link {font-weight: bold;}/*The text color of the link in different types of warning boxes*/.alert-success .alert-link {color: #2b542c;}.alert-info .alert-link {color: #245269;}.alert-warning .alert-link {color: #66512c;}.alert-danger .alert-link {color: #843534;}example:
<div role="alert"><strong>Well done!</strong>You successfully read<a href="#">this important alert message</a></div><div role="alert"><strong>Well done!</strong>You successfully read<a href="#"><strong>This important alert message</a></div><div role="alert"><strong>Well done!</strong>You successfully read<a href="#">this important alert message</a></div><div role="alert"><strong>Well done!</strong>You successfully read<a href="#">this important alert message</a></div><div role="alert"><strong>Well done!</strong>You successfully read<a href="#">this important alert message</a></div><div role="alert"><strong>Well done!</strong>You successfully read<a href="#">this important alert message</a></div>
I will introduce so much about the Bootstrap thumbnail component and warning box component that this article introduces to you. I hope it will be helpful to you!