Bootstrap에 탐색경로 탐색을 추가하는 방법은 무엇입니까? 다음 기사에서는 Bootstrap5 탐색경로 탐색 구성 요소를 사용하는 방법을 소개합니다. 도움이 되기를 바랍니다.
탐색경로 탐색은 일반적으로 웹사이트 상단의 탐색 표시줄 아래에 사용되어 탐색 계층 구조에서 현재 페이지의 수준을 나타냅니다. 일반적으로 > 및 | Bootstrap5 탐색경로 탐색은 CSS 자동으로 구분 기호를 추가합니다. [관련 추천: "부트스트랩 튜토리얼"]
아래 그림에서 네비게이션 바 아래의 작은 네비게이션 라인은 일반적인 탐색경로 네비게이션입니다
예
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>面包屑演示</title> </head> <body> <br><br> <nav aria-label="breadcrumb"> <ol> <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li class="breadcrumb-item active" aria-current="page">国内新闻</li> </ol> </nav> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
다음 코드에서 style="--bs-breadcrumb-divider: '>';"
를 추가하여 >를 구분 기호로 사용하거나 다른 문자로 변경할 수 있습니다.
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>面包屑演示</title> </head> <body> <br><br> <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb"> <ol> <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li class="breadcrumb-item active" aria-current="page">国内新闻</li> </ol> </nav> <nav style="--bs-breadcrumb-divider: '|';" aria-label="breadcrumb"> <ol> <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li class="breadcrumb-item active" aria-current="page">国内新闻</li> </ol> </nav> <nav style="--bs-breadcrumb-divider: '-';" aria-label="breadcrumb"> <ol> <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li class="breadcrumb-item active" aria-current="page">国内新闻</li> </ol> </nav> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
위의 예에서는 내장된 SVG 아이콘을 사용할 수도 있습니다.
<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">首页</a></li> <li class="breadcrumb-item"><a href="#">新闻</a></li> <li class="breadcrumb-item active" aria-current="page">国内新闻</li> </ol> </nav>
--bs-breadcrumb-divider: '';를 설정하여 구분 기호를 제거할 수도 있습니다(CSS 사용자 정의 속성의 빈 문자열은 하나의 값으로 계산됩니다).
<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">首页</a></li> <li class="breadcrumb-item"><a href="#">新闻</a></li> <li class="breadcrumb-item active" aria-current="page">国内新闻</li> </ol> </nav>
부트스트랩에 대한 자세한 내용을 보려면 부트스트랩 기본 튜토리얼을 방문하세요! !
위 내용은 Bootstrap에 탐색경로 탐색을 추가하는 방법은 무엇입니까? 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!