Breadcrumb breadcrumbGenerally used for navigation, indicating the location of the current page
Breadcrumbs can set other related small marking contents, such as labels, badge marks, etc.
//Source code//Basic Style.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
//All li items are inline blocks.breadcrumb > li {
display: inline-block;
}
//And the li item works.breadcrumb > li + li:before {
padding: 0 5px;
color: #ccc;
content: "/\00a0";
}
//Set the color of the current item.breadcrumb > .active {
color: #777;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Bootstrapfrom3.0The version begins to fully support mobile platforms，Implement the mobile-first purpose --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="bootstrap-3.3.7-dist/css/" rel="stylesheet"> </head> <body> <ul class="breadcrumb"> <li>HTML</li> <li>JS</li> <li>CSS</li> </ul> <!-- bootstrapIt is based onjQuery--> <script src="/ajax/libs/jquery/1.12.4/"></script> <script src="bootstrap-3.3.7-dist/js/"></script> </body> </html>
This series of tutorials has been compiled into:Bootstrap Basic TutorialIn the topic, welcome to click to learn.
If you want to learn more, you can clickhereLet’s study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap Table usage tutorial
Bootstrap plug-in usage tutorial
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.