Rumah > Artikel > hujung hadapan web > Bagaimana untuk menambah navigasi serbuk roti dalam Bootstrap? Analisis ringkas kaedah
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!
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
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>
Dalam kod berikut, dengan menambahkan style="--bs-breadcrumb-divider: '>';"
, 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: '>';" 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>
Contoh di atas juga boleh menggunakan ikon SVG terbenam.
<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>
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="--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>
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!