Today we will take a look at the effects of the CSS component and the more important classes. These classes are not difficult. The key is to master them proficiently, use them in combination, and use them flexibly. For articles about the CSS style and layout in the first two articles, you can read them in the previous articles.
1. Navigation components
I made a navigation myself. Currently there is only a first-level menu. In the next article, a second-level menu will be given, involving js plug-ins, so I will not describe it here.
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* be placed first, and any other content *must* follow them! --><title>Second-level menu</title><style> .sideBar-menu{margin:20px auto;width: 180px;} /*Rewrite the style of the mouse sliding*/.nav-pills li a:hover { background-color: #337ab7; color: #fff;}</style><link href="css/bootstrap.css" rel="stylesheet"><link href="css/bootstrap.min.css" rel="stylesheet"><link href="css/style.css" rel="stylesheet"><script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><body><!-- bootstrap production navigation menu--><div> <ul> <li role="presentation"><a href="#"><span></span>Home</a></li> <li role="presentation"><a href="#"><span></span>About me</a></li> <li role="presentation"><a href="#"><span></span>Those years</a></li> <li role="presentation"><a href="#"><span></span>Missing</a></li> <li role="presentation"><a href="#"><span></span>Message Board</a></li> <li role="presentation"><a href="#"><span></span>Emotional Words</a></li> </ul></div></body></html>The effects are as follows:
The following points should be noted in navigation:
1: The navigation component depends on the nav class. (That is, when using other classes, you must write this class)
2: Ensure accessibility of navigation components (add role attribute)
3: The classes involved include nav-tabs, nav-pills (make navigation capsules), nav-stacked (make horizontal navigation into vertical navigation), nav-justified (make navigation equal width arrangement)
4: For the disabled class, when adding links in the navigation page (including tabs and navigation pages), it is just disabled on the surface (the color becomes grayed out, the mouse shape changes), and the actual function still exists.
5: Use navigation with drop-down menu.
Let’s look at the following sub-: You can paste code and test it yourself, and no longer take screenshots.
<!-- Navigation depends on nav class nav-tabs class nav class --> <ul> <li role="presentation"><a href="#">Home</a></li> ---Please add role attribute<li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul><!--Capsule tabs vertically arranged nav-stacked--> <ul> <li role="presentation"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> <!--Aligning navigation at both ends nav-justified to achieve navigation column alignment--> <ul> <li role="presentation"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> <br><br>
Let’s take a look at the navigation status with the drop-down menu:
<ul> <li role="presentation"> <a data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown<span></span> </a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Action 111</a></li> <li><a href="#">Action 222</a></li> <li><a href="#">Action 333</a></li> </li> </li> <li><a href="#">Action 333</a></li> </li> </li> <li><a href="presentation"></li> --divider means adding dividers, usually using empty li or span. <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul>
In fact, for using dropdown menu class dropdown, the basic format is like the above, or if you turn link a into button, etc., you can use it flexibly.
2. Navigation bar component
Note:
1: The navigation bar is to arrange all components horizontally and wrap the components, similar to horizontal navigation
2: Ensure accessibility. Use the <nav> tag or <div role="navigation">
3: The classes involved in navigation bars include: navbar-inverse (to implement the background color as black and text white), navbar-fixed-top|navbar-fixed-bottom (fixed navigation bars at the top and bottom)
navbar-left|navbar-right (usually add navbar-right to the last element), navbar-text, navbar-link (set the connection color), navbar-btn (for buttons not included in the form form, you can
Use this class to achieve the effect of vertical centering), navbar-form (to achieve vertical alignment), navber-brand (set brand icon), navbar-collapse (collapse)
Let's take a look at the effect of navbar-collapse folding, the code is as follows:
<!-- Navigation bar collapsed means folding--><nav> <div> <div> --Navigation bar header<button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> <span></span> </button> <a href="#"> brand </a> </div> <div id="bs-example-navbar-collapse-1"> --Folding column<ul> <li><a href="#">Link <span>current</span></a></li> <li><a href="#">Link</a></li> <li> <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span></span></a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> <li role="separator"></li> <li><a href="#">One more separated link</a></li> </li> </li> </ul> <form role="search"> <div> <input type="text" placeholder="Search"> </div> <button type="submit">Submit</button> </form> <ul> <li><a href="#">Link</a></li> <li> <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span></span></a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> </li> </li> </div><!-- navbar-collapse 可以可以可--><div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> <span></span> </button> <a href="#">Brand</a></div>
The effect is as follows:
That is, when my browser screen shrinks, the original components will become folded lines (three horizontal lines) on the right side of the brand line. Click the three horizontal button and the component will be displayed.
3. Pagination components
Note:
1: Use class pagination (add pagination-lg class to make it bigger)
2: Achieve page turn alignment and implement page turn alignment (the front and back are located at both ends respectively).
The code is as follows:
<!-- Pagination Category--><nav> <ul> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">5</a></li> <li><a href="#" aria-label="next"><span aria-hidden="true">»»</span></a></li> </ul></nav>
If you implement the paging, just add <ul>.
The page turn effect is as follows: mainly use the pager class
<!--Flip-up--><nav> <ul> <li><a href="#">previous</a></li> <li><a href="#">next</a></li> </ul></nav><!--The alignment link has added previous and next classes at both ends--><nav> <ul> <li><a href="#"><span aria-hidden="true">←</span>older</a></li> <li><a href="#">newer<span aria-hidden="true">→</span></a></li> </ul></nav>
The effects of the above two are as follows:
4. Badge
Function: present the information in eye-catching numbers.
<!--Badge--><a href="#">Inbox<span>42</span></a><button type="button"> Message<span>4</span></button>
The effects are as follows:
Adding this type of badge class can also be used with navigation, etc.
5. Thumbnail component
Use it with raster system and thumbnail class. The code is as follows: can be tested by yourself
<!-- Thumbnail thumbnail --><div> <div> <div> <img src="111.png"> <div> <h3>Thumbnail label</h3> <p><a href="#" role="button">Button</a></p> </div> </div> </div> <!-- Second --> <div> <div> <img src="111.png"> <div> <h3>Thumbnail label</h3> <p><a href="#" role="button">Button</a></p> </div> </div> <!-- Third --> <div> <div> <img src="111.png"> <div> <h3>Thumbnail label</h3> <p><a href="#" role="button">Button</a></p> </div> </div> <!-- Third --> <div> <div> <img src="111.png"> <div> <h3>Thumbnail label</h3> <p><a href="#" role="button">Button</a></p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
6. Closeable warning box
Use class: alert-dismissible and a button are posted as follows:
<!-- Provide a close button for the warning box --><div role="alert"> <button type="button" data-dismiss="alert" aria-label="close"> <span aria-hidden="true">×</span> --Add aria-hidden attribute</button> <strong>warning</strong>better check yourself,you are not looking too good.</div><!-- data-dismiss="alert" To ensure correct behavior on all devices -->
Regarding the scene, you can replace it yourself. No more description. Set alert-link to set the color that matches the current warning box.
7. Progress bar
Use class: progress and progress bar to implement animation
<!-- Progress Bar--><div> <div role="progressbar" aria-valuenow="60" aria-valuemax="100" aria-valuemin="0" > 60% </div></div><!-- Set the minimum width--><div> <div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80% </div> </div><div> <div role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width:2em;">2% </div></div>
To achieve the progress bar of animation effect, use progress-bar-striped to achieve the animation effect and add active. The code is as follows: No more screenshots
<!-- Use progress-bar-striped in the stripe class --><div> <div role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"> <span>40% complete</span>100% </div></div>
You can also change the color of the progress bar stripes in combination with the scene color.
8. List group, input group components
Let’s first look at the list group, mainly using the list-group class, and secondly, the list items are written with list-group-item. The code is as follows:
<!-- List group --><ul> <li><span>3</span>1111</li> <li><span>5</span>2222</li> <li>3333</li> <li>4444</li> <li>5555</li></ul><!-- Links can also add scenario classes as list group --><div> <a href="#">2222</a> <a href="#">33333</a> <a href="#">44444</a> <a href="#">55555</a></div><!-- Button as a list group, use div, and cannot use.btn class --><div> <button type="button">1111</button> <button type="button">2222</button> <button type="button">3333</button> <button type="button">4444</button><!--List group item--><div> <a href="#"> <h4>list group item</h4> <p>11111</p> </a> <a href="#"> <h4>list group item</h4> <p>22222</p> </a></div>
Let’s take a look at the input group, use the input-group class to wrap the components together. The code is as follows:
<!-- Input group--><div> --Components are included in the inout-group<span> <button type="button">Go</button> </span> <input type="text" aria-label="text"></div>
9. Embed content of responsive features
Understand what it means and what is embedded content? How to embed it? So how to respond?
Embed: that is, use tags such as <iframe>, <embed>, <video> and <object> to introduce external file content. I believe that everyone knows the new attributes in html5. video, radio, etc.
Response: Automatically create a fixed scale based on the width of the external container that is embedded, allowing the browser to automatically determine the size of the video or content, and can scale on various devices.
If you want the final style to match other properties, you can also explicitly use a derived .embed-responsive-item class.
The code is as follows:
<div> <iframe src="..."></iframe></div><div> <iframe src="..."></iframe></div>
Let's take a look at what embed-responsive-16by9 and embed-responsive-4by3 mean respectively.
Let's take a look at the console:
.embed-responsive-4by3 { ---4 represents horizontal, 3 represents vertical, that is, a scaling ratio, that is, a scale of 4:3 padding-bottom: 75%;}..embed-responsive-16by9 { padding-bottom: 56.25%;}Keep the aspect ratio, if width is calculated at 100%, it is 100% * 3/4=75%. At this time, set its aspect ratio by setting its padding-botom. When you zoom in on the browser,
Finally, keep this scaling ratio for scaling.
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.