Saya terus menulis tata letak artikel sebelumnya. Di artikel sebelumnya, saya telah menyelesaikan tata letak bilah navigasi dan iklan.
Mulailah menempatkan:
Saya pikir rendering terakhir seperti ini, sebagai berikut: Saya dibagi menjadi tiga screenshot halaman, yang terlalu besar:
Kemudian, yang terakhir belum selesai akan dilanjutkan:
Langkah 5: Menambahkan sistem grid, saya memilih tata letak tiga kolom COL-MD-4; Kotak penuh adalah 12, dan 4 adalah sepertiga dari 12. Anda juga dapat melakukan tata letak secara responsif dan mengatur beberapa kisi:
<Div id = "tag_container"> <div> <div> <mmg src = "gambar/3.jpg"> <h2> animal1 </h2> <p> Hotel Linka baru saja mengatakan Fenghan melihat lembaga suvenir besar yang dikirim ke belakang </p> <p> <a href = "#"> Klik saya </a> src = "gambar/3.jpg"> <h2> animal1 </h2> <p> Hotel Linka baru saja mengatakan Fenghan melihat lembaga suvenir besar yang dikirim ke belakang </p> <p> <a href = "#"> klik saya </a> </p> </div> <v> <img SRC = "gambar/3. jpg Fenghan melihat lembaga pencarian rumah besar yang dikirim oleh saya </p> <p> <a href = "#"> klik saya </a> </p> </div> </div> </div> </div> </div>
1) Kotak harus dalam wadah atau div yang berbalik kontainer, sehingga penyelarasan dan bantalan yang sesuai dapat secara otomatis ditetapkan.
2) Buat ID "tag_container" dan bagian dengan kelas Col-MD-4 berpusat dan selaras:
#tag_container .col-md-4 {text-align: center; }Langkah 6: Tetapkan jarak garis dan bagi bagian atas dan bawah
<hr> </hr>
CSS adalah
hr .divider {margin: 40px; }Langkah 7: Pembuatan halaman tab. Gambar berikut adalah rendering dari tiga halaman tab:
1) Prinsip Tab Halaman:
<ul role = "tablist"> <li> <a href = "#an1" role = "tab" data-koggle = "tab"> animal1 </a> </li> <li> <a href = "#an2" role = "tab" data = "Tab"> </a> </li> <li> <a href = "Tab"> </a> </li> <li> <a href = "Tab"> animal2 </a> </li> <li> <a href = " Data-koggle = "tab"> animal3 </a> </li> </ul> <div> <div id = "an1"> </div> <div id = "an2"> </div> <div id = "an3"> </div> </div>
Struktur halaman tag adalah: Daftar UL menyatakan tag dan label class = "nav nav-tab" = "tablist"
Tautan dalam tag LI adalah peran yang ditandai = "tab"-data-kilat = "tab" sehingga fungsi membuka halaman halaman tab dapat dicapai. HREF = "#an1" dari setiap halaman tab ditautkan ke tata letak tampilan berikut.
Struktur tata letak yang diperluas: Di <verv>, setiap halaman tab memiliki panel. Perhatikan bahwa ID memetakan ke halaman tab di atas, sehingga halaman dapat dibuka. <Div id = "an3">
2) Tambahkan tata letak di halaman tag
<ul role = "tablist"> <li> <a href = "#an1" role = "tab" data-koggle = "tab"> animal1 </a> </li> <li> <a href = "#an2" role = "tab" data = "Tab"> </a> </li> <li> <a href = "Tab"> </a> </li> <li> <a href = "Tab"> animal2 </a> </li> <li> <a href = " Data-koggle = "tab"> animal3 </a> </li> </ul> <div> <v ID = "an1"> <div> <dv> <h2> animal1 <span> zootopia </span> </h2> <p> Ajdkgjfd melihat harga pesawat teknologi waktu yang dikembangkan oleh pesawat teknologi waktu. Jika Hasil Hasil Hari Kepolisian Kedutaan Shiguo, harga Ka Lagu Mourning Buatan IrjeigrugitajdokgjiJrgi </p> </div> <div> <mmg src = "gambar/1.jpg"> </div> </Div> </Div> <div> <div> <pan h2er2 </divia </div> </Div> <v> <div> <div> <paner2 hewar2 </divia </Div> <v> <div> <div> <pan h2er2 <p> Ajdkgjfd melihat harga pesawat teknologi waktu yang dikembangkan oleh pesawat teknologi waktu. Jika Hasil Hasil Hari Kepolisian Kedutaan Shiguo, harga Ka Lagu Mourning Buatan IrjeigrugitajdokgjiJrgi </p> </div> <div> <img src = "gambar/2.jpg"> </div> </div> </Div> <Div ID = "an3"> </Div> </div> </Div> <Div ID = "an3"> </Div> </div> </Div> <Div ID = "an3"> </Div> </div> </Div> <Div ID = "an3"> </Div> </div> </Div> <Div ID = "an3"> </Div> </Div> <span> zootopia </span> </h2> <p> Ajdkgjfd melihat harga pesawat teknologi waktu. Jika hasil Hari Kepolisian Kedutaan Shiguo, harga Ka Lagu Mourning Buatan IrjeigrugitajdokgjiJrgi </p> </div> <div> <img src = "gambar/3.jpg"> </div> </div> </div> </div> </div>
1) Atur margin atas halaman tab
.feature {padding: 30px 0}2) Atur font judul halaman tab, dll.
.feature-heading {font-size: 50px; Warna:#2A6496; margin-top: 120px; }3) Atur format subtitle dari halaman tab:
.feature-heading .text-muted {font-size: 28px; Warna: #999; }Langkah 8: Tambahkan pemberitahuan hak cipta bawah, rendering adalah sebagai berikut:
<footer> <p> <a href = "#top"> kembali ke atas </a> </p> <p>@2016 rongyu System </p> </tfooter>
Catatan: class = "Tarik-kanan" dapat menarik elemen ke kanan, yang merupakan fitur CSS Bootstrap.
Langkah 9: Tambahkan tombol pop-up tentang:
<Div ID = "Tentang"> <div> <div> <div> <tombol type = "tombol" data-dismiss = "modal" aria-label = "tutup"> <span aria-hidden = "true"> × </span> </button> <h4> Tentang </h4> </div> <v> <p> Zootopia "How-disney, co-disner, coore dengan coor moo dengan coore dengan disrey, co-disner, coore, coore, coore, coor, dan disuarakan oleh Ginnifer Goodwin, Jason Bateman, Shakira, Allen Tuddick, Idris Elba, J.K. /.modal-content-> </div> <!-/.modal-dialog-> </div> <!-/.modal-dialog-> </div> <!-/.modal->
1) jendela pop-up statis dibagi menjadi tiga bagian, judul, bentuk dan tombol; Di antaranya, kami hanya perlu satu tombol dan yang lainnya berkomentar. Dan tambahkan id = akan memfasilitasi posisi di bawah ini;
2) Di bilah menu tentang bilah navigasi, tambahkan tautan sakel, kilat data = "modal", dan ID sesuai dengan data-target = "#tentang":
<li> <a href = "#" data-koggle = "modal" data-target = "#about"> tentang </a> </li>
Langkah 10, Posisi Menu
Klik pada kolom fitur bilah navigasi dan halaman tab yang sesuai akan dibuka; Sepotong kode JS diperlukan untuk mengimplementasikannya
<script> $ (dokumen) .ready (function () {$ ("#demo-navbar .dropdown-menu a"). klik (function () {var href = $ (ini) .attr ('href'); // alert (href); $ ("#tab-list a [href = '" + href + ");"). " </script>1) Navigasi melalui posisi ID $ ("#demo-navbar .dropdown-menu a") dan atur acara klik;
2) tab ("'show") untuk membuka halaman tab $ ("#tab-list a [href ='" + href + "']").
Dengan cara ini, pembelajaran bootstrap baru saja dimulai.
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
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.