Karena kebutuhan proyek, saya berencana untuk mempelajari kerangka bootstrap dengan baik. Saya belajar sedikit sebelumnya. Kerangka kerja tidak sulit secara keseluruhan, tetapi masih ada banyak hal yang terlibat. Jika Anda ingin menguasainya dengan mahir, Anda masih perlu berlatih lebih banyak.
1. Apa itu Bootstrap?
Apa itu BS? Artinya, alat kerangka kerja standar yang dibangun oleh halaman front-end telah ditulis dalam gaya css.js, dan hanya perlu digunakan.
Bagaimana cara menggunakan BS? Efeknya terutama meningkat dengan menggunakan kelas yang berbeda, dan setiap kelas memiliki fungsi yang sesuai.
Manfaat BS: Meningkatkan efisiensi pengembangan, membuat desain halaman lebih indah, dan mendukung pengembangan responsif. Alamat unduhan: https://github.com/foreverjiangting/bootstrap
Dokumentasi Belajar: http://v3.bootcss.com/getting-started/
2. Desain Gaya CSS
1. Berdasarkan dokumentasi HTML
Bootstrap mengacu pada beberapa elemen HTML, sehingga header perlu ditulis sebagai kolom sampel yang ditunjukkan di bawah ini.
<! Doctype html> --- berisi deklarasi dokumen html5, semua browser menyalakan mode standar <html> <head> <meta charset = "utf-8"> <meta http--equiv = "x-ua-kompatibel" content = "ie = edge"> <meta name = "content" well! Tag * harus * ditempatkan terlebih dahulu, dan konten lainnya * harus * mengikutinya! Pastikan tata letak responsif didukung-> <itement> bootstrap </iteme> [/kode] [kode] <!-File CSS inti bootstrap baru-> <tautan rel = "stylesheet" href = "// cdn.bootcss.com/boottrap/3.3.5/csss/boottrap.snoTcss.com quenkss.com -> <link rel = "stylesheet" href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">< !-- file jQuery. Pastikan untuk memperkenalkan-> <skrip src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>< !-- file javascript inti bootstrap terbaru-> <skrip src = "// cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script></head><body><h1>Hello, dunia! </h1> </body> </html>
2. Tata Letak Sistem Grid
Konten tata letak dengan mengatur baris dan kolom. Bootstrap mengatur halaman ke 12 kolom. Tata letak dengan mengubah jumlah kolom, seperti mengatur tiga kolom lebar yang sama:
<!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> </iteme> <link href = "css/bootstrap.css" rel = "stylesheet"> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <skrip src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <script src = "http://cdn.bootcss.com/boottrap/3.3.4/js/boottrap.min.min layout--><div><!-- or container-fluid--> <div> -- col-xs-4 : refers to a small device less than 768px <div>11</div> -- col-sm-4 : refers to a device >=768px <div>22</div> -- col-md-4 : refers to a device >=992px <div>33</div> -- col-lg-4 : refers to a device less than 1200px</div> <div>11</div> <div>22</div> <div>33</div> </div> <div>33</div> </div> <div> <div>11</div> <div>22</div> <div>33</div> </div> <div>33</div> </div> <div> <div>11</div> <div>22</div> <div> 33 </div> </div> <div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> </body> </html>
Ada empat cara untuk menulis format jaringan CSS, yang terutama digunakan dalam resolusi perangkat yang berbeda.
2: Terjemahkan kolom
Gunakan offset untuk menggerakkan. Yaitu, jumlah kolom yang diterjemahkan
<dv> <!-atau container-fluid-> <div> <div> 11 </div> <div> 22 </div> <div> 33 </div> --- mengacu pada hak 33 </Div> <ver> 11 </div> <v> 22 </Div> </Div> Div>-Div> </Div> </Div> --- merujuk pada hak 33 </Div> </Div> </Div> --- merujuk pada hak 33 </Div> </Div> </Div>- <div> 33 </div> </div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> <!-Translate Column->
Efeknya adalah sebagai berikut:
33 Karena kedua kolom diterjemahkan, tidak dapat memenuhi persyaratannya untuk menempati 4 kolom, sehingga diperas ke baris berikutnya dan mulai menempati 4 kolom. Sederhananya, setara dengan memindahkan seluruh blok div kanan.
3: Kolom bersarang
Artinya, kolom sarang di kolom grid. Mari kita bandingkan.
<vv> <!-atau container-fluid-> <verv> <viv> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> <div> <div> 11 </div> </Div> </Div> </Div> </Div> <v> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </div> </div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> </div>
Efeknya adalah sebagai berikut:
Apakah Anda pernah menemukan masalah? Mengapa tidak ada distribusi yang sama dari 8 di atas?
Alasan: Mari kita lihat konsol debug
.COL-XS-1, .COL-XS-10, .COL-XS-11, .COL-XS-12, .COL-XS-2, .COL-XS-3, .COL-XS-4, .COL-XS-5, .COL-XS-6, .COL-XS-7, .COL-XS-8 ,.COL-XS-6, .COL-XS-7, .COL-XS-8,. Padding-left: 15px; Padding-Right: 15px; Posisi: relatif;}
Ditemukan bahwa padding-kiri dan petak-kanan keduanya 15px. Ini karena bantalan antar kolom layak dipengaruhi, jadi mengapa div kedua tidak memiliki pengaruh? Mari kita jelajahi prinsip grid pagar.
1. "Baris" harus dimasukkan dalam .container (lebar tetap) atau .container-fluid (lebar 100%) untuk memberikan penyelarasan dan bantalan yang sesuai.
2. Buat selokan di antara kolom dengan mengatur properti padding untuk "kolom". Dengan menetapkan margin negatif untuk elemen .row , set padding offset untuk elemen .container
Secara tidak langsung, "kolom" yang terkandung dalam padding "baris".
Catatan : Saat ini, baris telah mengimbangi bantalan kolom, jadi tidak ada nilai bantalan.
4: Penyortiran kolom
Terutama menggunakan col-xs-push-* col-xs-pull-* (* mewakili sejumlah 0-11) bagaimana memahami dua kelas ini? Dorong berarti dorong, tarik berarti tarik.
<div> <div> 21 </div> <div> 24 </div> </div> <div> <div> 21 </div> <div> 24 </div> </div>
Rendering adalah sebagai berikut:
<div> 21 </div> --- direkam sebagai Div1 <div> 24 </div>-direkam sebagai div2
Dapat dipahami bahwa itu adalah untuk menukar posisi keduanya. Anda perlu mendorong Div1 ke 8 kolom kanan, dan Anda harus menarik 4 kolom ke kiri.
3. Tata Letak Grid Streaming
1. Lebar kolom menggunakan persentase, bukan piksel
2. Ubah kelas baris menjadi fluid baris
3. Fungsi dasar lainnya sama dengan tata letak tetap di atas dan mendukung responsif.
4. Saat membagi kolom tertentu dalam bisektor, karena tata letak streaming menggunakan persentase, itu harus dihitung menurut 6.
// Perhatikan situasi berikut. Saat membagi 8 kolom secara bilateral, itu tidak diatur ke dua 4s, tetapi dua 6s, karena ada 12 kolom distribusi raster dalam bootstrap. <div> <div> <div> 2 </div> <div> 2 </div> </div> </div> </div> </div>
Mari kita lihat aplikasi tata letak streaming dan bandingkan dengan tata letak tetap.
<!-- Streaming layout--><div> <div>333</div> <div>444</div></div><div> ---Declare the container-fluid class, indicating that the content is a streaming layout, function: as a containing block, to contain the streaming content<div> <div>333</div> <div>444</div> </div></div><div> ---Declare the Kelas kontainer dan container-fluid, dan ini adalah lebar layar <ver> 333 </div> <div> 444 </div> </div>
Ketika layar kurang dari 768px, efeknya adalah sebagai berikut:
Saat layar lebih besar dari 992px, efeknya adalah sebagai berikut: Saat ini, satu baris eksklusif
Kelas baris-fluida (sangat penting) menentukan apakah itu tata letak aliran. Kemudian kode blok konten ditulis dengan cara yang sama seperti sistem grid, dan masih dimulai dari COL-MD-1 ke COL-MD-12, yang masing-masing sesuai dengan persentase yang berbeda.
4. Desain responsif
Sederhananya, ini mendukung resolusi (960px, 1366px, 978px, dll.) Dari perangkat yang berbeda (ponsel, PC) untuk respons adaptif.
<div> <div> 21 </div> <div> 24 </div> </div>
Ketika perangkat kurang dari 768px, efeknya adalah sebagai berikut:
When Device> = 992px. Efeknya adalah sebagai berikut:
Resolusi dari dua kategori di atas berbeda. COL-MD-12 berarti bahwa setiap kolom memiliki satu baris, yaitu, 12 kolom.
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.