面包屑
Component #1
个人资料
<!-- Breadcrumb -->
<div class="navbar-dark bg-dark" style="background-image: url(../assets/svg/components/wave-pattern-light.svg);">
<div class="container content-space-1 content-space-b-lg-3">
<div class="row align-items-center">
<div class="col">
<div class="d-none d-lg-block">
<h1 class="h2 text-white">个人资料</h1>
</div>
<!-- Breadcrumb -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-light mb-0">
<li class="breadcrumb-item">Account</li>
<li class="breadcrumb-item active" aria-current="page">Personal Info</li>
</ol>
</nav>
<!-- End Breadcrumb -->
</div>
<!-- End Col -->
<div class="col-auto">
<div class="d-none d-lg-block">
<a class="btn btn-soft-light btn-sm" href="#">注销</a>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Breadcrumb -->
Component #2
<!-- Breadcrumb -->
<div class="container">
<div class="row align-items-lg-center">
<div class="col-lg mb-2 mb-lg-0">
<!-- Breadcrumb -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="#">For Sale</a></li>
<li class="breadcrumb-item"><a href="#">England</a></li>
<li class="breadcrumb-item"><a href="#">伦敦</a></li>
<li class="breadcrumb-item"><a href="#">Studio</a></li>
<li class="breadcrumb-item active" aria-current="page">470 Lucy Forks, Patriciafurt, YC7B</li>
</ol>
</nav>
<!-- End Breadcrumb -->
</div>
<!-- End Col -->
<div class="col-lg-auto">
<a class="btn btn-sm btn-ghost-secondary" href="javascript:;">
<i class="bi-heart me-2"></i> Save
</a>
<a class="btn btn-sm btn-ghost-secondary" href="javascript:;">
<i class="bi-share-fill me-2"></i> Share
</a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Breadcrumb -->
Component #3
Products Grid
<!-- Breadcrumb -->
<div class="bg-light">
<div class="container py-4">
<div class="row">
<div class="col-sm">
<h4 class="mb-0">Products Grid</h4>
</div>
<!-- End Col -->
<div class="col-sm-auto">
<!-- Breadcrumb -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item">
<a href="../demo-shop/index.html">Shop</a>
</li>
<li class="breadcrumb-item">
<a href="../demo-shop/products-grid.html">Products</a>
</li>
<li class="breadcrumb-item active" aria-current="page">Grid</li>
</ol>
</nav>
<!-- End Breadcrumb -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Breadcrumb -->