Bootstrap에 탐색경로 탐색을 추가하는 방법은 무엇입니까? 방법에 대한 간략한 분석

青灯夜游

풀어 주다： 2021-11-25 19:41:45

앞으로

2660명이 탐색했습니다.

Bootstrap에 탐색경로 탐색을 추가하는 방법은 무엇입니까? 다음 기사에서는 Bootstrap5 탐색경로 탐색 구성 요소를 사용하는 방법을 소개합니다. 도움이 되기를 바랍니다.

Bootstrap에 탐색경로 탐색을 추가하는 방법은 무엇입니까? 방법에 대한 간략한 분석

1 탐색경로 탐색

탐색경로 탐색은 일반적으로 웹사이트 상단의 탐색 표시줄 아래에 사용되어 탐색 계층 구조에서 현재 페이지의 수준을 나타냅니다. 일반적으로 > 및 | Bootstrap5 탐색경로 탐색은 CSS 자동으로 구분 기호를 추가합니다. [관련 추천: "부트스트랩 튜토리얼"]

아래 그림에서 네비게이션 바 아래의 작은 네비게이션 라인은 일반적인 탐색경로 네비게이션입니다

Bootstrap에 탐색경로 탐색을 추가하는 방법은 무엇입니까? 방법에 대한 간략한 분석

예

<!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>

로그인 후 복사

Bootstrap에 탐색경로 탐색을 추가하는 방법은 무엇입니까? 방법에 대한 간략한 분석

2 사용자 정의 구분 기호

2.1 로컬 CSS 사용자 정의 속성 수정

다음 코드에서 style="max-width:90%"를 추가하여 >를 구분 기호로 사용하거나 다른 문자로 변경할 수 있습니다.

<!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: &#39;>&#39;;" 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: &#39;|&#39;;" 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: &#39;-&#39;;" 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>

로그인 후 복사

Bootstrap에 탐색경로 탐색을 추가하는 방법은 무엇입니까? 방법에 대한 간략한 분석

2.2 아이콘 또는 이미지 사용

위의 예에서는 내장된 SVG 아이콘을 사용할 수도 있습니다.

 <nav   style="max-width:90%" 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에 탐색경로 탐색을 추가하는 방법은 무엇입니까? 방법에 대한 간략한 분석

2.3 구분 기호 없음

--bs-breadcrumb-divider: '';를 설정하여 구분 기호를 제거할 수도 있습니다(CSS 사용자 정의 속성의 빈 문자열은 하나의 값으로 계산됩니다).

<nav   style="max-width:90%" 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!