Menggunakan Bootstrap untuk menulis carousel carousel carousel dapat menghemat banyak waktu. Image Carousel adalah teknologi umum di halaman web, tetapi jika ditulis secara langsung, itu membutuhkan pengkodean javascript yang panjang, dan tidak mudah untuk mengontrol ukurannya.
Izinkan saya juga mengatakan bahwa makna asli dari kata carousel adalah kuda komidi putar.
1. Tujuan Dasar
Carousel untuk menulis banyak gambar di halaman web, mouse ditempatkan di atasnya dan deskripsi gambar disediakan di bawah setiap gambar.
Karena perangkat lunak perekaman video komputer penulis cukup buruk, ia juga merasa bahwa tidak perlu menggambar terlalu banyak waktu. Dia berpikir bahwa selama itu dapat menjelaskan masalahnya, gif di bawah ini lebih banyak kehilangan warna, tetapi efek dasarnya masih ditunjukkan.
Carousel, komponen carousel gambar bootstrap, tidak kompatibel dengan IE6 dan 7. Jika dukungan IE6 diperlukan, Anda perlu mengunduh dukungan komponen IE6 Bootstrap dari situs web ini (klik untuk membuka tautan). Pada saat yang sama, deskripsi file gambar di Google Chrome akan meresap sedikit hitam, tetapi tidak akan mempengaruhi penelusuran:
Situasi presentasi di browser yang berbeda berbeda. Efek IE8 adalah seperti ini:
2. Ide Dasar
Lihat tata letak halaman dari gambar berikut:
3. Proses Produksi
1. Langkah pertama di "Bootstrap Bootstrap sebelumnya untuk menulis kotak dialog yang dapat ditutup pada halaman web saat ini" (klik untuk membuka tautan)
Karena Anda perlu menggunakan bootstrap, Anda dapat mengunduh komponen di situs web resmi (klik untuk membuka tautan). Versi bootstrap yang digunakan dalam lingkungan produksi tidak kompatibel dengan 2. Disarankan untuk menggunakan bootstrap3 secara langsung sesuai dengan dokumen pengembangannya. Artikel ini juga dibuat berdasarkan bootstrap3. Pada saat yang sama, efek JavaScript yang disediakan oleh Bootstrap3 perlu didukung di JQuery 1.11 (klik untuk membuka tautan). Anda dapat mengunduh JQuery 1.11 yang kompatibel dengan browser lama IE6 dari situs web resmi jQuery, daripada jQuery2 yang tidak kompatibel dengan browser lama IE6. Setelah mengunduh, konfigurasikan direktori situs. Decompress bootstrap3 langsung ke direktori situs, dan tempatkan jQuery-1.11.1.js di direktori JS, yaitu, direktori yang sama dengan bootstrap.js. Struktur folder situs kira -kira sebagai berikut:
2. Berikut ini adalah kode lengkap dari halaman web, dan bagian berikut akan dijelaskan:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <link href = "css/bootstrap.css" rel = "stylesheet" media = "screen"> <script type = "text/javascript" src = "js/jQuery-1.11.1.js"> </script> <script type = "text/javascript" src = "js/bootstrap. <body> <div> <div> <h1> gambar carousel </h1> </div> <div> <div id = "carousel" data-ride = "carousel" data-interval = "1000"> <ol> <li data-target = "#carousel-lib-target-lib#" lib#"lib#" lib#"lib#" LIG-TUPLEX = "0"> </li> data-slide-to = "1"> </li> <li data-target = "#carousel-example-generic" data-slide-t = "2"> </li> </l> <div role = "listbox"> <v> <a href = "gambar/img0.jpg"> <img src = "image0. </h3> <p> Deskripsi gambar I Am Img0 </p> </div> </div> <div> <a href = "gambar/img10.jpg"> <mmg src = "gambar/img10.jpg"> </a> <h3> Img10 </h3> <p> <p> </a> <h3> Img10 </h3> <p> <p> </a> <h3> IMG10 </h3> <p> <p> <pm imrage iM am href = "gambar/img2.jpg"> <img src = "images/img2.jpg"> </a> <div> <h3> img2 </h3> <p> Deskripsi gambar I Am Img2 </p> </div> </Div> <a href = "#KAROUSEL-EXAMING" PERSEGI = " <a href = "#carousel-example-generic" role = "Tombol" data-slide = "next"> <span> </span> </a> </div> </div> </div> </body> </html>
(1) Bagian <head>
<Head> <!-Deklarasikan pengkodean web, secara otomatis beradaptasi dengan ukuran browser. Untuk menggunakan CSS Bootstrap, diperlukan dukungan jQuery. Untuk menggunakan JS Bootstrap, title-> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <meta name = "viewport" content = "width = device-width, skala awal = 1.0, skalaum userport = no"> <tautan href = "css/boots = boots = boots = no" no "> <link href =" css/boots = boots = boots = no "no" <link href = "css/boots = boots = boots/boots = no" no "<link hRef =" css/boots = boots/boots. <type script = "Text/JavaScript" src = "js/jQuery-1.11.1.js"> </script> <script type = "text/javascript" src = "js/bootstrap.js"> </script> <title> gambar carousel </title> </head>
(2) <body> bagian
Pertama -tama nyatakan kontainer wadah, yang secara otomatis dapat membuat semua elemen halaman web milik pusat halaman web, dan kemudian menulis elemen dalam wadah ini.
Pertama -tama tulis header, nyatakan header, dan kemudian tulis sepotong teks di dalamnya.
<hv> <h1> gambar carousel </h1> </div>
Kemudian tentukan div lapisan yang tidak disebutkan namanya, yang terutama digunakan untuk menstandarkan komponen carousel gambar. Ukuran komponen carousel gambar bootstrap tidak dapat ditentukan untuk elemen di dalamnya, dan parameter lebar dan tinggi ditambahkan. Dengan cara ini komponen carousel gambar akan terdistorsi. Pada saat yang sama, untuk memusatkan komponen ini, Anda harus menggunakan margin-kanan: otomatis; margin-kiri: otomatis; Dalam atribut gaya Div to Constrain. Align tambahan = "Center" tidak berpengaruh sama sekali.
Akhirnya, ada deskripsi terperinci dari setiap bagian komponen gambar:
<SEV> <!-Nama komponen carousel gambar adalah carousel, dan elemen data-ride diperlukan oleh bootstrap. Nilai data-interval adalah mengubah gambar setiap 1000 milidetik, yaitu, 1 detik. Jika nilai ini terlalu banyak, komponen akan terdistorsi-> <div id = "carousel" data-ride = "carousel" data-interval = "1000"> <!-Ada beberapa gambar yang ditentukan di sini. Jika ada satu gambar lagi, tambahkan satu item lagi di bawah ini. Nilai data-slide-to ditambahkan satu. The first picture, that is, the 0th picture must have class="active" otherwise the component will not work--> <ol> <li data-target="#carousel-example-generic" data-slide-to="0"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" Data-slide-to = "2"> </li> </l> <Div Role = "ListBox"> <!-Berikut ini adalah pengeditan terperinci dari setiap gambar. Nilai kelas dari gambar pertama harus item aktif, dan sisanya adalah item-> <v> <!-Ini berarti klik pada gambar img0.jpg untuk membuka hyperlink img0.jpg. Jika tidak ada hyperlink, hapus tag <a>-> <a href = "gambar/img0.jpg"> <img src = "gambar/img0.jpg"> </a> <dv> <!-Deskripsi teks di bawah gambar-> <h3> Img0 </h3> <p> gambar deskripsi saya img0 </pup </h3> <p> href = "gambar/img10.jpg"> <img src = "gambar/img10.jpg"> </a> <div> <h3> img10 </h3> <p> Deskripsi gambar I Am Img10 </p> </div> </div> <v> <a href = "img2.jpg" </div> <div> <Div> <a href = "image/img2.jpg src = "gambar/img2.jpg"> </a> <div> <h3> img2 </h3> <p> Deskripsi gambar I Am Img2 </p> </div> </div> </div> <!-Berikut adalah dua tombol dalam komponen yang berpikir ke kiri dan kanan, "KUCK-" KUCUM-LIGAS-"KUDUM-" KUCUPLE- " <span> </span> </a> <a href = "#carousel-example-generic" role = "Tombol" data-slide = "next"> <span> </span> </div> </div>
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 konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.