Pertama, Anda harus memperkenalkan bootstrap dan jQuery
Rekomendasikan CDN: http://cdn.gbtags.com/index.html
Kemudian mulailah menulis kode HTML. Jika Anda tidak ingin mengubah efek tampilan, pada kenyataannya, CSS tidak diperbolehkan menulis 2333.
Karena ada banyak kode HTML, di sini dibagi menjadi tiga bagian dan kemudian kode HTML keseluruhan adalah yang terakhir
Pertama -tama, seperti yang ditunjukkan pada gambar di atas, Anda perlu memahami komponen bootstrap berikut
• Bilah navigasi
•Tombol
•Membentuk
• Menu drop down
Bahkan, ada banyak gaya komponen di atas. Kita hanya perlu tahu sebagian darinya. Jika Anda ingin tahu lebih banyak, silakan merujuk ke http://www.gbtags.com/api/boottrap3.2/bootstrap-doc/components/index.html untuk informasi lebih lanjut.
PS: class {} Ini hanya komentar, bukan kode html
PS2: Menyediakan file HTML dengan debugging kasus online
Bilah navigasi dan tata letak logo batang navigasi
<!-Buat tata letak Logo Navigasi Bootstarp dan Logo Navigasi-> <Av> <div> // do sth </div> </av>
Tombol navigasi
<!-Buat tombol-> <!-Class {Navbar-koggle: Meneruskan tombol ini ke JS dapat diklik: Jika Anda tidak menggabungkan navbar-collapse, itu adalah kelas default .. Jika Anda tidak menambahkannya, Anda tidak menemukan bug.} Data-kilat = "Collapse": memperkenalkan collapse plug-in data-target = "#navbrar. aria-expanded="false":Assisted reading function..Settings for special groups--><button type="button" data-toggle="collapse" data-target="#navbar-gbtag" aria-expanded="false"><!--Add some icons and instructions on the button class{sr-only:Hide this label incon-bar: Change the icon style manually and change the icon style to glyphicon-star Coba}-> <span> klik saya </span> <span> </span> <span> </span> <span> </span> <span> </span> </tutton>Membentuk
<Div> <!-class {Form-control: atur lebar ke % tetapi kami mengatur bentuk navbar dalam formulir elemen induk sehingga lebar akan dikendalikan oleh jumlah tertentu}-> <input type = "text" placeholder = "cari"/> </div> <!-formulir-> <typute type = "kirim" pencarian </tombol> </div> <!Menu pull-down
<li> <!-class {dropdown-toggle: Deklarasikan ini adalah daftar yang dapat diturunkan. Sebenarnya, saya tidak menemukan tujuan spesifik dari kelas ini. Batalkan dan tidak menemukan bugspan.caret {Gaya gambar ikon untuk segitiga kecil}} data-kilat = "dropdown": Perkenalkan atribut yang diperlukan dari peran komponen menu tarik-turun = "tombol": bertindak sebagai deklarasi tambahan. Declare this is a button--><a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown menu name<span></span></a><ul><li><a href="">bootstrap</a></li><!--class{divider:divider style}role="separator":Declare this Elemen sebagai Divider-> <Li Role = "Separator"> </li> <li> <a href = ""> Harap ikuti label geek </a> </li> </ul> <!-menu tarik-turun->Implementasi keseluruhan HTML
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> bar navigasi responsif </iteme> <tautan rel = "stylesheet" type = "text/css" href = "../ css/bootstrap.min.css"/<script scref = "JoVer. charset = "utf-8"> </script> <script src = "../ js/bootstrap.min.js" type = "text/javascript" charset = "utf-8"> </script> </head> <!-Buat bootstarp navigasi bootstarp-> <nav> <!-Buat A BOOTSTRAP FULK BOOTSTARP BOTSTARP-> <r nav> <!-Buat BOOTStrap BOOTSRAP AVIOP BOTSTARP-> <AV> <! Layout-> <!-Catatan: Anda harus membuat navbar-header, membungkus logo dan tombol responsif. Sebaliknya ... semua orang menghapus navbar-header dan mempersempit layar dan mengklik menu drop-down ke Know-How-> <v> <v> <p> Tag geek: KUMBLE KOMPLET TO!-Buat Kelas Kabel Navbar-Collapse, ini adalah kelas default. Tampaknya tidak ada bug yang ditemukan tanpa menambahkannya. } data-toggle="collapse":Introduce collapse plug-in data-target="#navbar-gbtag":When clicking the button, which tag is redirected/opened aria-expanded="false":Assisted reading function..Settings for special groups--> <button type="button" data-toggle="collapse" data-target="#navbar-gbtag" aria-expanded="false"> <!--Add some Ikon dan instruksi pada kelas tombol {hanya SR: Sembunyikan tag ini incon-bar: ubah gaya ikon dan ubah gaya ikon menjadi Glyphicon-Star Coba}-> <span> klik saya </span> <span> </span> <pan> </span> <span> </span> </tombol> </div> </span-create navigasi lay. Jika runtuh dibatalkan, maka tombol diperluas secara default. Navbar-Collapse: Kelas yang diperlukan untuk tata letak elemen bilah navigasi} ID: Konsisten dengan data-targe tombol-> <div id = "navbar-gbtag"> <!-Buat kelas elemen internal bilah navigasi {Nav: Buat kelas dasar yang diperlukan untuk elemen internal bilah navigasi. Navbar-nav: Ini tidak mudah dijelaskan. Karena saya melihat dokumentasi resmi dan tidak mengatakannya secara rinci. Di sini saya akan menjelaskannya secara singkat: membuat UL berpusat secara horizontal dan secara horizontal. Pada saat yang sama, lebar adalah lebar konten dan tidak akan memeras elemen di belakangnya, seperti formulir; Dan akhirnya Anda dapat menghapus kelas ini dan mencoba mengetahui bahwa itu digunakan. Navbar-Right: Kelas yang disusun oleh bilah navigasi}-> <ul> <!-class {Active: klik default, dropdown: kelas dasar yang diperlukan untuk membuat menu dropdown}-> <li> <a href = ""> Relsoul </a> </li> <li> <a href = ""> gbtag </a> </li> <li> <a href = ""> gbtag </a> </li> <li> <a href = ""> gbtag </a> Daftar yang bisa diturunkan. Sebenarnya, saya tidak menemukan tujuan spesifik dari kelas ini. Saya membatalkannya dan tidak menemukan bug. Span .caret {Gaya gambar ikon dari segitiga kecil}} data-koggle = "dropdown": Memperkenalkan atribut yang diperlukan dari peran komponen menu tarik-turun = "tombol": berfungsi sebagai deklarasi tambahan. Declare this is a button--> <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown menu name<span></span></a> <ul> <li><a href="">bootstrap</a></li> <!--class{ divider: Divider style} role="separator": Declare this element as a divider --> <li role="separator"></li> <li><a href="">Please pay attention to the geek tag</a></li> </ul><!--Drop-down menu--> </li><!--Navigation subelement--> </ul><!--Navigation element--> <!--class{ navbar-form: Can present good vertical alignment specific reference http://v3.bootcss.com/components/#navbar navbar--left: digunakan untuk menentukan penyelarasan elemen dalam bilah navigasi http://v3.bootcss.com/components/#navbar-component-lignment}-<bentuk role = "components/#navbar- alignment {> <Formulir" BTN: Gaya tombol didasarkan pada referensi spesifik kelas BTN BTN http://v3.bootcss.com/csss/#buttons Form-GROUP: Kelas dasar untuk daftar elemen tunggal Referensi spesifik http://v3.bootcss.com/css/#forms}-<Div> <! parent element form so the width will be controlled by a certain amount}--> <input type="text" placeholder="search" /> </div><!--form group--> <button type="submit">Search</button> </form><!--Form--> <ul> <li><a href="">Soul</a></li> <li> <a href="#" data-toggle="dropdown" Role = "Tombol" aria-haspopup = "true" aria-expanded = "false"> Nama menu drop-down <span> </span> </a> <ul> <li> <a href = ""> bootstrap </a> </li> <!-class {Divider: Divider Style} Role = "pemisah": lia ini sebagai elemen ini sebagai a {pembagi: gaya pembagi} role = "Lied" Lied {Li " href = ""> Harap ikuti tag geek </a> </li> </ul> <!-menu drop-down-> </li> <!-Sub-elemen navigasi 2-> </ul> <!-Elemen Navigasi 2-> </Div> <!-Layout Navigasi-> </Div> <!-Tata Letak SKREEN FULL SCREEN-> </Navigasi> </Div> </Div> </ht.Konten di atas adalah kode contoh untuk membuat bilah navigasi responsif oleh editor kepada Anda. Saya harap ini akan membantu Anda. Jika Anda ingin mengetahui informasi lebih lanjut, harap perhatikan situs web Wulin.com. Terima kasih!