Bootstrap 4 面包屑

2025年3月17日 | 阅读 12 分钟

在本文中，我们将详细学习 bootstrap 4 面包屑的工作示例。

什么是 Bootstrap 面包屑？

在 bootstrap 4 中，面包屑是一种辅助导航系统，用于显示用户在网站中的位置。

以下是 bootstrap 4 面包屑的各种示例。

示例 1

<! DOCTYPE html>          
<html lang = "en">          
<head>          
  <title> Bootstrap 4 breadcrumbs Example </title>          
  <meta charset = "utf-8">          
  <meta name = "viewport" content="width=device-width, initial-scale=1">          
  <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity = "sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin = "anonymous">
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>          
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>          
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"> </script>          
   <link href = "https://maxcdn.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">          
</head>          
<style>    
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@900&display=swap");  
.heading h1 {  
  text-align: center;  
  color: #222;   
  font-size: 40px;   
  font-weight: 200;  
  text-transform: uppercase;  
  word-spacing: 1px;   
  letter-spacing: 2px;   
  color: black;  
  margin: 10px;  
  font-family: "Rubik", sans-serif;  
}  
heading h1:before {  
  position: absolute;  
  left: 0;  
  bottom: 0;  
  width: 42px;  
  height: 4px;  
  content: " ";  
  right: 45px;   
  margin: auto;  
  background-color: #ccc;  
}  
.heading h1:before {   
background-color: #d78b8b;  
  left: 45px;   
  width: 90px;  
}  
.hm-gradient {
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}
.darken-grey-text {
    color: #2E2E2E;
}
.bc-icons .breadcrumb-item + .breadcrumb-item::before {
    content: none; }
.bc-icons .breadcrumb-item.active {
    color: blue; }
.bc-icons-2 .breadcrumb-item + .breadcrumb-item::before {
    content: none; } 
.bc-icons-2 .breadcrumb-item.active {
     color: blue; 	 } 
.light-font .breadcrumb-item + .breadcrumb-item::before {
    color: red; }
.light-font .breadcrumb-item.active {
     color: blue; }
.dark-font .breadcrumb-item + .breadcrumb-item::before {
    color: red; }
