Cara Membuat Beberapa Kolom Responsif dengan Bootstrap 3
Diterbitkan: 2022-02-16
Apakah Anda ingin meningkatkan respons situs web Anda dengan Bootstrap? Aspek terpenting dari Bootstrap adalah sistem grid pertama seluler 12 kolom. Inilah yang Anda gunakan untuk membuat tata letak yang responsif.
Dalam tutorial video ini, Anda akan membuat situs web dasar menggunakan Bootstrap dan mempelajari cara menggunakan sistem grid Bootstrap untuk membuat tata letak responsif dengan banyak kolom.
Sebelum Menonton Tutorial
Sebelum Anda dapat mengikuti tutorial video di bawah ini dan mempelajari cara membuat kolom responsif Anda sendiri, Anda memerlukan:
- Pemahaman dasar tentang apa itu Bootstrap
- Pemahaman dasar tentang apa itu sistem grid Bootstrap
- Unduh Bootstrap ke hard drive Anda
- Buat file index.html Bootstrap dasar untuk dibangun
Apa Itu Bootstrap?
- Bootstrap adalah kerangka kerja untuk pengembang HTML, CSS, dan JavaScript yang bekerja pada responsivitas situs web.
- Ini terdiri dari gaya CSS responsif yang sudah dibuat sebelumnya untuk kolom, daftar, navigasi, formulir web, dan banyak elemen web lainnya.
Memahami Sistem Grid Bootstrap
- Sistem grid bootstrap mengklasifikasikan ukuran layar menjadi empat jenis: Extra-small, Small, Medium dan Large.
- Ekstra-kecil adalah untuk ponsel. The Small adalah untuk tablet, seperti I-Pad. Medium adalah untuk monitor desktop. Dan Large hanya untuk monitor desktop yang lebih besar.
- Untuk membantu Anda menyempurnakan responsivitas untuk keempat jenis layar ini, Bootstrap membagi lebar perangkat tampilan web ke dalam sistem grid 12 kolom.
- Setiap salah satu dari empat jenis Bootstrap Grid menjadi responsif hanya jika Anda menetapkan kelas CSS yang ditunjuknya sendiri.
- Misalnya, untuk membuat div responsif untuk perangkat ekstra kecil, div harus memiliki kelas Bootstrap .col-xs-<number_of_columns_to_take> sendiri, seperti <div class="col-xs-6">.
Mengunduh Bootstrap
- Buka getboostrap.com dan klik tombol "Unduh Bootstrap":
- Anda akan melihat halaman "Memulai". Klik tombol "Unduh Bootstrap":
- Simpan file ini ke hard drive komputer Anda, di mana pun Anda inginkan. Itu tidak harus disimpan ke server web.
- Buka zip file ini dan ganti nama folder yang diekstraksi menjadi "bootstrap".
Mempersiapkan Halaman index.html Bootstrap Dasar Anda
Langkah 1. Buat File Bootstrap index.html Anda
- Kembali ke halaman "Memulai" (http://getbootstrap.com/getting-started/#download) dan klik tautan "Template Dasar" di bilah sisi kanan:
- Anda akan melihat kode "Template dasar". Klik tombol "Salin" untuk menyalin kode:
- Rekatkan kode "Template Dasar" di editor teks Anda dan simpan sebagai index.html di folder yang sama, tempat Anda menyimpan folder "bootstrap". Sekarang akan menjadi halaman depan situs Bootstrap Anda.
- Buka index.html yang baru dibuat dan lihat situs web Bootstrap dasar Anda:
- Buka file index.html di editor teks Anda dan di antara tag pembuka <body> dan <h1> tambahkan <div class="container"> (1). Tutup div baru ini setelah tag penutup </h1> (2) dan simpan file:
- Periksa halaman depan dan perhatikan bagaimana "Hello World!" tidak menempel di tepi halaman lagi dan sekarang telah bergeser sedikit ke kanan, agar terlihat sedikit lebih rapi. Kelas "wadah" Bootstrap yang Anda tetapkan ke div ini telah menambahkan beberapa margin ke teks ini:
- Kembali ke file index.html Anda. Di antara tag <h1> dan </h1> ganti tag "Hello World!" ke "Trusthub". Simpan file dan periksa ujung depan situs Anda.
Langkah 2. Tambahkan Beberapa Konten dan Bilah Sisi
- Kembali ke file index.html Anda dan di bawah kode <h1>Trustub</h1> copypaste kode berikut:
<div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> </div>- Kembali ke ujung depan situs Anda. Segarkan. Anda sekarang akan melihat konten Anda dan bilah sisi "Tim Kami", tanpa tata letak responsif berkolom:
- Kembali ke situs getbootstrap.com dan di menu atas klik tombol "CSS":
- Di bilah sisi, klik tombol "Sistem Grid":
- Gulir ke bawah halaman ke bagian "Opsi kisi" (1) dan perhatikan sistem kisi 12 kolom Bootstrap dengan empat jenis ukuran layar, lebarnya, dan awalan kelas CSS yang ditentukan (2):
- Jangan khawatir jika opsi sistem grid Bootstrap belum masuk akal untuk Anda. Semuanya akan datang bersama-sama untuk Anda dalam sedetik ketika Anda mulai bermain di sekitar mereka di situs Anda.
- Buka file index.html Anda sekali lagi dan di bawah <div class="row">, untuk <div> yang sudah ada masukkan kelas "col-md-9". Div baru Anda sekarang akan terlihat "div class="col-md-9">:
- Sekarang buka div Anda, yang terletak tepat di atas header <h2> "Out Team" dan berikan kelas CSS grid "col-md-3" Bootstrap grid. Simpan file:
- Kembali ke situs Anda untuk melihat tindakan perubahan ini. Tekan tombol F5 pada keyboard Anda untuk menyegarkan situs web Anda. Sekarang Anda akan melihat bahwa area konten dan bilah sisi Anda duduk berdampingan.
- Div konten Anda sekarang mengambil 9 dari yang tersedia di kotak Bootstrap 12 kolom (75% dari seluruh lebar layar desktop). Dan bilah sisi Anda mengambil 3 dari kotak Bootstrap 12 kolom (25% dari seluruh lebar layar desktop):
Cemerlang! Anda sekarang siap untuk mengikuti tutorial video di bawah ini. Mari kita mulai.
Selamat! Anda baru saja belajar cara membuat tata letak halaman web responsif dengan banyak kolom menggunakan Bootstrap. Apakah Anda ingin mempelajari lebih lanjut tentang Bootstrap? Jika ya, silakan kunjungi saluran YouTube OSTraining kami dan tonton "Tutorial Kerangka Bootstrap".