Bagaimana untuk menambah navigasi serbuk roti dalam Bootstrap? Analisis ringkas kaedah

青灯夜游

Lepaskan： 2021-11-25 19:41:45

ke hadapan

2657 orang telah melayarinya

Bagaimana untuk menambah navigasi serbuk roti dalam

Bootstrap? Artikel berikut akan memperkenalkan kepada anda cara menggunakan komponen navigasi serbuk roti Bootstrap5 Saya harap ia akan membantu anda!

Bagaimana untuk menambah navigasi serbuk roti dalam Bootstrap? Analisis ringkas kaedah

1 Navigasi Breadcrumb

Navigation Breadcrumb biasanya digunakan di bawah bar navigasi di bahagian atas tapak web untuk menunjukkan tahap halaman semasa dalam navigasi hierarki yang biasa digunakan > Atau | dan pemisahan ruang, navigasi serbuk roti Bootstrap5 secara automatik menambah pemisah melalui CSS. [Cadangan berkaitan: "tutorial bootstrap"]

Dalam gambar di bawah, baris navigasi kecil di bawah bar navigasi ialah navigasi serbuk roti biasa

Bagaimana untuk menambah navigasi serbuk roti dalam Bootstrap? Analisis ringkas kaedah

Instance

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

Salin selepas log masuk

Bagaimana untuk menambah navigasi serbuk roti dalam Bootstrap? Analisis ringkas kaedah

2 Pemisah tersuai

2.1 Dengan mengubah suai sifat tersuai CSS tempatan

Dalam kod berikut, dengan menambahkan style="max-width:90%", anda boleh menggunakan > sebagai simbol pemisah, atau anda boleh menukarnya kepada mana-mana aksara lain.

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

Salin selepas log masuk

Bagaimana untuk menambah navigasi serbuk roti dalam Bootstrap? Analisis ringkas kaedah

2.2 Menggunakan ikon atau imej

Contoh di atas juga boleh menggunakan ikon SVG terbenam.

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

Salin selepas log masuk

Bagaimana untuk menambah navigasi serbuk roti dalam Bootstrap? Analisis ringkas kaedah

2.3 Jangan gunakan pemisah

Anda juga boleh mengalih keluar tetapan pemisah --bs-breadcrumb-divider: '';(CSS sejak Rentetan kosong dalam sifat yang ditentukan akan dikira sebagai satu nilai).

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

Salin selepas log masuk

Untuk pengetahuan lanjut tentang bootstrap, sila lawati: tutorial asas bootstrap! !

Atas ialah kandungan terperinci Bagaimana untuk menambah navigasi serbuk roti dalam Bootstrap? Analisis ringkas kaedah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!