Baru -baru ini saya menemukan hal yang baik yang disebut Bootstrap, kerangka kerja CSS responsif paling populer saat ini, yang memprioritaskan perangkat seluler dan dapat dengan cepat beradaptasi dengan perangkat yang berbeda. Gunakan untuk menulis halaman responsif dengan cepat dan nyaman, dan memblokir perbedaan browser. Dengan Bootstrap, Anda tidak bisa lagi membayangkan kehidupan tragis menulis halaman web di CSS asli di masa lalu.
Setelah belajar, saya menemukan bahwa saya juga memiliki kemampuan untuk mengembangkan halaman kelas atas dalam hitungan menit. Artikel ini akan memperkenalkan bootstrap kepada Anda dan menuntun Anda untuk mengimplementasikan halaman yang responsif bersama -sama.
Gambar 1. Prioritas seluler, disesuaikan dengan perangkat yang berbeda
1. Instalasi
Cara termudah adalah dengan merujuk secara langsung bootstrap yang disediakan oleh Content Distribution Network (CDN) di halaman web. Ketika pengguna mengakses halaman web, ia akan mendapatkan sumber daya dari server terdekat.
Listing 1. Dapatkan Bootstrap dari Jaringan Distribusi Konten
<!-CSS terkompilasi dan diminifikasi terbaru-> <tautan rel = "stylesheet" href = "bootstrap/3.3.4/css/bootstrap.min.css"> <!-tema opsional-> <tautan rel = "stylesheet" hRef = "bootstrap/3.3.4/css/bootstrap-comp-min Javascript -> <skrip src = "bootstrap/3.3.4/js/bootstrap.min.js"> </script>
Anda juga dapat memilih untuk mengunduh bootstrap untuk digunakan secara lokal. Pengguna dapat mengunduh bootstrap lengkap pada halaman, atau mereka dapat memilih fungsi yang digunakan dalam proyek sesuai dengan kebutuhan proyek pada halaman khusus, mengkompilasi dan mengunduh versi bootstrap yang disederhanakan. Setelah unduhan selesai, file zip diperoleh. Struktur direktori yang didekompresi adalah sebagai berikut:
Daftar 2. Struktur Direktori Bootstrap
Bootstrap/
├── CSS/
│ ├── Bootstrap.css
│ ├── Bootstrap.css.map
│ ├── Bootstrap.min.css
│ ├── Bootstrap-Theme.css
│ ├── Bootstrap-Theme.css.map
│ └── Bootstrap-Theme.min.css
├── JS/
│ ├── Bootstrap.js
│ └── Bootstrap.min.js
└── font/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── Glyphicons-Halflings-Regular.woff
└── Glyphics-Halflings-Regular.woff2
Di sini kami terutama fokus pada tiga file yang disederhanakan: bootstrap.min.css adalah komponen utama bootstrap dan berisi sejumlah besar kelas CSS yang akan digunakan; bootstrap-theme.min.css berisi tema bootstrap opsional; Bootstrap.min.js menyediakan beberapa metode JavaScript. Perlu dicatat bahwa bootstrap tergantung pada jQuery, jadi jQuery harus diperkenalkan sebelum menggunakan bootstrap.min.js. Seperti menggunakan jaringan distribusi konten, kami menggunakan jalur relatif untuk memperkenalkan CSS dan JavaScript yang sesuai ke halaman kami. Dalam pengembangan yang sebenarnya, kami sering menggunakan templat yang disediakan oleh Bootstrap sebagai titik awal. Template ini memperkenalkan metadata dan bootstrap yang diperlukan oleh halaman responsif. Pengembang dapat menulis halaman responsif mereka sendiri atas dasar ini:
Daftar 3. Template Dasar Bootstrap
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equiv = "konten x-ua-ua" harus first, head = 1 "> <! Konten kepala lainnya harus datang * setelah * tag ini-> <Title> Templat Bootstrap 101 </itement> <!-Bootstrap-> <tautan href = "css/bootstrap.min.min.css" rel = "stylesheet"> <!-html 5 shim dan respond.js untuk dukungan IE8 dari HTMLA 8 Jika Anda melihat halaman melalui file: //-> <!-[jika lt yaitu 9]> <script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <skrip src = "https://oss.maxcdn.com/responder/1.4.2/respond.min.js"> </script> <! [Endif]-> </head> <hody> <h1> halo, dunia! </h1> <! src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script> <!-Sertakan semua plugin yang dikompilasi (di bawah), atau sertakan file individual sesuai kebutuhan-> <script src = "js/bootstrap.min.min.
2. CSS
Bootstrap adalah kerangka kerja CSS pertama, yang telah ditentukan sebelumnya. Pengembang hanya perlu menambahkan kelas CSS yang sesuai ke elemen HTML untuk mendapatkan gaya yang diinginkan, yang dapat melengkapi tata letak halaman, tata letak, dan fungsi lainnya. CSS yang disediakan oleh Bootstrap sangat kuat. Artikel ini akan fokus pada sistem grid yang disediakannya. Untuk fungsi lain, itu hanya akan disebutkan dengan cara saat menerapkannya. Jika Anda ingin tahu lebih banyak tentang fungsinya, silakan merujuk ke dokumentasi resmi.
wadah
Saat menggunakan tata letak bootstrap, Anda harus memasukkan elemen HTML dalam wadah (.container). Bootstrap menyediakan dua kontainer: .Container dan .container-fluid. Yang pertama memusatkan konten dengan lebar tetap, sedangkan yang terakhir memungkinkan konten untuk secara horizontal mengisi seluruh jendela browser, seperti yang ditunjukkan di bawah ini:
Listing 4. .Container dan .container-fluid
<div> <p> "Ketika saya masih kecil, ibu saya akan membuat secangkir kopi untuk saya setiap kali saya sakit. Dia berkata dengan lembut," Orang asing minum ini. "" Saya selalu takut kopi, dan rasa asam dan kepahitan terjalin. Sekarang saya tidak dapat menemukan rasanya yang saya minum ketika saya masih kecil ketika saya masih kecil, sampai hari itu saya minum secangkir isatis. "</p> </div> <v> <p>" Ketika saya masih kecil, setiap kali saya sakit, ibu saya akan membuat secangkir kopi untuk saya. Dia berkata dengan lembut: "Orang asing minum ini." "Meskipun muda, saya selalu takut kopi, dan asam dan kepahitan terjalin. Sekarang saya tidak dapat menemukan rasanya yang saya minum ketika saya masih kecil ketika saya masih kecil, sampai hari itu saya minum secangkir Isatis." </p> </div>
Gambar berikut menunjukkan seperti apa di browser:
Gambar 2. Wadah
Sistem kisi
Seperti sistem grid yang kami rancang dalam menulis halaman responsif pertama, bootstrap membagi halaman menjadi baris (.row), dengan 12 kolom per baris (.col-md-*). Baris harus dimasukkan dalam wadah. According to the screen size, the columns are divided into .col-xs-, .col-sm-, .col-md-, and .col-lg-, respectively, corresponding to mobile phones (<768px), tablets (≥768px), medium-screen computers (≥992px) and large-screen computers (≥1200px). Piksel yang muncul di dalamnya disebut poin kritis. Setiap kali ukuran browser atau ukuran layar mencapai titik kritis lainnya, kelas CSS yang sesuai akan berfungsi dan tata letak halaman akan berubah. Lihat gambar berikut untuk detailnya:
Gambar 3. Sistem Grid
Bagaimana Anda memahami tabel di atas? Jika Anda perlu menggali halaman menjadi tiga kolom saat menjelajah halaman di komputer, yang menyumbang 1/4, 2/4, dan 1/4 dari lebar baris, Anda dapat menulis kode sebagai berikut:
Daftar 5. Satu baris dibagi menjadi tiga kolom
<div> <div> .col-md-3 </div> <div> .col-md-6 </div> <div> .col-md-3 </div> </div>. Col-md-3 </div> </div>
Buka browser dan Anda dapat melihat bahwa mereka masing -masing menempati 3, 6, dan 3 dari 12 kolom, yang menambahkan hingga 12 kolom. Jika kita mempersempit jendela browser sampai kurang dari 970px, kita akan menemukan bahwa itu telah menjadi tiga baris, ditumpuk bersama untuk ditampilkan. Kecuali .COL-XS-, kelas CSS lainnya berperilaku sama. Ketika ukuran layar lebih kecil dari titik kritisnya, itu akan ditampilkan bertumpuk. Ini hanya akan ditampilkan dalam kolom ketika ukuran layar lebih besar dari titik kritisnya, dan .col-xs- ditampilkan dalam kolom dalam hal apa pun.
Kelas CSS yang sesuai dengan ukuran layar yang berbeda dapat digunakan secara campuran. Misalnya, jika saya ingin halaman menampilkan 3 kolom di komputer dan 2 kolom di telepon, saya dapat menulis kode sebagai berikut. Di telepon, kolom ketiga akan ditampilkan pada baris berikutnya dan menempati setengah dari lebar garis:
Daftar 6. Tampilkan jumlah kolom yang berbeda di komputer dan ponsel
<div> <div> .col-md-3 </div> <div> .col-md-6 </div> <div> .col-md-3 </div> </div>. Col-md-3 </div> </div>
Jika Anda ingin menampilkan kolom yang sama di semua perangkat, Anda hanya perlu menentukan ukuran minimum .col-xs-, dan tata letak akan secara otomatis diperluas ke ukuran yang lebih besar, jika tidak itu tidak akan berlaku:
Daftar 7. Jumlah kolom yang sama ditampilkan di semua perangkat
<div> <div> .col-xs-6 </div> <viv> .col-xs-6 </div> </div>
Anda juga dapat memberikan offset tertentu ke kolom, misalnya, kolom pertama menyumbang 1/4 dari lebar baris, dan kami ingin kolom kedua mengimbangi 6 kolom ke kanan, menempati 3 kolom di ujung baris:
Listing 8. Kolom offset
<div> <div> .col-md-3 </div> <div> .col-md-3 </div> </div>
Urutan kolom juga dapat disesuaikan dengan .col-md-push-* dan .col-md-pull-*. Artinya adalah mendorong elemen ke belakang atau menarik beberapa kolom ke depan. Pengembang dapat menggunakan fitur ini untuk menarik konten penting ke depan saat menampilkannya di telepon:
Listing 9. Kolom Push and Pull
<div> <div> .col-md-9 .col-md-push-3 </div> <div> .col-md-3 .col-md-pull-9 </div> </div>
Yang lebih menarik adalah bahwa sistem mesh ini juga dapat bersarang, sehingga berbagai tata letak kompleks dapat dilakukan:
Listing 10. Nesting
<div> <div> level 1: .col-sm-9 <div> <div> level 2: .col-xs-8 .col-sm-6 </div> <div> level 2: .col-xs-4
Kode di atas umumnya dibagi menjadi dua kolom, dan kolom pertama memiliki dua kolom bersarang.
Fungsi Grid Bootstrap menyediakan berbagai kemungkinan untuk tata letak halaman web dan sangat mudah digunakan. Mari kita ambil kasus untuk melihat betapa sederhananya menulis halaman responsif menggunakan bootstrap.
3. Tempur aktual
Misalkan Anda ingin mengimplementasikan halaman web seperti yang ditunjukkan pada gambar berikut:
Gambar 4. Desain Web
Pertama, kami membagi elemen halaman web menjadi baris dan kolom yang sesuai. Gambar berikut menunjukkan divisi penulis:
Gambar 5. Membagi Desain Web menjadi Baris dan Kolom
Dengan demikian, tentukan struktur HTML kami dan tambahkan kelas CSS bootstrap yang sesuai:
Daftar 11. Menentukan struktur HTML
<div> <div> <mmg src = "http://placehold.it/150x150"> </div> <dv> <h1> Jane doette </h1> <h3> ninja front-end </h3> </div> <hdv> <v> <IMG> src = "http://placehold.it/950x350"> </div> <div> <dv> <h2> karya unggulan </h2> </div> <verv> <verv> <mimg src = "http://placeHold.it/250x250"> <h2> berlaku </h2> </a href = "https://github.com/udacity/apply"> https://github.com/udacity/applify </a> </div> <ver> <mimg src = "http://placehold.it/250x250"> <h2> sunflower </h2> <a href = "https://github.com/udacity/sunflower"> https://github.com/udacity/sunflower </a> </div> <ver> <mmg src = "http://placeHold.it/250x250"> <h2> bokeh </h2> <aHold.it/250x250 "> <h2> bokeh </h2> <a href = "https://github.com/udacity/BOKEH"> https://github.com/udacity/BOKEH </a> </div> </div>
Butuh waktu kurang dari 10 menit bagi penulis untuk menulis kode di atas, dan karena tidak ada gambar, penulis menggunakan gambar placeholder yang disediakan secara online. Membuka halaman ini di browser dekat dengan desain, tetapi font, huruf besar, huruf besar, dan jenis huruf masih tidak konsisten dengan desain. Selanjutnya, Anda perlu menyempurnakan dan menelusuri dokumen Bootstrap untuk menemukan kelas CSS terkait. Efek akhir ditunjukkan pada gambar di bawah ini:
Gambar 6. Efek realisasi
Yang lebih menarik adalah bahwa ketika Anda mempersempit jendela browser, atau mengakses halaman dari ponsel Anda, Anda akan menemukan bahwa itu sudah merupakan halaman responsif yang sederhana, dan kami belum menambahkan kode tambahan! Melihat waktu itu, total kurang dari 20 menit, dan saya juga memenuhi janji saya untuk menulis halaman yang responsif dalam hitungan menit.