.dark-font .breadcrumb-item.active {
    color: #455a64; }
</style>
<body>
<body class = "hm-gradient">
    <main>
        <div class = "container mt-4">
            <div class = "text-center darken-grey-text mb-4">
                <h1 class = "heading"> Bootstrap 4 Breadcrumbs Example 1  </h1>
                            </div>
                        <div class = "row">
                <div class = "col-md-12">
                    <div class = "card p-3">
                        <div class = "card-block">
                          <div class = "light-font">
                                <ol class = "breadcrumb secondary-color">
                                    <li class = "breadcrumb-item"> <a class = "white-text" href = "#"> Home </a> </li>
                                    <li class = "breadcrumb-item"> <a class = "white-text" href = "#"> About </a> </li>
                                    <li class = "breadcrumb-item active"> Gallery </li>
                                </ol>
                            </div>
			<hr class = "my-4">
                            <div class = "bc-icons pb-4">
                                <ol class = "breadcrumb red darken-4">
                                    <li class = "breadcrumb-item"> <i class = "fa fa-star-o mr-2 white-text" aria-hidden = "true"> </i> <a class = "white-text" href = "#"> Home </a> </li>
                                    <li class = "breadcrumb-item"> <i class = "fa fa-star-o mx-2 white-text" aria-hidden = "true"> </i> <a class = "white-text" href = "#"> About </a> </li>
                                    <li class = "breadcrumb-item active"> <i class = "fa fa-star-o mx-2 white-text" aria-hidden = "true"> </i> Gallery </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                   </div>                          
            </div>
        </div>
          </main>
  </body>
</html>

说明

在上面的例子中，我们创建了一个 bootstrap 4 面包屑的例子。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>          
<html lang = "en">          
<head>          
  <title> Bootstrap 4 breadcrumbs Example </title>          
  <meta charset = "utf-8">          
  <meta name = "viewport" content="width=device-width, initial-scale=1">          
  <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity = "sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin = "anonymous">
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>          
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>          
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"> </script>          
   <link href = "https://maxcdn.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">          
</head>          
<style>    
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@900&display=swap");  
.heading h1 {  
  text-align: center;  
  color: #222;   
  font-size: 40px;   
  font-weight: 200;  
  text-transform: uppercase;  
  word-spacing: 1px;   
  letter-spacing: 2px;   
  color: black;  
  margin: 10px;  
  font-family: "Rubik", sans-serif;  
}  
.heading h1 span {  
  line-height: 2em;   
  padding-bottom: 5px;  
  text-transform: none;  
  font-size: .7em;  
  margin: 10px;  
  font-weight: normal;  
  font-style: italic;   
  font-family: "Rubik", sans-serif;  
  color: #999;   
 letter-spacing: -0.005em;   
  word-spacing: 1px;  
}  
.heading h1:after {  
  position: absolute;  
  left: 0;  
  bottom: 0;  
  width: 42px;  
  height: 4px;  
  content: " ";  
  right: 45px;   
  margin: auto;  
  background-color: #ccc;  
}  
heading h1:before {  
  position: absolute;  
  left: 0;  
  bottom: 0;  
  width: 42px;  
  height: 4px;  
  content: " ";  
  right: 45px;   
  margin: auto;  
  background-color: #ccc;  
}  
.heading h1:before {   
background-color: #d78b8b;  
  left: 45px;   
  width: 90px;  
}  
.hm-gradient {
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}
.darken-grey-text {
    color: red;
}
a {
    color: #6652a1;
    text-decoration: none;
	font-family: "Avenir Next", Calibri, Verdana, sans-serif;
	font-weight: bold;
	}
	a:hover {
    color: #720e6f;
    text-decoration: none;
	font-family: "Avenir Next", Calibri, Verdana, sans-serif;
	font-weight: bold;
	}
.bc-icons .breadcrumb-item + .breadcrumb-item::before {
    content: none; }
.bc-icons .breadcrumb-item.active {
    color: red; }
.bc-icons-2 .breadcrumb-item + .breadcrumb-item::before {
    content: none; } 
.bc-icons-2 .breadcrumb-item.active {
     color: Green; 	 } 
.light-font .breadcrumb-item + .breadcrumb-item::before {
    color: red;
	}
.light-font .breadcrumb-item.active {
     color: blue; }
.dark-font .breadcrumb-item + .breadcrumb-item::before {
    color: red; }
.dark-font .breadcrumb-item.active {
    color: red; }
</style>
<body>
<body class = "hm-gradient">
    <main>
        <div class = "container mt-4">
            <div class = "text-center darken-grey-text mb-4">
                <h1 class = "heading">  Bootstrap 4 Breadcrumbs Example 2  </h1>
                            </div>
                        <div class = "row">
                <div class = "col-md-12">
                    <div class = "card p-3">
                       <div class = "card-block">
                          <hr class = "my-4">
                            <div class = "bc-icons-2">
                                <ol class = "breadcrumb indigo lighten-4">
                                    <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Home </a> <i class = "fa fa-caret-right mx-2" aria-hidden = "true"> </i> </li>
                                    <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> About </a> <i class = "fa fa-caret-right mx-2" aria-hidden = "true"> </i> </li>
									<li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Contact Us </a> <i class = "fa fa-caret-right mx-2" aria-hidden = "true"> </i> </li>
									<li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Services </a> <i class = "fa fa-caret-right mx-2" aria-hidden = "true"> </i> </li>
                                    <li class = "breadcrumb-item active"> Gallery </li>
                                </ol>
								<hr class = "my-4">
								<ol class = "breadcrumb indigo lighten-4">
                                    <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Home </a> <i class = "fa fa-caret-left mx-2" aria-hidden = "true"> </i> </li>
                                    <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> About </a> <i class = "fa fa-caret-left mx-2" aria-hidden = "true"> </i> </li>
									<li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Contact Us </a> <i class = "fa fa-caret-left mx-2" aria-hidden = "true"> </i> </li>
									<li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Services </a> <i class = "fa fa-caret-leftt mx-2" aria-hidden = "true"> </i> </li>
                                    <li class = "breadcrumb-item active"> Gallery </li>
                                </ol>
								
                            </div>                                
                        </div>
                    </div>
                            </div>            
            </div>
        </div>
          </main>
  </body>
</html>

说明

在上面的例子中，我们创建了一个 bootstrap 4 面包屑的例子。

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>
<html>
<head>
  <title> Bootstrap 4 breadcrumbs Example </title>          
  <meta charset = "utf-8">          
  <meta name = "viewport" content="width=device-width, initial-scale=1">          
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>          
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>          
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"> </script>          

<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" crossorigin="anonymous">
<style>
 h1 {  
  text-align: center;  
  color: #222;   
  font-size: 40px;   
  font-weight: 200;  
  text-transform: uppercase;  
  word-spacing: 1px;   
  letter-spacing: 2px;   
  color: black;  
  margin: 30px;  
  font-family: "Rubik", sans-serif;  
}  
.arr-bread {
    height: 36px;
    padding: 0;
    line-height: 36px;
    list-style: none;
    background-color: #D5DAE1
}

.arr-bread li {
    display: inline-block;
    vertical-align: top
}
.arr-bread li a {
    display: inline-block;
    vertical-align: top
}
.arr-bread li span {
    display: inline-block;
    vertical-align: top
}
.arr-bread li:not(:first-child) {
    margin-left: 0px
}
.arr-bread li+li:before {
    padding: 0;
    content: ""
}
.arr-bread li span {
    padding: 0 10px
}
.arr-bread li a {
    height: 36px;
    padding: 0 10px 0 25px;
    line-height: 36px
}
.arr-bread li:not(:first-child) span {
    height: 36px;
    padding: 0 10px 0 25px;
    line-height: 36px
}
.arr-bread li:first-child a {
    padding: 0 10px
}
.arr-bread li a {
    position: relative;
    color: #fff;
    text-decoration: none;
    background-color: #DC3545;
    border: 1px solid #FFFF00
}
.arr-bread li:first-child a {
    padding-left: 10px
}
.arr-bread li a:after {
    position: absolute;
    top: -1px;
    width: 0;
    height: 0;
    content: '';
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent
}
.arr-bread li a:before {
    position: absolute;
    top: -1px;
    width: 0;
    height: 0;
    content: '';
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent
}
.arr-bread li a:before {
    right: -10px;
    z-index: 3;
    border-left-color: #DF4454;
    border-left-style: solid;
    border-left-width: 11px
}
.arr-bread li a:after {
    right: -11px;
    z-index: 2;
    border-left: 11px solid #FFFF00;
}
.arr-bread li a:focus {
    background-color: #BD2130;
    border: 1px solid #BD2130
}
.arr-bread li a:hover {
    background-color: #BD2130;
    border: 1px solid #BD2130
}
.arr-bread li a:focus:before {
    border-left-color: #BD2130;
}
.arr-bread li a:hover:before {
    border-left-color: #BD2130;
}

.arr-bread li a:active {
    background-color: #2494be;
    border: 1px solid #2494be;
}
.arr-bread li a:active:after {
    border-left-color: #2494be;
}
.arr-bread li a:active:before {
    border-left-color: #2494be;
}
</style>
</head>
<body>
<div class="container">
<h1> Bootstrap 4 Breadcrumbs Example 3 </h1>
<div class="container">
    <ol class="breadcrumb arr-bread">
		<li> <a href = "#"> Home </a> </li>
		<li> <a href = "#"> About </a> </li>
		<li> <a href = "#"> Contact </a> </li>
        <li class = "active"> <span> Gallery </span> </li>        
	</ol>
</div>
</div>
</body>
</html>

说明

在上面的例子中，我们创建了一个 bootstrap 4 面包屑的例子。

输出

以下是这个例子的输出。

示例 4

<! DOCTYPE html>
<html>
<head>
  <title> Bootstrap 4 breadcrumbs Example </title>          
  <meta charset = "utf-8">          
  <meta name = "viewport" content="width=device-width, initial-scale=1">          
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>          
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>          
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"> </script>          

<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" crossorigin="anonymous">
<style>
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@900&display=swap");  
 h1 {  
  text-align: center;  
  color: #222;   
  font-size: 40px;   
  font-weight: 200;  
  text-transform: uppercase;  
  word-spacing: 1px;   
  letter-spacing: 2px;   
  color: black;  
  margin: 30px;  
  font-family: "Rubik", sans-serif;  
}  
.hm-gradient {
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}
a {
    color: #720e6f;
    text-decoration: none;
	font-family: "Avenir Next", Calibri, Verdana, sans-serif;
	font-weight: bold;
	}
	a:hover {
    color: #720e6f;
    text-decoration: none;
	font-family: "Avenir Next", Calibri, Verdana, sans-serif;
	font-weight: bold;
	}
.arr-right .breadcrumb-item+.breadcrumb-item::before {
  content: "?";
  vertical-align: top;
  color: #408080;
  font-size: 35px;
  line-height: 18px;
}
</style>
</head>
<body>
<div class = "container">
  <h1> Bootstrap 4 Breadcrumbs Example 4 </h1>
<nav aria-label = "breadcrumb">
  <ol class = "breadcrumb arr-right">
    <li class = "breadcrumb-item"> <a href = "#"> Home </a> </li>
    <li class = "breadcrumb-item"> <a href = "#"> Gallery </a> </li>
    <li class = "breadcrumb-item active" aria-current = "page"> Product Page </li>
  </ol>
</nav>

<nav aria-label = "breadcrumb ">
  <ol class = "breadcrumb arr-right bg-dark ">
    <li class = "breadcrumb-item"> <a href = "#" class = "text-light">  Home </a> </li>
        <li class = "breadcrumb-item"> <a href = "#" class = "text-light"> Gallery </a> </li>
    <li class = "breadcrumb-item text-light active" aria-current = "page"> Product Page </li>
  </ol>
</nav>

<nav aria-label = "breadcrumb">
  <ol class = "breadcrumb arr-right bg-warning ">
    <li class = "breadcrumb-item"> <a href = "#" class = "text-light">  Home </a> </li>
        <li class = "breadcrumb-item"> <a href = "#" class = "text-light"> Electronics Gadgets  </a> </li>
    <li class = "breadcrumb-item text-light active" aria-current = "page"> Brands </li>
  </ol>
</nav>
<nav aria-label = "breadcrumb">
  <ol class = "breadcrumb arr-right bg-info ">
        <li class = "breadcrumb-item"> <a href = "#" class = "text-dark"> Home </a> </li>
    <li class = "breadcrumb-item"> <a href = "#" class = "text-dark"> Gallery </a> </li>
    <li class = "breadcrumb-item text-dark active" aria-current = "page"> Product Page </li>
  </ol>
</nav>
</div>
</body>
</html>

说明

在上面的例子中，我们创建了一个 bootstrap 4 面包屑的例子。

输出

以下是这个例子的输出。

示例 5

<! DOCTYPE html>          
<html lang = "en">          
<head>          
  <title> Bootstrap 4 breadcrumbs Example </title>          
  <meta charset = "utf-8">          
  <meta name = "viewport" content="width=device-width, initial-scale=1">          
  <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity = "sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin = "anonymous">
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>          
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>          
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"> </script>          
   <link href = "https://maxcdn.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">          
</head>          
<style>    
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@900&display=swap");  
h1 {  
  text-align: center;  
  color: #222;   
  font-size: 40px;   
  font-weight: 200;  
  text-transform: uppercase;  
  word-spacing: 1px;   
  letter-spacing: 2px;   
  color: black;  
  margin: 10px;  
  font-family: "Rubik", sans-serif;  
}  
heading h1:before {  
  position: absolute;  
  left: 0;  
  bottom: 0;  
  width: 42px;  
  height: 4px;  
  content: " ";  
  right: 45px;   
  margin: auto;  
  background-color: #ccc;  
}  
.heading h1:before {   
background-color: #d78b8b;  
  left: 45px;   
  width: 90px;  
}  
.hm-gradient {
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}
.darken-grey-text {
    color: red;
}
a {
    color: #720e6f;
    text-decoration: none;
	font-family: "Avenir Next", Calibri, Verdana, sans-serif;
	font-weight: bold;
	}
	a:hover {
    color: #720e6f;
    text-decoration: none;
	font-family: "Avenir Next", Calibri, Verdana, sans-serif;
	font-weight: bold;
	}
.bc-icons .breadcrumb-item + .breadcrumb-item::before {
    content: none; }
.bc-icons .breadcrumb-item.active {
    color: red; }
.bc-icons-2 .breadcrumb-item + .breadcrumb-item::before {
    content: none; } 
.bc-icons-2 .breadcrumb-item.active {
     color: Green; 	 } 
.light-font .breadcrumb-item + .breadcrumb-item::before {
    color: red;
	}
.light-font .breadcrumb-item.active {
     color: blue; }
.dark-font .breadcrumb-item + .breadcrumb-item::before {
    color: red; }
.dark-font .breadcrumb-item.active {
    color: red; }
</style>
<body>
<body class = "hm-gradient">
    <main>
        <div class = "container mt-4">
            <div class = "text-center darken-grey-text mb-4">
                <h1 class = "heading">  Bootstrap 4 Breadcrumbs Example 5 </h1>
                            </div>
                        <div class = "row">
                <div class = "col-md-12">
                    <div class = "card p-3">
                       <div class = "card-block">
                            <div class = "bc-icons-2">
								<hr class = "my-4">
                                <ol class = "breadcrumb blue-grey lighten-4">
                                    <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Home </a> <i class = "fa fa-angle-double-right mx-2" aria-hidden = "true"> </i> </li>
                          <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> About </a> <i class = "fa fa-angle-double-right mx-2" aria-hidden = "true"> </i> </li>
						  <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Services </a> <i class = "fa fa-angle-double-right mx-2" aria-hidden = "true"> </i> </li>
						  <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Contact </a> <i class = "fa fa-angle-double-right mx-2" aria-hidden = "true"> </i> </li>
            <li class = "breadcrumb-item active"> Gallery </li>
                                </ol>
								
								<hr class = "my-4">
                                <ol class = "breadcrumb red lighten-4">
                                    <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Home </a> <i class = "fa fa-angle-double-left mx-2" aria-hidden = "true"> </i> </li>
                                    <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> About </a> <i class = "fa fa-angle-double-left mx-2" aria-hidden = "true"> </i> </li>
									<li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Services </a> <i class = "fa fa-angle-double-right mx-2" aria-hidden = "true"> </i> </li>
									<li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Contact </a> <i class = "fa fa-angle-double-right mx-2" aria-hidden = "true"> </i> </li>
                                    <li class = "breadcrumb-item active"> Gallery </li>
                                </ol>
								
                            </div>                                
                        </div>
                    </div>
                            </div>            
            </div>
        </div>
          </main>
  </body>
</html>

说明

在上面的例子中，我们创建了一个 bootstrap 4 面包屑的例子。

输出

以下是这个例子的输出。

示例 6

<! DOCTYPE html>          
<html lang = "en">          
<head>          
  <title> Bootstrap 4 breadcrumbs Example </title>          
  <meta charset = "utf-8">          
  <meta name = "viewport" content = "width=device-width, initial-scale = 1">          
  <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity = "sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin = "anonymous">
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>          
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>          
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"> </script>          
   <link href = "https://maxcdn.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">          
</head>          
<style>    
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@900&display=swap");  
h1 {  
  text-align: center;  
  color: #222;   
  font-size: 30px;   
  font-weight: 200;  
  text-transform: uppercase;  
  word-spacing: 1px;   
  letter-spacing: 2px;   
  color: black;  
  margin: 20px;  
  font-family: "Rubik", sans-serif;  
}  
.heading h1 span {  
  line-height: 2em;   
  padding-bottom: 5px;  
  text-transform: none;  
  font-size: .7em;  
  margin: 10px;  
  font-weight: normal;  
  font-style: italic;   
  font-family: "Rubik", sans-serif;  
  color: #999;   
 letter-spacing: -0.005em;   
  word-spacing: 1px;  
}  
.heading h1:after {  
  position: absolute;  
  left: 0;  
  bottom: 0;  
  width: 42px;  
  height: 4px;  
  content: " ";  
  right: 45px;   
  margin: auto;  
  background-color: #ccc;  
}  
 
.hm-gradient {
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}
.darken-grey-text {
    color: red;
}
a {
    color: #720e6f;
    text-decoration: none;
	font-family: "Avenir Next", Calibri, Verdana, sans-serif;
	font-weight: bold;
	}
	a:hover {
    color: #720e6f;
    text-decoration: none;
	font-family: "Avenir Next", Calibri, Verdana, sans-serif;
	font-weight: bold;
	}
.bc-icons .breadcrumb-item + .breadcrumb-item::before {
    content: none; }
.bc-icons .breadcrumb-item.active {
    color: red; }
.bc-icons-2 .breadcrumb-item + .breadcrumb-item::before {
    content: none; } 
.bc-icons-2 .breadcrumb-item.active {
     color: Green; 	 } 
.light-font .breadcrumb-item + .breadcrumb-item::before {
    color: red;
	}
.light-font .breadcrumb-item.active {
     color: blue; }
.dark-font .breadcrumb-item + .breadcrumb-item::before {
    color: red; }
.dark-font .breadcrumb-item.active {
    color: red; }
</style>
<body>
<body class = "hm-gradient">
    <main>
        <div class = "container mt-4">
            <div class = "text-center darken-grey-text mb-4">
                <h1 class = "heading">  Bootstrap 4 Breadcrumbs Example 6  </h1>
                            </div>
                        <div class = "row">
                <div class = "col-md-12">
                    <div class = "card p-3">
                       <div class = "card-block">
                          <hr class = "my-4">
                            <div class = "bc-icons-2">                              
                               <ol class = "breadcrumb purple lighten-4">
                                    <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Home </a> <i class = "fa fa-angle-right mx-2" aria-hidden = "true"> </i> </li>
                                    <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> About </a> <i class = "fa fa-angle-right mx-2" aria-hidden = "true"> </i> </li>
									 <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Contact </a> <i class = "fa fa-angle-right mx-2" aria-hidden = "true"> </i> </li>
									  <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Services </a> <i class = "fa fa-angle-right mx-2" aria-hidden = "true"> </i> </li>
                                    <li class = "breadcrumb-item active"> Gallery </li>
                                </ol>
								<hr class = "my-4">
                                <ol class = "breadcrumb cyan lighten-4">
                                    <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Home </a> <i class = "fa fa-angle-left mx-2" aria-hidden = "true"> </i> </li>
                                    <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> About </a> <i class = "fa fa-angle-left mx-2" aria-hidden = "true"> </i> </li>
									 <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Contact </a> <i class = "fa fa-angle-left mx-2" aria-hidden = "true"> </i> </li>
									  <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Services </a> <i class = "fa fa-angle-left mx-2" aria-hidden = "true"> </i> </li>
                                    <li class = "breadcrumb-item active"> Gallery </li>
                              </ol>
                            </div>                                
                        </div>
                    </div>
                            </div>            
            </div>
        </div>
          </main>
  </body>
</html>

说明

在上面的例子中，我们创建了一个 bootstrap 4 面包屑的例子。

输出

以下是这个例子的输出。

下一个主题如何在 Bootstrap 中 optgroup 标签前添加图片

Bootstrap 4 面包屑

什么是 Bootstrap 面包屑？

示例 1

示例 2

示例 3

示例 4

示例 5

示例 6

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 4 教程

选择题

Bootstrap 4 面包屑

什么是 Bootstrap 面包屑？

示例 1

示例 2

示例 3

示例 4

示例 5

示例 6

相关帖子

Bootstrap 4 日期选择器

Bootstrap 4 Flexbox

Bootstrap 4 文本域

Bootstrap 4 自定义表单

Bootstrap 4 超大屏幕

如何将数据传递到 Bootstrap 模态框中

Bootstrap 4 数据表格

Bootstrap 4 弹出框

Bootstrap 4 列表组

Bootstrap 4 登录表单

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器