Teman-teman, menurut saya Bootstrap adalah hal yang sangat keren. Saya akan mencoba menjelaskan mengapa demikian di artikel ini. Baiklah, saya langsung minta maaf karena hampir seluruh artikel paruh pertama ditulis tanpa gambar, yang ada hanya teori, penjelasan cara kerja grid. Tapi ini sangat penting! Siapa pun di antara Anda yang membutuhkannya akan mengambilnya, membacanya, dan, saya harap, memahaminya. Paruh kedua artikel sudah dipahami lebih sederhana, ada lebih banyak contoh dengan tangkapan layar.
Bootstrap - apa itu?Jadi mari kita mulai dengan pertanyaan penting. Bootstrap adalah kerangka kerja CSS dan JS, yang pada dasarnya adalah sekumpulan file dengan kode tertulis siap pakai. Tujuan pengembang hampir semua kerangka kerja adalah untuk menyederhanakan pengembangan situs web bagi mereka sendiri dan orang lain yang memiliki akses ke alat tersebut. Dalam kasus Bootstrap, ini sepenuhnya gratis, jadi Anda dapat menggunakannya dengan cara apa pun, edit sumber dan buat ulang kerangka kerja sesuai keinginan Anda. Itu sempurna.
Menginstal BootstrapJika Anda hanya perlu menghubungkan file kerangka kerja ke dokumen HTML (misalnya, untuk latihan), cukup unduh kerangka kerja dari situs resmi getbootstrap.com, salin file-nya ke dalam proyek dan sambungkan file yang Anda perlukan. Aku akan melakukannya ulasan singkat file-file ini:
Ini adalah kerangka standar. Faktanya, Anda dapat dengan mudah menyesuaikannya dan mengubahnya sesuai keinginan Anda. Misalnya, jangan gunakan skrip sama sekali atau sambungkan hanya satu grid. Secara umum, kami juga akan membicarakan hal ini.
Dokumentasi Bootstrap RusiaSaat Anda mengunjungi getbootstrap, Anda mungkin memperhatikan bahwa semua yang ada di sini dalam bahasa Inggris. Kita bisa menggunakan bantuan Rusia untuk kerangka tersebut. Sangat mudah untuk menemukannya. Untuk melakukan ini, buka halaman utama ke bagian Memulai. Gulir ke paling bawah, akan ada link terjemahan. Cari bahasa Rusia di sana dan klik. Itu saja, sekarang Anda berada di situs versi Rusia. Benar, tidak semuanya telah diterjemahkan di sini, tetapi sekitar 70-80% akurat, jadi Anda akan memahami semuanya.
Jaringan bootstrapSuka atau tidak, elemen utama Bootstrap adalah grid responsif. Secara umum, tanpanya, kerangka kerja akan kehilangan hampir seluruh nilainya, karena berkat kisi Anda dapat dengan cepat membuat templat adaptif. Pada saat yang sama, Anda mungkin tidak familiar dengan kueri media sama sekali; Anda tidak memerlukannya, karena kerangka kerja menangani penerapan kemampuan beradaptasi; Anda hanya perlu menetapkan kelas yang tepat ke blok.
Apa saja kelas-kelas ini? Mari kita buka dokumentasinya, ini akan banyak membantu kita. Buka bagian CSS - Sistem Grid. Aturan umum untuk bekerja dengan grid sederhana; saya akan mencantumkannya sekarang.
Bagaimana cara bekerja dengan grid?Anggap saja sebagai tabel html. Jika Anda pernah menulis kode HTML untuk tabel, Anda pasti tahu bahwa semua konten ditempatkan di tag tabel, satu baris ditempatkan di tag tr, dan kemudian sel ditempatkan di dalamnya - td .
Jadi, semuanya serupa di grid. Kelas container berfungsi sebagai container umum untuk grid. Ada 2 pilihan untuk grid bootstrap - sepenuhnya karet dan masih memiliki lebar maksimum yang terbatas. Jadi, ketika diberi tugas blok umum wadah kelas, situs akan memiliki lebar maksimum 1170 piksel. Ia tidak akan memperluasnya lebih jauh lagi. Secara alami, kontennya akan terpusat.
Jika Anda menyetel kelas wadah-cairan, maka jaringnya akan sepenuhnya terbuat dari karet, artinya tidak akan ada batasan ukuran. Misalnya, jika seseorang membuka situs web pada monitor lebar 1920 piksel, dia akan melihatnya dalam lebar penuh.
Oleh karena itu, hal pertama ketika mengembangkan sebuah website adalah memutuskan seperti apa templatenya - sepenuhnya karet, atau lebarnya masih perlu dibatasi.
Bagus, blok kontainer harus berisi sebaris grid. Anda perlu menempatkan semua blok yang berada pada satu baris di dalamnya. Artinya, jika kita mengambil template yang paling umum: header, bagian utama, kolom kanan dan footer, maka ada 3 kolom. Yang pertama hanya memiliki header, yang kedua memiliki konten dan sidebar, dan yang terakhir memiliki footer. Markup untuk situs tersebut akan menjadi seperti ini:
Konten Header... dan sidebar Footer
Tapi untuk saat ini markupnya salah, karena hilang..apa? Benar, sel! Dalam kasus Bootstrap, mereka juga disebut kolom. Grid bootstrap terdiri dari 12 kolom. Itu dapat disematkan di blok mana pun dengan lebar berapa pun, setidaknya 1200 piksel, setidaknya 100. Semua ini karena lebar kolom tidak ditentukan dalam piksel, tetapi dalam persentase.
Bagaimana cara kerja sistem 12 kolom ini?Jadi, kita sampai pada masalah paling penting terkait kerangka kerja. Percayalah, jika Anda memahami hal ini, segala sesuatu yang lain adalah omong kosong. Hal utama adalah memahami cara kerja grid, dan jalur menuju tata letak adaptif cepat akan terbuka untuk Anda.
Untuk melakukan ini, gulir dokumentasi di bawah, di sana Anda akan menemukan tabel yang berisi properti grid penting.
Ngomong-ngomong, kolom-kolom itu sendiri ditandai di Bootstrap dengan kelas col-, tapi ini adalah kelas komposit, jadi mereka tidak pernah menulis col- begitu saja. Bootstrap memiliki 4 kelas khusus yang dirancang untuk mengontrol ukuran balok dengan lebar berbeda, ini dia:
Ini adalah 4 kelas, tetapi untuk mengontrol ukuran elemen, digunakan angka dari 1 hingga 12, karena, seperti yang Anda ingat, ada tepat 12 kolom dalam kisi.
Konten Header Sidebar Footer
Ini cukup mudah untuk dipahami. Pertama-tama, kita membuat header; header tersebut tidak harus ditempatkan di grid sama sekali, karena header tersebut akan menempati 100% lebarnya (biasanya). Tapi kami akan tetap memasukkannya. Apa kelas col-md-12 ini? Seperti yang sudah saya katakan, tidak ada yang menulis hanya col-, dengan kelas ini kami pada dasarnya memberi tahu browser:
Ini adalah sel | kolom
Pada perangkat sedang (kelas md), lebarnya harus 12 dari 12 kolom, yaitu 100% dari lebar baris.
Tapi bagaimana dengan lebarnya di perangkat lain? Pada layar besar (lg) juga akan menjadi 100%, karena nilai untuk layar besar diwariskan, tetapi untuk layar kecil tidak. Sederhana saja: jika Anda menulis col-xs-4 , maka lebar kolom akan menjadi 33% di semua perangkat, dan jika col-lg-4 , maka hanya pada perangkat besar. Ini adalah fiturnya, ingatlah.
Nah, jika nilai lebar tidak disimpan di layar yang lebih kecil, lalu apa yang terjadi? Ini diatur ulang. Begini caranya:
col-sm-4 - pada layar kecil blok akan menempati 33% lebarnya, akan sama pada layar md dan lg, tetapi pada xs, yaitu yang terkecil, lebarnya akan diatur ulang menjadi 100%. Jadi, ingat satu lagi aturan sederhana: Jika tidak ada yang ditentukan untuk layar yang lebih kecil, maka pada layar tersebut blok akan ditampilkan dengan lebar 100%.
Bilah Sisi Konten
Intinya kami memberi tahu browser:
Biarkan blok konten memiliki lebar 8 dari 12 kolom dan situasi ini akan terjadi pada skala kecil, sedang dan layar besar(cukup menentukan untuk layar kecil; untuk layar besar, seperti yang Anda ingat, nilainya diwariskan). Namun pada layar terkecil, blok tersebut akan terisi 100%. Biasanya ini benar perangkat seluler situs masuk tepat dalam 1 kolom.
Biarkan kolom samping menjadi sepertiga lebar baris pada layar kecil, sedang dan besar yang sama.Nah, pada layar terkecil, seperti yang sudah Anda pahami, lebarnya juga diatur ulang menjadi 100%. Sesederhana itu.
Yah, tidak ada yang perlu ditangani dengan footer. Dengan baik, prinsip dasar Kami telah memilah cara kerja grid, tetapi kami masih perlu melihat cara kerjanya...
Grid Bersarang BootstrapFaktanya adalah sekarang kita telah membagi template hanya menjadi blok-blok utama, tetapi di dalamnya juga dapat dibagi menjadi kolom-kolom. Misalnya, konten mungkin menampilkan produk dalam beberapa kolom. Apa yang harus saya lakukan? Ini sangat sederhana - kita membuat grid yang persis sama di dalamnya. Itu akan bersarang, tetapi juga berisi 12 kolom. Jika kita meringkas semua ini, maka kita sampai pada kesimpulan berikut:
Jumlah grid di dalam blok mana pun bisa tidak terbatas. Misalnya pada blok dengan produk terdapat grid untuk memisahkan produk, pada blok dengan satu produk itu sendiri, Anda dapat membuat grid lain, misalnya untuk memisahkan harga, informasi ketersediaan dan informasi tambahan. informasi.
Sekarang kita akan mencoba membuat grid lain di dalam blok konten untuk menyusun produk dalam 3 kolom. Jadi, mari kita ambil blok yang berisi konten:
Isi
Dan kami menulis di dalamnya:
Katalog produk: Nama produk 
Deskripsi Produk
Seperti yang Anda lihat, kami membuat kisi baru di dalam konten - kami meletakkan baris di dalamnya, dan di baris tersebut sudah ada 3 blok dengan produk. Cukup salin blok col-sm-4 dengan kartu produk dan tempel 2 kali lagi, ini yang Anda dapatkan (Anda dapat mengambil gambar produk apa saja, saya ambil yang besar):
Saya melewatkan poin penting lainnya: agar gambar dapat beradaptasi dengan blok tempatnya berada, masing-masing gambar perlu diberi kelas img-responsive. Jika Anda, seperti saya, merasa tidak nyaman melakukan ini, tulis saja dengan style.css Anda sendiri seperti ini:
Img( lebar maksimal: 100%; tinggi: otomatis; tampilan: blok; )
Selesai, simpan kode ini dan sambungkan file css Anda ke proyek. Sekarang gambarnya akan adaptif secara default.
Nah, apakah hasilnya cukup lancar? Ya, tapi tanpa bootstrap Anda harus menderita lebih lama. Satu-satunya hal adalah ketika membuat grid di dalam blok mana pun, Anda tidak perlu lagi membuat blok dengan kelas kontainer di dalamnya. Mengapa hal ini tidak perlu? Ya, karena blok tempat grid dibuat berfungsi sebagai wadah.
Dengan demikian, Anda dapat membuat kolom sebanyak yang Anda suka di blok mana pun dan membuat templat dengan kerumitan apa pun. Dan semua ini jauh lebih cepat dibandingkan tanpa Bootstrap, karena Anda harus menulis semua css dari awal.
Utilitas responsifIni adalah fitur hebat lainnya dari bootstrap. Terdiri dari kenyataan bahwa Anda dapat menyembunyikan atau membuat blok apa pun terlihat dengan lebar yang Anda butuhkan. Misalnya, sembunyikan sepenuhnya kolom samping di layar sempit, tambahkan beberapa elemen baru di perangkat seluler, tambahkan kolom di layar lebar, dll.
Ada banyak pilihan aplikasi, tetapi saya tidak memberi tahu Anda tentang hal yang paling penting: bagaimana cara menggunakan utilitas ini? Untuk melakukan ini, cukup tambahkan kelas ke blok yang diinginkan. Jika Anda perlu menyembunyikannya, cukup tentukan kelas berikut:
catatan kaki
Apa yang akan dilakukan kelas Hidden-Xs dalam kasus ini? Ini akan menyembunyikan footer pada perangkat ekstra kecil. Di semua blok lainnya, blok tersebut akan terlihat.
Sebaliknya, jika Anda ingin menampilkannya hanya di layar terkecil, Anda perlu menggunakan kelas Visible-xs-block. Dalam hal ini, blok akan disembunyikan di semua layar kecuali layar tersempit. Jadi, kelas utilitas adaptif ditulis seperti ini:
Nah, beberapa contoh untuk memperjelasnya:
Beginilah cara kerjanya. Itulah tepatnya dan tidak ada cara lain. Saya harap Anda memahami hal ini. Mari kita praktikkan. Kami memiliki template pengujian, meskipun sangat primitif.
Tugas: menghilangkan kolom samping di layar kecil, dan juga satu produk di layar terkecil. Dan agar pada perangkat xs produknya sudah ada dalam 2 kolom, bukan 3.
Coba lakukan sendiri, edit kode htmlnya saja. Apa yang perlu dilakukan? Pertama, mari kita lihat kolomnya, untuk menyembunyikannya di layar sm, Anda hanya perlu menambahkan kelas tersembunyi-sm ke dalamnya.
Hebat, sekarang produk ketiga perlu menambahkan kelas Hidden-Xs dan itu akan hilang di layar terkecil. Nah, kelas dari dua barang sisanya adalah sebagai berikut:
Artinya, pada perangkat menengah, blok akan menempati 4 dari 12 kolom, yang dapat diterjemahkan menjadi 33,33% lebarnya, dan pada perangkat ekstra kecil - 50%. Dan karena satu blok yang berisi produk akan hilang pada lebar ini, maka kedua blok yang berisi produk tersebut akan tersusun rapi dalam 1 baris, seperti ini:
Besar! Setelah memahami hal ini, Anda sudah dapat memanipulasi blok di halaman web dengan cara apa pun yang Anda suka. Cobalah untuk membuat tugas untuk diri Anda sendiri dan laksanakan.
Pindahkan aku sepenuhnyaSelanjutnya saya akan menunjukkan trik lain yang sangat bagus - kemampuan untuk memindahkan balok ke kanan atau kiri. Katakanlah kita tidak memiliki 3 produk berturut-turut, tetapi 1. Dan produk tersebut tidak menempati seluruh lebarnya. Dan tugas Anda adalah menyelaraskannya di tengah. Ini mudah dilakukan jika Anda ingat bahwa Anda bekerja dengan sistem 12 kolom.
Mari tinggalkan satu blok dengan produk:
Cukup membuat perhitungan sederhana untuk memahami seberapa banyak Anda perlu memindahkan balok untuk memusatkannya. Itu perlu dipindahkan 4 kolom ke kiri pada layar sedang dan besar, dan 3 kolom pada layar kecil. Ini adalah tampilannya:
Kelas col-md-offset-4 mengatakan: pada layar sedang dan besar, offset blok ke kiri sebesar 33% dari lebar wadah induk (1/3 offset kiri, 1/3 lebar blok, ⅓ offset kanan, mengakibatkan pemusatan).
Kelas col-xs-offset-6: Pada layar ekstra kecil dan kecil, geser ke kiri sebesar 25% (¼ padding ke kiri, ½ lebar blok, ¼ padding ke kanan).
Saya harap Anda memahami intinya dan menggunakan kelas-kelas ini jika perlu.
Komponen bootstrap dan contoh penggunaannyaSaya mengucapkan selamat kepada Anda. Kami baru saja melewati sebagian besar topik penting terkait dengan kerangka tersebut. Yang penting adalah jaringan dan bekerja dengannya. Bekerja dengan komponen berarti Anda cukup membuka dokumentasi, menyalin kode komponen yang diinginkan di sana dan, jika perlu, mengubahnya sesuai kebutuhan Anda. Namun di bawah ini saya tetap akan memberikan beberapa contoh cara penggunaan komponen-komponen tersebut.
Pelampung cepat dan pembatalan bungkusKelas tarik-kiri dan tarik-kanan memungkinkan Anda dengan cepat membuat balok apa pun melayang dengan mengirimkannya ke kiri atau kanan. Jangan lupa tentang membatalkan aliran. Anda dapat menggunakan kelas clearfix untuk ini.
Bootstrap: Menu Responsif Horizontal (Seluler).Kami akan menambahkan komponen berikut langsung ke template, jadi jika Anda ingin bekerja dengan kode dan tidak hanya membaca, ikuti semua langkah setelah saya.
Sebenarnya, dengan Bootstrap Anda dapat dengan mudah membuat tidak hanya menu adaptif, tetapi juga menu seluler, yang sepenuhnya diciutkan di layar kecil dan disembunyikan di bawah satu tombol. Teknik ini dapat dilihat pada banyak orang templat adaptif dan sebenarnya sangat mudah untuk diterapkan. Contoh kode menu seluler ada di dokumentasi, saya akan mengambilnya dari sana dan mengulanginya sedikit.
Jadi, hal pertama yang akan saya lakukan adalah menghapus blok dengan header, karena menu kita sebenarnya akan menjadi header dalam kasus template saya. Kode menu harus ditempatkan sebelum semua konten situs, bahkan sebelum blok penampung. Mengapa? Ya, sekarang Anda akan melihat sendiri bahwa grid sudah terpasang di bilah navigasi. Jadi inilah kodenya:
Logo/Nama Tombol Saklar
Mencari
Jangan khawatir dengan kenyataan bahwa ada banyak kode. Inilah tampilan situsnya sekarang:
Namun jika menu Anda tidak memenuhi seluruh lebar layar, masuk akal untuk menempatkannya di tengah. Untuk melakukan ini, Anda harus membuat blok pembungkus tambahan untuk menu, yang harus ditempatkan setelah blok dengan kelas container-fluid. Jangan lupa untuk menutup blok ini. Saya memberinya kelas navbar-wrap. Berikut adalah gaya untuk itu:
Artinya, Anda cukup membatasi lebarnya dan memusatkannya. Atau awalnya ganti container-fluid dengan container .
Seperti yang Anda lihat, kami menambahkan logo, dua item sederhana, item drop-down, dan formulir pencarian ke menu. Artinya, ada banyak unsur. Anda dapat dengan mudah menyesuaikan menu dengan menambahkan kelas Anda sendiri ke dalamnya. Namun untuk saat ini tujuan saya hanyalah menunjukkan komponen ini kepada Anda.
Beginilah tampilan menu pada perangkat dengan lebar layar kurang dari 768 piksel:
Seperti yang Anda lihat, menu telah diciutkan. Ini terbuka ketika Anda mengklik tombol di sudut kanan atas. Hanya logo yang tersisa di layar.
Menu drop downPada saat yang sama, dari contoh di atas Anda dapat memahami bagaimana item menu drop-down dibuat di Bootstrap; mari kita ekstrak kode ini untuk tampilan yang lebih detail:
Jadi, wadah untuk item drop-down adalah item daftar biasa dengan kelas dropdown. Di dalamnya ada tautan utama, mengkliknya akan membuka menu drop-down. Sangat penting untuk menetapkan atribut data, yang Anda lihat dalam kode; tanpanya, tidak ada yang akan berhasil. Anda juga harus memastikan bahwa file bootstrap.js terhubung ke halaman web.
Rentang dengan kelas tanda sisipan tidak lebih dari sebuah panah, berkat itu Anda dapat memahami bahwa item tersebut adalah item drop-down, dan di bawah menu itu sendiri dibentuk menggunakan daftar berpoin standar. Itu saja, semuanya cukup sederhana, Anda dapat menggunakan kode ini untuk mengimplementasikan item drop-down.
Menambahkan menggunakan Bootstrap tepung roti(jejak remah roti)Di banyak toko Anda dapat menemukan apa yang disebut remah roti, yang berisi jalur penuh ke halaman saat ini. Ini juga mudah dilakukan dengan menggunakan framework, lihat kodenya:
Faktanya, cukup dengan menentukan kelas remah roti untuk daftar bernomor, dan memasukkan item daftar biasa ke dalamnya. Ngomong-ngomong, saya akan memusatkan judul tingkat kedua di template (ini perlu ditulis di css):
H2( perataan teks: tengah; )
Jika Anda ingin mengubah sesuatu penampilan remah roti, cukup gunakan pemilih .breadcrumb di CSS. Misalnya, berikut cara menghilangkan warna latar belakang:
Remah roti (latar belakang: transparan; )
Inilah tampilan situsnya sekarang:
Secara default, tabel akan membentang di seluruh jendela, jadi bungkuslah dalam kotak dengan lebar terbatas untuk membatasi dimensi. Secara default, ini terlihat buruk, tetapi jika Anda menambahkan kelas tabel ke tag tabel, semuanya akan jauh lebih baik:
Pemeriksaan pendahuluan Setelah membuat struktur file, buka 
![](https://realbazar.ru/wp-content/uploads/2020/03/" alt=)
John Doe 
Saundra Pittsley 
Ericka Nobriga 
Cody Rousselle 
| (Tanggal) | (Waktu) | (Judul) ((Jumlah transisi)) |
Untuk membaca berita kami menunjukkan kelas khusus:
(Judul) Langkah 3. Formulir pengiriman link berita. Di sini sekali lagi semuanya sederhana, Bootstrap menyediakan beberapa gaya siap pakai formulir: formulir biasa, formulir satu baris, formulir pencarian... Kita membutuhkan yang kedua, tambahkan ke wadah kita di depan tabel:
Menambahkan ...
class="span10" - Bootstrap mengasumsikan membangun sebuah antarmuka berdasarkan grid 12 kolom; elemen kita dapat disejajarkan di sepanjang itu. Melalui metode ilmiah trial and error, saya sampai pada lebar kolom input sama dengan 10. Langkah 4,5,6. Topi. Ide saya tentang tampilan situs web yang ramah pengguna menyarankan gaya minimalis: semua yang tidak perlu disembunyikan, semua yang tidak bisa disembunyikan pucat. Kami menyembunyikan formulir di menu tarik-turun, membuat tautan ke rss dan ekstensi chrome menjadi pucat. Kami mengemas semua ini ke dalam header, yang kami rekatkan ke bagian atas situs (class = “navbar navbar-fixed-top”):
*** ...
Bentuknya sendiri:
... × Kirim kode unik melalui email Batalkan Kirim × Masukkan kode pembaca unik
Memungkinkan Anda menyinkronkan apa yang Anda baca komputer yang berbeda berita.
Batalkan KirimPoin penting. Agar ini berfungsi, Anda perlu menghubungkan beberapa skrip:
...
...
rilis 2012/02/19 23:49 *****
ResultEpilogue Twitter Bootstrap memungkinkan, tanpa banyak usaha dan pengetahuan, tanpa menulis satu baris CSS pun dan tanpa banyak memecahkan kode html, untuk mendapatkan antarmuka prototipe yang sangat bagus sehingga Anda tidak malu untuk menunjukkannya kepada orang lain. Jika Anda tertarik, di artikel selanjutnya saya akan memberi tahu Anda caranya, tanpa pengetahuan mendalam tentang PHP + MySQL (hanya dengan keterampilan pemrograman dasar), Anda dapat mengimplementasikan fungsionalitas yang memungkinkan Anda menunjukkan ide jutaan dolar Anda tidak hanya di atas kertas, tetapi juga di atas kertas. dalam bentuk prototipe kerja.Terima kasih atas perhatian Anda!
UPD: Saya tidak ingin menghapus topik di “Saya PR”, saya menghapus semua tautan yang tidak perlu
Halo! Pada artikel ini saya akan memberi tahu Anda cara menginstal dan menghubungkan framework Bootstrap. Anda dapat membaca tentang apa itu Bootstrap.
Saya sudah mengatakan banyak tentang instalasi standar di artikel sebelumnya. Semuanya sederhana di sini. Kami pergi ke situs web resmi getbootstrap.com, klik item Memulai dan pilih opsi pertama. Jadi, kami mengunduh bootstrap versi lengkap dengan semua komponen js dan css.
Bootstrap CDN adalah peluang untuk menghubungkan kerangka kerja dari penyimpanan CDN tanpa mengunduh filenya ke komputer Anda. Tentu saja, dalam hal ini tidak ada pembicaraan tentang penyesuaian apa pun.
Kustomisasi kerangka kerjaNamun faktanya bootstrap berisi banyak komponen secara default, dan beberapa di antaranya mungkin tidak berguna bagi Anda saat mengembangkan situs tertentu. Misalnya Anda sedang mendesain toko online. Anda mungkin tidak memerlukan modals dan tooltips, dan Anda mungkin tidak memerlukan banyak komponen css. Dalam hal ini, adalah bijaksana untuk tidak memasukkan komponen-komponen ini ke dalam kerangka kerja.
Atau Anda sedang membuat blog sederhana. Katakanlah Anda tidak benar-benar membutuhkan apa pun di sana, jadi Anda hanya dapat menyisakan jaring dan beberapa komponen terpenting.
Memilih hanya apa yang Anda perlukan adalah pendekatan profesional dalam membuat situs web dan menggunakan Bootstrap. Secara default, versi gaya CSS kerangka kerja yang tidak terkompresi di versi terbaru memiliki berat 143 kilobyte. Dan skrip berukuran lebih dari 60 kilobyte. Ya, jika Anda mengompres kodenya, Anda dapat mengurangi bobotnya sebesar 20-40%, tetapi tetap saja file tersebut tidak akan menjadi yang paling ringan.
Jika, misalnya, Anda menonaktifkan semua komponen dan hanya menyisakan grid (ini sangat sering dilakukan), maka berat css hanya akan 15-20 kilobyte, dan dalam bentuk terkompresi beberapa kilobyte lebih sedikit. Inilah yang akan Anda capai kecepatan maksimum dan optimalisasi proyek Anda.
Oke, itu hanya teori. Untuk menyesuaikan kerangka kerja, kunjungi situs web resmi yang sama dan buka Kustomisasi.
Memilih komponen yang diperlukanLangkah pertama di sini adalah mengonfigurasi komponen mana yang ingin Anda sertakan dalam versi Bootstrap Anda. Mari kita mulai dengan CSSnya:
Gaya Media Cetak – pertanyaan media untuk pencetakan. Jika Anda tidak berencana mencetak halaman situs, Anda dapat menonaktifkannya.
Tipografi, kode, tabel, formulir, dan tombol adalah semua hal yang dapat Anda tata sendiri di CSS jika Anda benar-benar menginginkannya. Tentu saja, ini akan memakan waktu, tetapi jika desain elemen Anda sangat berbeda dari apa yang ditawarkan kerangka kerja secara default, Anda dapat menonaktifkan semua gaya CSS ini dan menulisnya sendiri.
Sistem Grid sebenarnya adalah sebuah grid. Saya tidak melihat ada gunanya menonaktifkannya, karena ini adalah kekuatan utama kerangka ini. Berkat grid, Anda dapat dengan mudah mengadaptasi templat ke perangkat apa pun, dan saat ini di era lalu lintas seluler, hal ini sangat penting. Kami tidak mematikannya dalam kondisi apa pun.
Utilitas responsif – utilitas adaptif, saya juga menyarankan untuk tidak menonaktifkannya. Kita akan membahas utilitas adaptif di artikel berikutnya, di mana kita akan melihat sistem grid secara detail. Ini adalah kelas yang memungkinkan Anda menyembunyikan elemen atau membuatnya terlihat pada lebar layar tertentu. Sangat nyaman dan berguna.
Misalnya, hal-hal seperti grup daftar, bilah tombol, ikon, panel, peringatan, penomoran halaman, remah roti, dll. Anda juga dapat menonaktifkan font ikon. Ini layak dilakukan jika Anda tidak memerlukan ikon di situs sama sekali, atau Anda menghubungkan kumpulan lainnya. Sebenarnya Anda harus duduk dan memikirkan apa yang Anda butuhkan dari semua komponen yang disajikan dan apa yang tidak. Setiap situs akan memiliki kumpulannya sendiri, karena setiap situs memiliki desain dan fungsi yang berbeda.
Komponen Javascript
Ini adalah menu tarik-turun, keterangan alat, jendela modal, dan penggeser. Jika Anda tidak memerlukan semua ini, matikan. Dalam beberapa kasus, semua komponen bisa sangat berguna ketika Anda memiliki menu drop-down dan slider di situs Anda. halaman rumah, dan jendela modal. Dalam beberapa kasus, paling banyak 1-2 komponen mungkin berguna, maka tidak perlu memperpanjang kode, menonaktifkan komponen yang tidak perlu.
Plugin jQueryDi sini Anda dapat menonaktifkan plugin perpustakaan jquery yang membantu komponen javascript bekerja dengan benar. Oleh karena itu, jika Anda tidak menggunakan penggeser di situs Anda, maka Anda tidak memerlukan plugin untuk membuat carousel, jika Anda tidak memerlukan tooltips, nonaktifkan tooltips.js, dll.
Plugin scrollspy memantau posisi teks dan, bergantung pada ini, menyorot satu atau beberapa item menu. Biasanya fitur seperti itu diperlukan di halaman arahan, saya praktis belum pernah melihatnya di situs biasa. Dan seterusnya. Perhatikan baik-baik apa yang Anda butuhkan dan apa yang tidak.
Variabel lebih sedikitSelanjutnya, item besar akan terbuka di depan Anda, di mana akan ada banyak sub-item dengan pengaturan variabel Less. Di sini Anda dapat mengubah hampir semuanya: warna, ukuran font, breakpoint, jumlah kolom dalam grid, indentasi, dll.
Tentu saja, untuk melakukan ini Anda harus mengetahui setidaknya dasar-dasar Less atau setidaknya secara intuitif menavigasi formulir ini.
Misalnya, jika Anda melihat variabel @font-family-base, maka Anda setidaknya perlu memahami secara intuitif bahwa variabel tersebut bertanggung jawab atas nama font, yang merupakan font dasar di situs. Nah, variabel @font-size-base mengatur ukuran font dasar. Secara default di bootstrap adalah 14 piksel.
Anda dapat mengedit semua bidang ini. Ubah saja 14 menjadi 20 dan sekarang Anda dapat mengunduh kerangka kerja yang ukuran font defaultnya adalah 20 piksel. Oleh karena itu, Anda dapat segera menyesuaikan ukuran judul, dll.
Menyiapkan jaringanPengaturan sistem gridnya juga sangat menarik bagi kami, ini dia:
Seperti yang Anda lihat, Anda dapat mengubah jumlah kolom dan lebar indentasi di antara kolom-kolom tersebut dalam beberapa detik. Variabel grid-float-breakpoint menetapkan titik di mana menu seluler diciutkan menjadi ikon.
Jika Anda mengubah nilainya, misalnya menjadi @screen-md-min, maka pada lebar 991 piksel atau kurang, akan terjadi keruntuhan. Anda juga dapat menghapus variabel ini dan menulis nilainya dalam piksel. Misalnya, 520 piksel. Kemudian penciutan menu tersebut hanya akan terjadi pada smartphone dan ponsel saja.
Sebenarnya halaman kustomisasi Bootstrap memiliki banyak sekali pengaturan, namun secara umum metode kustomisasi ini (menggunakan halaman Kustomisasi di situs resminya) bukanlah yang tercepat dan ternyaman. Selanjutnya saya akan menunjukkan cara tercepat.
Gunakan halaman Kustomisasi ketika Anda perlu membuat 2-10 perubahan pada kerangka kerja, atau cukup nonaktifkan komponen yang diperlukan. Jika Anda ingin mengubah lebih banyak nilai, Anda perlu menggunakan metode lain.
Sebenarnya, saat Anda mengonfigurasi versi kerangka kerja Anda, klik tombol besar di bagian paling bawah halaman. Ini akan mengkompilasi versi Bootstrap untuk Anda dan mengunduhnya ke komputer Anda. Maka yang perlu Anda lakukan hanyalah menghubungkan dan menggunakan. Saya sudah membicarakan tentang koneksi di artikel sebelumnya (termasuk cara melakukannya di WordPress).
Mengunduh lebih sedikit sumber dan mengeditnyaSeperti yang sudah saya katakan, jika Anda perlu melakukan banyak pengeditan pada kode sumber framework dan ingin melihat perubahannya secara instan, maka Anda memerlukan lebih sedikit sumber. Anda dapat mengunduhnya di tempat yang sama dengan kerangka versi lengkap - di bagian Memulai.
Untuk bekerja dengan lebih sedikit sumber dan mengeditnya, Anda memerlukan:
Setidaknya beberapa pengetahuan tentang css dan kurang atau praprosesor lainnya
Kompiler lebih sedikit (dapat diunduh gratis)
Sebenarnya saya tidak akan membahas secara detail tentang kustomisasi melalui lebih sedikit kode sumber, tapi ini yang paling banyak metode terbaik, karena Anda tidak perlu membuka halaman Kustomisasi 100 kali dan mengkompilasi lebih banyak versi baru dari kerangka kerja tersebut.
Tema bootstrap atau mengubah tampilan elemenBawaan masuk versi lengkap framework di folder css Anda juga dapat menemukan file bootstrap-theme.css. Tidak perlu menghubungkannya ke situs. Fungsi apa yang dijalankannya? File tersebut diperlukan semata-mata untuk, jika perlu, mengubah gaya elemen yang Anda perlukan.
Peran yang sama ini dapat dipenuhi oleh style.css Anda sendiri, di mana Anda juga dapat mengganti gaya. Bootstrap-theme bukanlah file yang diperlukan, melainkan digunakan untuk pemesanan. Misalnya, Anda memiliki 3 file:
bootstrap.css – tentu saja, ini adalah kode kerangka itu sendiri;
bootstrap-theme.css – di sini Anda mengganti gaya untuk elemen bootstrap;
style.css – tulis gaya untuk elemen Anda di file ini.
Kemudian Anda akan mendapatkan keteraturan dalam kode dan struktur proyek. Namun tidak ada yang melarang Anda melakukan semua operasi dalam satu file - style.css dan tidak menggunakan file tema sama sekali.
Yang terpenting adalah memasukkan file tema dan css Anda sendiri ke dalam markup html lebih lambat dari file dengan kode framework, sehingga style berhasil ditimpa.
Contoh cara kerja temaSeperti yang sudah saya katakan, secara default Bootstrap menyertakan file tema bootstrap. Coba sambungkan. Saya perhatikan, sambungkan setelah file utama.
Secara default, tombol di Bootstrap terlihat seperti ini:
Dan beginilah perubahan tampilannya setelah menghubungkan file dengan tema:
Seperti yang Anda lihat, sedikit gradien muncul. Oleh karena itu, Anda dapat menulis ulang kode di file bootstrap-theme dan mendapatkan gaya tombol Anda sendiri. Namun Anda mungkin bertanya, mengapa tidak melakukan perubahan ini langsung di bootstrap.css? Faktanya adalah bahwa versi baru dari kerangka kerja ini terus dirilis dan jika Anda memutuskan untuk memperbarui, perubahan Anda akan sulit diterapkan di versi baru. Merupakan praktik yang baik bagi pengembang untuk tidak menyentuh kode sumber jika memungkinkan untuk dibuat file terpisah dan jelaskan perubahannya. Ini jauh lebih cerdas dan nyaman.
Bagaimana cara memasang tema Bootstrap baru yang diunduh dari Internet?Ada cukup banyak situs, kebanyakan asing, di mana Anda dapat mengunduh banyak tema dan template secara gratis. Untuk menghindari kebingungan, mari kita pertimbangkan situs web yang dirancang menggunakan Bootstrap sebagai template, dan tema sebagai seperangkat aturan CSS yang mengesampingkan tampilan standar elemen.
Tema-tema tersebut dapat diunduh, misalnya, dari bootswatch.com/, dan dengan menggunakan mesin pencari Anda dapat menemukan lusinan tema lainnya.
Prinsip umum pemasangan tema tersebut bergantung pada situs tempat Anda mengunduhnya. Jika Anda dapat mengunduhnya dalam format tema bootstrap, bagus, unduh dan sambungkan. Pada bootswatch, misalnya, Anda perlu mengunduh bootstrap.css dan mengganti file gaya kerangka standar Anda dengan itu. Ada juga opsi dengan sumber yang lebih sedikit.
“Kami telah mengenal framework ini, melihat kelebihannya, melihat secara singkat apa yang disebut grid, sekarang saatnya untuk mempraktekkan cara menggunakan Bootstrap.
Anda dapat mengunduh Bootstrap dari situs resminya getbootstrap.com. Di halaman utama, klik tombol “ Unduh Bootstrap.dll».
Setelah mengklik, kita dibawa ke halaman yang menawarkan beberapa jenis download. Pada artikel ini, kami akan mempertimbangkan pengunduhan biasa dari kerangka versi lengkap.
Setelah mengunduh dan membongkar arsip, kami mendapatkan tiga folder:
- CSS- folder dengan gaya
- JS- folder dengan skrip js
- FONT- folder dengan font ikon
Ini adalah keseluruhan kerangka kerja. Untuk pekerjaan selanjutnya dengan Bootstrap saya akan membuat folder dengan nama yang sama bootstrap, di dalam folder tersebut saya akan membuat satu file kosong index.html dan saya akan mengisi folder dan file tersebut beserta analisa framework pada artikel ini, dan di akhir artikel. postingan saya akan memberikan linknya agar anda bisa melihat hasilnya. Jika Anda mengikuti saya, Anda akan memahami bahwa bekerja dengan kerangka kerja itu sangat mudah.
Dari kerangka yang diunduh kita memerlukan seluruh folder font, satu file gaya dari folder css bernama bootstrap.css atau bootstrap.min.css dan juga satu skrip dari folder js bernama bootstrap.js atau bootstrap.min.js .
Perbedaan antara file dengan “.min.” dari yang biasa di file itu dengan “.min.” dioptimalkan, yaitu kode ditulis dalam satu baris tanpa jeda baris dan spasi, sehingga bobotnya lebih ringan dari biasanya, dan isi file benar-benar sama.
Sekarang saya akan membuat folder css di folder bootstrap saya, meletakkan file bootstrap.min.css di dalamnya dan membuat folder js di mana saya akan meletakkan bootstrap.min.js. Selain itu, di folder css, saya akan membuat file style.css kosong untuk menambahkan gaya saya sendiri.
File kerangka kerja yang diperlukan telah dipindahkan, dan sekarang kami hanya akan bekerja dengan file index.html. Agar tidak menulis kode sendiri, mari kita buka dokumentasinya, pada halaman download situs resmi di bawah ini terdapat kerangka HTML dokumen yang sudah jadi, salin dan tempel ke file indeks kita.
File gaya kami, skrip js, dan perpustakaan jQuery sudah termasuk dalam kerangka, tetapi jika Anda tidak menggunakan “ bootstrap» templat, tetapi pada beberapa templat Anda sendiri, maka Anda perlu menghubungkan file gaya bootstrap.min.css di antara tag, dan setelah itu dibuat style.css .
Kemudian, sebelum tag penutup, kita sertakan terlebih dahulu perpustakaan jQuery.
Dan setelah perpustakaan kita menghubungkan skrip js.
Secara umum, kerangka HTML dokumen terlihat seperti ini.
tali sepatu
Proses persiapan selesai, Bootstrap sudah terhubung, kita bisa melanjutkan dan mulai mengisi halaman WEB kita dengan komponen framework.
Cara menggunakan dokumentasiDokumentasi kerangka kerja ini sangat bagus, sehingga mudah digunakan. Menu utama situs resminya memiliki beberapa bagian: “ Mulai», « CSS», « Komponen», « JavaScript" Dan " Sesuaikan", pada halaman setiap bagian di kolom kanan terdapat nama-nama komponen yang berbeda; mengkliknya akan menampilkan deskripsi dan kasus penggunaannya dalam bentuk kode yang sudah jadi.
Jika ada kesulitan dengan bahasa Inggris, lalu ada beberapa sumber di jaringan dengan dokumentasi yang diterjemahkan, berikut adalah alamat salah satu situs tersebut www.oneskyapp.com/ru/docs/bootstrap. Anda juga dapat menggunakan semacam penerjemah browser, terjemahannya tentu saja akan bengkok, tetapi inti dari apa yang ditulis akan jelas. Secara umum, Anda hanya perlu membaca dokumentasi, mengambil contoh kode, dan berlatih.
Bekerja dengan Bootstrap GridSeperti yang saya katakan di artikel sebelumnya, grid berfungsi seperti tabel, termasuk baris .baris dan speaker .col, maksimal ada dua belas kolom. Awalan (lg, md, sm, xs) ditambahkan ke class.col untuk menunjukkan lebarnya kolom ini pada resolusi layar tertentu.
Baris dan kolom digabungkan menjadi satu blok dengan kelas .wadah atau class.container-fluid . Perbedaannya adalah kelas .container memiliki lebar maksimum 1170 piksel, sedangkan kelas .container-fluid memiliki lebar tidak terbatas, yaitu seluruh lebar layar, meskipun resolusi layarnya sangat besar. Informasi lengkap Untuk informasi tentang grid Bootstrap, lihat dokumentasi di bagian " CSS».
Dengan menggunakan framework grid, kita akan membuat layout klasik halaman kita (header, konten, kolom samping dan footer), untuk ini kita akan membuat tiga baris dan empat kolom, inilah kode yang kita dapatkan.
FOOTER SIDEBAR ISI KEPALA
Untuk memisahkan blok, saya menulis dua kelas tambahan: .block, .block2 dan menambahkan beberapa aturan ke dalamnya di file style.css yang dibuat.
Blokir( latar belakang: #eee; batas: 1px solid #000; ) .block2( latar belakang: #ccc; batas: 1px solid #000; )
Mari tambahkan font ikon ke judul kita. Dalam bab " Komponen» pilih ikon yang Anda suka, salin teks di bawah gambar, teks ini adalah kelas. Buat tag di dalam tag header dan tempelkan kelas yang disalin.
KEPALA
Sekarang tidak ada salahnya untuk menambahkan beberapa jenis menu. Untuk melakukan ini, di bagian " Komponen" pergi ke " bilah navigasi", pilih menu yang anda suka, copy kodenya dan paste setelah tag pembuka.
Yang tersisa hanyalah mengisi" isi t" dan " bilah sisi" Kami melakukan semuanya sesuai dengan skema yang sama: pilih komponen dalam dokumentasi, baca deskripsi, salin dan tempel ke tempat yang tepat. Saya akan menambahkan formulir dan tombol, mengkliknya akan membuka jendela modal dengan tabel.
Begitu saja, hanya dalam 5 menit, kami membuat sketsa tata letak halaman paling sederhana, adaptif untuk semua perangkat, dan praktis tidak menulis kode apa pun sendiri. Ikuti tautannya dan lihat hasilnya.
Di sinilah saya akan mengakhiri artikel ini. Kami hanya melihat sebagian kecil dari fungsi kerangka kerja, tapi saya rasa Anda memahami cara bekerja dengan Bootstrap. Langkah selanjutnya adalah mengubah gaya kerangka kerja agar sesuai dengan kebutuhan Anda dan mengunduh komponen-komponen yang diperlukan saja. Kami akan menganalisis semua ini di artikel “
Memuat...