Kunci untuk menambah borang carian di bar navigasi bootstrap adalah untuk mempunyai struktur yang jelas dan penggunaan nama kelas yang betul. 1. Gunakan D-Flex untuk mengatur elemen bentuk secara mendatar, dan kelas kawalan dan kelas BTN digunakan untuk kotak input dan butang masing-masing; 2. Gunakan MS-AUTO atau ME-AUTO untuk mengawal penjajaran bentuk untuk mencapai susun atur kiri atau kanan; 3. Gunakan W-100 dan Flex-Grow-1 untuk mengoptimumkan paparan mudah alih untuk mengelakkan kekeliruan susun atur; 4. Pilih kedudukan kotak carian mengikut tempat kejadian. Amalan umum termasuk meletakkannya di sebelah kanan, di tengah -tengah navigasi, atau dalam menu runtuh; 5. Jika interaksi kompleks selesai secara automatik, JS tambahan diperlukan. Dengan menggabungkan kelas bootstrap, kotak carian responsif boleh dilaksanakan tanpa kod kompleks.

Ia tidak sukar untuk menambah borang carian ke bar navigasi bootstrap. Kuncinya adalah untuk mempunyai struktur yang jelas dan gaya yang diselaraskan. Selagi anda menggunakan nama kelas yang disediakan oleh Bootstrap dengan munasabah, kotak carian boleh disematkan secara semulajadi di bar navigasi sambil mengekalkan susun atur responsif.

Struktur Asas: Gunakan Borang Borang dan Kumpulan Input

Bar navigasi Bootstrap disusun secara mendatar secara lalai, sesuai untuk meletakkan elemen seperti pautan dan butang. Untuk menambah kotak carian, anda biasanya menggunakan tag <form></form> dan gunakan kelas form-inline untuk memastikan unsur-unsur dipaparkan berturut-turut.

 <nav class = "navbar navbar-expand-lg navbar-light bg-light">
  <div class = "container-fluid">
    <a class = "navbar-brand" href = "#"> jenama </a>
    <Button class = "Navbar-Toggler" Type = "Button" Data-Bs-Toggle = "Collapse" Data-Bs-Target = "#NavBarContent">
      <span class = "navbar-toggler-icon"> </span>
    </butang>
    <div class = "runtuh navbar-collapse" id = "navbarcontent">
      <form class = "d-flex ms-auto">
        <input class = "form-control ME-2" type = "Search" Placeholder = "Search" Aria-label = "Search">
        <butang kelas = "btn btn-outline-success" type = "hantar"> cari </butang>
      </form>
    </div>
  </div>
</nav>

• d-flex membolehkan unsur-unsur dalaman borang disusun secara mendatar
• ms-auto membolehkan borang diselaraskan ke kanan (bergantung kepada keperluan)
• me-2 menetapkan sedikit ruang antara kotak input dan butang
• btn-outline-success adalah pilihan gaya visual yang boleh diganti mengikut gaya projek

Letakkan di sebelah kanan atau kiri? Tentukan berdasarkan senario penggunaan

Lokasi kotak carian akan menjejaskan pengalaman pengguna, dan biasanya terdapat beberapa amalan biasa:

• Diletakkan di sebelah kanan bar navigasi : yang paling biasa, ia mematuhi tabiat penyemakan imbas pengguna dari kiri ke kanan, sesuai untuk kebanyakan laman web
• Diletakkan di tengah-tengah pautan navigasi : Sesuai untuk laman web dengan carian sebagai fungsi teras (seperti e-dagang, platform kandungan)
• Dalam menu lipat : Sesuai untuk mudah alih, menjimatkan ruang

Sekiranya anda mahu kotak carian sentiasa betul, anda boleh menulisnya seperti ini:

 <div class = "runtuh navbar-collapse" id = "navbarcontent">
  <ul class = "Navbar-nav ME-Auto MB-2 MB-LG-0">
    <li class = "nav-item"> <a class = "nav-link" href = "#"> home </a> </li>
    <li class = "nav-item"> <a class = "nav-link" href = "#"> tentang </a> </li>
  </ul>
  <form class = "d-flex">
    <input class = "form-control ME-2" type = "Search" Placeholder = "Search" Aria-label = "Search">
    <butang kelas = "btn btn-outline-success" type = "hantar"> cari </butang>
  </form>
</div>

• me-auto adalah untuk memberi ruang antara pautan navigasi dan kotak carian
• mb-2 mb-lg-0 adalah untuk menjadikan menu mudah alih kelihatan bersih

Pengoptimuman mudah alih: Elakkan susun atur dengan tidak betul

Pada skrin kecil, jika kotak carian terlalu luas, ia boleh menyebabkan susun atur yang salah. Ia boleh dioptimumkan dengan menetapkan lebar maksimum atau menggunakan kelas responsif.

 <form class = "d-flex w-100">
  <input class = "form-control ME-2 flex-grow-1" type = "Search" Placeholder = "Search" Aria-label = "Search">
  <butang kelas = "btn btn-outline-success" type = "hantar"> cari </butang>
</form>

• w-100 memastikan bahawa borang mengisi bekas
• flex-grow-1 membolehkan kotak input untuk mengembangkan lebar secara automatik
• Jika anda mahu butang menjadi butang ikon di bahagian mudah alih, anda boleh menambah pertanyaan media atau menggunakan kelas alat responsif Bootstrap

Pada dasarnya itu sahaja

Inti menambah kotak carian adalah penggunaan struktur dan nama kelas yang betul. Tiada kompleks JS diperlukan, dan tidak memerlukan gaya tambahan. Selagi anda menggunakan rasional kelas terbina dalam Bootstrap, anda dapat dengan cepat melaksanakan kotak carian yang indah dan praktikal. Sudah tentu, jika terdapat keperluan interaksi yang lebih kompleks (seperti penyelesaian automatik, hasil pull-down, dan lain-lain), maka logik JS tambahan diperlukan.

Atas ialah kandungan terperinci Bagaimana cara menambah borang carian di dalam navbar bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!