Banyak perusahaan sekarang menggunakan kerangka bootstrap dalam pengembangan. Bootstrap adalah karya tim Twitter, yang sangat menyederhanakan pengembangan front-end kami. (Saya akan merangkum beberapa penggunaan yang lebih sedikit nanti)
Belajar menggunakan API Saya sarankan Anda secara langsung melihat API situs web resmi, alamat: http://www.bootcss.com/
Berikut adalah beberapa rendering target:
Di bawah ini saya akan meringkas teknik dan prinsip dalam demo kecil:
Langkah pertama adalah mengunduh paket bootstrap terkompresi di http://www.bootcss.com/, buat index.html baru, gunakan Sublime atau editor lain untuk membuka halaman indeks, dan direktori setelah dekompresi adalah
Langkah 2 : Salin template dasar dari situs web resmi http://v3.bootcss.com/getting-started/ untuk memfasilitasi pengembangan selanjutnya.
<!DOCTYPE html><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"> <!-- The above 3 meta tags *must* be placed first, and any other content * harus * mengikuti mereka! -> <title> bootstrap 101 template </iteme> <!-bootstrap-> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <!-html shim dan response.js untuk IE8 dukungan elemen html5 tidak ada queries ifes ifes. <!-[jika lt yaitu 9]> <script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "// cdn.bootcss.com/respespespespespespespesppesppesppespent.js/1.4. </head> <hody> <h1> halo, dunia! </h1> <!-jQuery (diperlukan untuk plugin JavaScript Bootstrap)-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <! src = "js/bootstrap.min.js"> </script> </body> </html>
1) CATATAN: Referensi ke jQuery.js harus di depan bootstrap.min.js, dan yang terbaik adalah mengunduh secara manual jQuery.js dan menempatkannya di jalur JS, <skrip src = "js/jQuery.min.js"> </script>
Karena kemudian ketika saya meniru, saya menemukan bahwa efek animasi drop-down dan carousel hilang, dan saya menemukan bahwa file jQuery dari template dasar diunduh dan mungkin tidak terhubung ke internet, jadi saya tidak mengunduhnya. Yang terbaik adalah mengutip yang lokal sendirian.
2) Catatan: Referensi CSS ditempatkan di atas halaman dan referensi JS ditempatkan di bawah halaman, karena CSS perlu memuat halaman yang diberikan terlebih dahulu, dan JS perlu memuat dan mengeksekusi setelah rendering halaman selesai; dan pernyataan meta untuk perangkat seluler disesuaikan dengan: <meta name = "viewport" content = "width = perangkat lebar, skala awal = 1">
Langkah 3, bilah navigasi
1) Efek pemusatan: Container-fluent perlu diubah menjadi wadah
2) Ubah putih menjadi hitam dengan efek kontras: <av>
3) Bilah navigasi ditetapkan ke atas dan tambahkan atribut kelas waktu: navbar-fixed-top
<nav> <!-- Brand and toggle get grouped for better mobile display --> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> <span></span> </button> <a href = "#"> Zootopia </a> </div> <!-Kumpulkan tautan NAV, formulir, dan konten lainnya untuk beralih-> <div id = "BS-example-navbar-collapse-1"> <ul> <li> <a href = "#"> Homepage <span> (Span> (span> </span> </a> Deskripsi </a> </li> <li> <a href = "#"> fitur </a> </li> <li> <a href = "#"> tentang </a> </li> </div> <!-/.navbar-collapse-> </div> <!-/.container-fluid-> </nav>
4) Bilah navigasi akan menutupi bagian atas tubuh, jadi tambahkan gaya
<style type = "text/css"> body {padding-top: 50px; } </style>5) Item navigasi unggulan menambahkan menu drop-down
<li> <a href = "#" data-koggle = "dropdown"> fitur </a> <ul> <li> <a href = "#"> hewan 1 </a> </li> <li> <a href = "#"> </a> </li> <li> <a href = "#"#"> </a> <li> <li> <a href ="#"#"> </a> <li> <li> <a href = "#"#"> </a> <a> <li> <a href ="#"#"> </a> </a> <li> <a href = "#"#"> </a> <a> <li> <a href ="#"#"> </a> <a> <li> <a href = "#"#"> </a> <a> <li> 4 </a> </li> </li> </li>
Perhatikan bahwa isi submenu bersarang di tag Li terluar, dan tag LI memiliki dropdown kelas, dan submenu juga merupakan tag UL, dan kelasnya adalah dropdown-menu. Lihat di atas untuk hubungan pemetaan tertentu.
Langkah 4: Tingkatkan efek rotasi dan salin dan ubah modul carousel dari komponen bootstrap:
<Div id = "carousel-example-generic" data-ride = "carousel"> <!-indikator-> <ol> <li data-target = "#carousel-example-generic" data-slide-to = "0"> </li> <li data-target = "#carousel-example-generik" data-slide-to = " data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div role="listbox"> <div> <img src="image/1.jpg"> <div> <h1>Zootopia 1</h1> <p>The visiting of the female house viewing position that expands the female house viewing position that expands the experience of the female house viewing position that opens the two numbers that occur in the country</p> </div> </div> <div> <img src="image/2.jpg"> <div> <div> <img src="image/2.jpg"> <div> <h1>Zootopia 1</h1> <p>The visiting of the female house viewing position that expands the experience of the female house viewing position that opens Dua angka yang terjadi di negara ini </p> </div> </div> <div> <img src = "image/3.jpg"> <div> <h1> Zootopia 1 </h1> <p> Kunjungan Posisi Tontonan Wanita </Pos/Posisi Div </Posisi Div> </Posisi Div </Posisi Div </Posisi Div </Posisi Div </Posisi Div </Posisi Div </Posisi Div> yang membuka dua angka yang terjadi di negara itu </posy </ href = "#carousel-example-generic" peran = "tombol" data-slide = "prev"> <span aria-hidden = "true"> </span> <span> halaman sebelumnya </span> </a> <a href = "#span-h-h-h-h-h-h-h-h-h-h-generic =" button "data-slide =" next "> </span-h-h-h-h-h-h-h-h-h-h-h-h-h-h-h-h-lip </div>
1) Agar tidak memiliki ruang kosong atau celah yang tersisa saat memutar gambar, tambahkan gaya
.carousel {height: 500px; Latar Belakang: #000; } .carousel .item {height: 500px; Latar Belakang: #000; } .carousel img {lebar: 100%; }2) Tetapkan gaya untuk teks untuk membuatnya lebih indah
.casousel-caption p {margin-bottom: 20px; font-size: 20px; Line-Height: 1.8; }Efek saat ini adalah sebagai berikut
Mari kita lanjutkan: (pengkodean sedang diperbarui ...)
Bagian kedua telah diperbarui, demo dalam kasus pengembangan front-end berdasarkan Bootstrap (II)
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan topik yang luar biasa kepada Anda: Tutorial Pembelajaran Bootstrap