Tulis di depan
Dalam artikel ini, saya akan berbicara tentang penggunaan bootstrap berdasarkan halaman web lansekap yang saya buat. Tangkapan layar halaman web adalah sebagai berikut:
Efek dan kode halaman web lengkap dapat dilihat di sini atau dilihat pada codepen. Efek utama yang perlu dicapai halaman web termasuk yang berikut:
1. Tombol login dan pendaftaran di bilah navigasi muncul setelah mengklik kotak modal login dan pendaftaran, dan jendela login dan pendaftaran dapat diaktifkan. Bilah menu responsif
2. Opsi lanskap di bilah navigasi dapat ditarik ke bawah. Klik gua tirai air Jiuzhaigou Lijiang di drop-down untuk menemukan tab yang sesuai.
3. Carousel Slideshow layar lebar
4. Klik untuk Mengaktifkan Halaman Tab
Sekarang kita mulai merangkul Bootstrap.
Saya percaya bahwa teman -teman telah mendengar tentang bootstrap atau menggunakannya. Di halaman web ini, saya menggunakan CDN Bootstrap v3.3.4. Klik di sini untuk mengunduh versi terbaru Bootstrap v3.3.5 atau klik di sini untuk mengunduhnya di situs web resmi. Saya percaya selalu ada satu yang cocok untuk Anda ~~~~~~
Dalam artikel ini, mari kita bicara tentang bilah navigasi terlebih dahulu.
Bilah navigasi
Sebelum menggunakan BS, Anda harus terlebih dahulu merujuk ke BS, termasuk CSS dan JS. Metode referensi sangat sederhana, sama dengan merujuk file eksternal biasa. Anda dapat menggunakan tautan CDN atau menempatkannya dalam referensi lokal. Kode diberikan di bawah ini.
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>myvin's landscape</title><link rel="stylesheet" href = "http://cdn.bootcss.com/boottrap/3.3.4/css/bootstrap.min.css"> <!-html5 shim dan response.js untuk IE8 Dukungan HTML5 —k a FILE —KOVE IF! 9]> <skrip src = "http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "http://cdn.bootcss.com/respons.js/1.4 <! [Endif]-> </head> <!-jQuery (diperlukan untuk plugin JavaScript Bootstrap)-> <skrip src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <!-termasuk semua plugin yang disusun (di bawah), di bawah), di bawah), di bawah) </script> </script> </script> </script>-termasuk semua plugin yang dikompilasi (di bawah), di bawah), di bawah), di bawah) </script> </Script> <! src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/boottrap.min.js"> </script>
Dalam contoh halaman web lansekap ini, saya menggunakan tautan CDN.
Pada saat yang sama, karena plugin BS didasarkan pada JQ, JQ juga harus diperkenalkan.
Pertama berikan kode lengkap bilah navigasi
<Av> <SEV> <!-Merek dan Toggle Dapatkan dikelompokkan untuk tampilan seluler yang lebih baik-> <div> <tombol type = "Tombol" data-kilat = "collapse" data-target = "#bs-example-navbar-collapse-1"> <span> Navigasi sakel href="#">Define a trademark yourself</a> </div> <!-- Navigation in the upper left corner --> <div id="bs-example-navbar-collapse-1"> <ul > <li ><a href="#">Homepage<span>(current)</span></a></li> <li> <a href="#" data-toggle="dropdown" role="button" aria-expanded = "false"> pemandangan <span> </span> </a> <uL role = "menu"> <li> <a href = "#jiuzhaigou"> jiuzhaigou </a> </li> <li> <a href = "#liJiang"> lijiang </a> </Li> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> href = "#shuilianong"> gua shuijian </a> </li> <li> </li> <li> <a href = "#shuilianandong"> gua shuijian </a> </li> <li> </li> <li> <a href = "#"> lebih banyak .. </a> <li> <li> <li> <a href = "#"> </a> </a> <li> <li> <a href = "#"> lebih banyak data-target="#about"><a href="#" >About </a></li> </ul> <form role="search"> <div> <input type="text" placeholder="Search for Attractions.."> <button type="button">Go</button> </div> </form> <ul> <li data-toggle="modal" data-target="#signin-signup-tab" ID = "SignIn-button"> <a href = "#"> login </a> </li> <li data-koggle = "modal" data-target = "#Signin-signup-tab" id = "tanda-button"> <a href = "#"> Register </a> </li> </ul> </Div> </Div> </Div> </nav
Komponen navigasi BS semuanya bergantung pada kelas .nav yang sama dan kode dijelaskan secara terpisah. Mari kita lihat paragraf ini terlebih dahulu:
<typon type = "tombol" data-koggle = "collapse" data-target = "#bs-example-navbar-collapse-1"> <span> Sakelar navigasi </span> <span> </span> <span> </span> <span> </span> </button>
Tujuan dari kode ini adalah untuk mengurangi viewport, opsi menu pada bilah navigasi akan runtuh, klik ikon Collapse, dan opsi menu pada bilah navigasi akan diatur secara vertikal. Kelas .Navbar-Inverse di NAV adalah warna terbalik. Teman dapat menghapus kelas .Navbar-Inverse untuk mengamati efeknya. Karena saya seorang kontrol hitam, saya menggunakan warna terbalik di sini. Jika Anda ingin menggunakan warna lain, emas kaya, teman dapat mencocokkannya sesuai dengan selera mereka sendiri. Kelas .Navbar-merek dapat digunakan untuk menentukan merek dagang situs web Anda sendiri. Saya akan menggunakan teks untuk mendefinisikan merek dagang sendiri di sini. Teman yang tertarik dapat menambahkan logo mereka sendiri. Kelas .dropdown-matgle dapat menerapkan pull-down, dan kelas .divider dapat menerapkan garis pemisah yang terang dan gelap.
Seperti namanya , kelas .Navbar-Right di kotak pencarian dan login dan pendaftaran adalah ke kanan.
Atribut Data
Di sini perlu untuk berbicara tentang atribut data BS. Di BS, pengembang dapat menggunakan semua plugin JS di BS hanya melalui atribut data. Ini adalah API kelas satu di BS dan seringkali merupakan cara pilihan kami untuk menggunakan plugin JS. Misalnya, data-kilat = "collapse" dan data-kilat = "dropdown" dalam kode di atas adalah cara untuk menggunakan plug-in JS di BS.
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua tentang artikel ini, saya harap akan sangat membantu bagi semua orang untuk mempelajari bilah navigasi bootstrap.