Bagaimana grid bootstrap diimplementasikan?

Pada tahun 2011, Bootstrap dibuat oleh dua karyawan Twitter (Mark Otto dan Jacob Thornton) untuk mengatasi masalah fragmentasi alat/platform internal. Bootstrap bertujuan untuk memberikan konsistensi di antara berbagai aplikasi web yang dikembangkan secara internal di Twitter untuk mengurangi redundansi dan meningkatkan kemampuan beradaptasi dan penggunaan kembali

Sebagai kreator digital, kita harus selalu berusaha membuat aplikasi kita dapat beradaptasi dan dapat digunakan kembali. Ini akan membantu menjaga koherensi antara aplikasi dan mempercepat proses, karena kita tidak perlu membuat fondasi dasar lagi dan lagi. Dalam tutorial hari ini, Anda akan mempelajari apa itu Bootstrap, bagaimana hubungannya dengan Desain Web Responsif, dan pentingnya untuk industri web

Saat Twitter Blueprint lahir, ia menyediakan cara untuk mendokumentasikan dan berbagi pola/aset desain umum di dalam Twitter. Ini saja sudah merupakan fitur luar biasa yang akan menjadikan Bootstrap kerangka kerja yang sangat berguna. Dengan ini, lebih banyak pengembang internal mulai berkontribusi terhadap proyek Bootstrap sebagai bagian dari minggu Hackathon, dan proyek tersebut meledak begitu saja. Tidak lama kemudian, namanya diubah menjadi "Bootstrap" seperti yang kita kenal dan sukai hari ini, dan dirilis sebagai proyek open source ke komunitas. Tim inti yang dipimpin oleh Mark dan Jacob bersama dengan komunitas pengembang yang bersemangat dan berkembang membantu mempercepat pertumbuhan Bootstrap

Di awal tahun 2012 setelah banyak kontribusi dari tim inti dan komunitas, lahirlah Bootstrap 2. Itu jauh dari kerangka kerja untuk menyediakan konsistensi internal di antara alat-alat Twitter. Sekarang menjadi framework responsif menggunakan sistem petak 12 kolom. Itu juga memberikan dukungan bawaan untuk Glyphicons dan banyak komponen baru lainnya

Pada tahun 2013, Bootstrap 3 dirilis dengan pendekatan desain yang mengutamakan seluler dan serangkaian komponen yang didesain ulang sepenuhnya menggunakan desain datar yang sangat populer. Ini adalah versi yang digunakan banyak situs web saat ini dan sangat cocok untuk sebagian besar pengembang. Bootstrap 4 adalah rilis stabil terbaru

Artikel ini adalah kutipan yang diambil dari buku, 'Desain Web Responsif dengan Contoh', yang ditulis oleh Frahaan Hussain

Mengapa menggunakan Bootstrap?

Anda mungkin memiliki gagasan yang masuk akal tentang mengapa Anda menggunakan Bootstrap untuk mengembangkan situs web setelah membaca sejarahnya, tetapi ada lebih dari itu. Sederhananya, ini menyediakan yang berikut ini

• Petak yang responsif, menggunakan filosofi desain
• Kompatibilitas lintas browser, menggunakan Normalisasi. css untuk memastikan elemen dirender secara konsisten di semua browser (yang bukan tugas yang sangat mudah). Anda mungkin bertanya-tanya mengapa itu sulit. Sederhananya, ada beberapa browser berbeda, masing-masing dengan banyak versi, yang semuanya menampilkan konten secara berbeda. Saya telah melihat beberapa browser memberi batas di sekitar gambar secara default, sedangkan beberapa browser tidak. Jenis ketidakkonsistenan ini terbukti sangat buruk bagi pengalaman pengguna
• Beragam komponen UI, dengan menyediakan komponen UI yang disempurnakan sebagai developer, kami akan mewujudkan kreativitas kami dengan cara yang jauh lebih mudah. Komponen-komponen ini biasanya memungkinkan tim untuk meningkatkan kecepatan pengembangan mereka karena mereka mulai dari fondasi yang telah dicoba dan diuji. Mereka tidak hanya memberikan desain yang bagus, tetapi biasanya diimplementasikan menggunakan praktik terbaik dalam hal kinerja dan aksesibilitas
• Ukuran yang sangat kompak dengan tapak yang kecil
• Sangat cepat untuk dikembangkan, tidak menghalangi seperti banyak kerangka kerja lainnya, tetapi memungkinkan kreativitas Anda bersinar
• Sangat mudah untuk mulai menggunakan Bootstrap di situs web Anda
• Bundel plugin JavaScript umum seperti jQuery
• Dokumentasi yang sangat baik
• Dapat disesuaikan, memungkinkan Anda menghapus fitur yang tidak perlu
• Komunitas luar biasa yang selalu siap, 24/7, untuk membantu

Cukup jelas sekarang bahwa Bootstrap adalah kerangka kerja yang luar biasa dan itu akan membantu memberikan konsistensi di antara proyek kami dan membantu desain responsif lintas browser. Tetapi mengapa menggunakan Bootstrap daripada kerangka kerja lain? . CSS, dan Kerangka, untuk menyebutkan beberapa

Bootstrap, bagaimanapun, adalah salah satu kerangka kerja responsif pertama dan sejauh ini yang paling berkembang dengan komunitas yang terus berkembang. Ini memiliki dokumentasi online, baik resmi maupun tidak resmi, dan kerangka kerja lain tidak dapat membanggakan sumber dayanya sebanyak yang dapat dilakukan Bootstrap. Terus diperbarui, itu menjadikannya pilihan yang tepat untuk pengembang situs web mana pun

Selain itu, sebagian besar framework JavaScript, seperti Angular dan React, memiliki binding ke komponen Bootstrap yang akan mengurangi jumlah kode dan waktu yang dihabiskan untuk mengikatnya dengan framework lain. Itu juga dapat digunakan dengan alat seperti SASS untuk menyesuaikan komponen yang disediakan lebih lanjut

Sistem grid Bootstrap

Pertama, mari kita bahas apa itu sistem grid secara umum, terlepas dari kerangka kerja yang Anda pilih untuk mengembangkan situs web luar biasa Anda. Tanpa menggunakan framework, CSS akan digunakan untuk mengimplementasikan grid. Namun, kerangka kerja seperti Bootstrap menangani semua sisi CSS dan memberi kita kelas yang mudah digunakan. Sistem grid responsif terdiri dari dua elemen utama

• Kolom. Ini adalah wadah horizontal untuk menyimpan konten dalam satu baris
• Baris. Ini adalah wadah tingkat atas untuk menyimpan kolom

Situs web Anda akan memiliki setidaknya satu baris, tetapi dapat memiliki lebih banyak baris. Setiap baris dapat berisi wadah yang menjangkau sejumlah kolom. Misalnya, jika sistem kisi memiliki 100 kolom, maka penampung yang merentang 50 akan berukuran setengah dari lebar browser dan/atau elemen induk

Dasar-dasar Bootstrap

Sistem grid Bootstrap terdiri dari 12 kolom yang dapat digunakan untuk menampilkan konten. Bootstrap juga menggunakan wadah (metode untuk menyimpan konten situs web), baris, dan kolom untuk membantu tata letak dan penyelarasan konten halaman web. Semua ini menggunakan kelas HTML untuk penggunaan dan akan segera dijelaskan. Tujuan dari ini adalah sebagai berikut

• Kolom digunakan untuk mengelompokkan cuplikan konten situs web, dan, pada gilirannya, memungkinkan manipulasi tanpa mengganggu aliran konten internal. Ada dua jenis kolom yang berbeda
  • wadah. Digunakan untuk lebar tetap, yang diatur oleh Bootstrap
  • cairan wadah. Digunakan untuk lebar penuh untuk menjangkau seluruh browser
• Baris digunakan untuk mengelompokkan kolom secara horizontal, yang membantu menyelaraskan konten situs dengan benar
  • baris. Hanya ada satu jenis baris

• Kolom yang disebutkan sebelumnya adalah cara untuk mengatur seberapa lebar konten seharusnya. Berikut ini adalah kelas-kelas yang digunakan untuk kolom
  • col-xs. Dirancang untuk menampilkan konten hanya pada layar ekstra kecil
    • Lebar penampung maks—tidak ada
    • Dipicu saat lebar browser di bawah 576px
  • kolom-sm. Dirancang untuk menampilkan konten hanya di layar kecil
    • Lebar penampung maks—540px
    • Dipicu saat lebar browser di atas atau sama dengan 576px dan di bawah 768px
  • col-md. Dirancang untuk menampilkan konten hanya pada layar sedang
    • Lebar penampung maks—720px
    • Dipicu saat lebar browser di atas atau sama dengan 768 dan di bawah 992px
  • col-lg. Dirancang untuk menampilkan konten hanya di layar besar
    • Lebar penampung maks—960px
    • Dipicu saat lebar browser di atas atau sama dengan 992px dan di bawah 1200px
  • col-xl. Dirancang untuk menampilkan konten hanya pada layar ekstra besar
    • Lebar penampung maks—1140px
    • Dipicu saat lebar browser di atas atau sama dengan 1200px
  • kol. Dirancang untuk dipicu pada semua ukuran layar

Untuk mengatur lebar kolom, kami cukup menambahkan bilangan bulat mulai dari 1 hingga 12 di akhir kelas, seperti itu

• kol-6. Mencakup enam kolom pada semua ukuran layar
• col-md-6. Mencakup enam kolom hanya pada ukuran layar ekstra kecil

Nanti di bab ini, kita akan membahas beberapa contoh cara menggunakan fitur ini dan cara kerjanya bersama

Penggunaan dan contoh

Untuk menggunakan fitur-fitur tersebut di atas, strukturnya adalah sebagai berikut

• div dengan kelas kontainer
  • div dengan kelas baris
    • div dengan kelas kolom
      • Isi
    • div dengan kelas kolom
      • Isi
    • div dengan kelas kolom
      • Isi
    • div dengan kelas kolom
      • Isi
  • div dengan kelas baris
    • div dengan kelas kolom
      • Isi
    • div dengan kelas kolom
      • Isi
    • div dengan kelas kolom
      • Isi
    • div dengan kelas kolom
      • Isi
    • div dengan kelas kolom
      • Isi
    • div dengan kelas kolom
      • Isi

Contoh berikut mungkin menerapkan beberapa gaya CSS;

Contoh kolom dengan lebar yang sama

Kami akan memulai dengan contoh sederhana yang terdiri dari satu baris dan tiga kolom yang sama pada semua ukuran layar

Kode berikut menghasilkan hasil yang disebutkan di atas

Anda mungkin menggaruk-garuk kepala tentang kelas kolom, karena tidak ada angka yang ditambahkan. Ini adalah fitur luar biasa yang akan sangat berguna. Ini memungkinkan kita, sebagai pengembang web, untuk menambahkan kolom dengan mudah, tanpa harus memperbarui angka, jika lebar kolomnya sama. Dalam contoh ini, ada tiga kolom, yang berarti ketiga div membentang sama sepertiga barisnya

Contoh kolom multi-baris dengan lebar yang sama

Sekarang mari kita perpanjang contoh sebelumnya ke beberapa baris

Kode berikut menghasilkan hasil yang disebutkan di atas

Seperti yang Anda lihat, dengan menambahkan baris baru, kolom secara otomatis berpindah ke baris berikutnya. Ini sangat berguna untuk mengelompokkan konten bersama

Multi-baris, kolom dengan lebar yang sama tanpa contoh beberapa baris

Judul contoh ini mungkin terlihat membingungkan, tetapi Anda perlu membacanya dengan benar. Kami sekarang akan membahas pembuatan banyak baris hanya dengan menggunakan kelas baris tunggal. Ini dapat dicapai dengan bantuan kelas utilitas tampilan yang disebut w-100

Kode berikut menghasilkan hasil yang disebutkan di atas

Contoh menunjukkan beberapa div baris tidak diperlukan untuk beberapa baris. Tapi hasilnya tidak persis sama, karena tidak ada celah antar baris. Ini berguna untuk memisahkan konten yang masih mirip. Misalnya, di jejaring sosial, biasanya ada postingan, dan setiap postingan akan berisi informasi seperti tanggal, judul, deskripsi, dan sebagainya. Setiap postingan bisa menjadi barisnya sendiri, tetapi di dalam postingan, masing-masing bagian informasi dapat dipisahkan menggunakan kelas ini

Kolom berukuran berbeda

Hingga saat ini, kami hanya membuat baris dengan kolom dengan lebar yang sama. Ini berguna, tetapi tidak berguna karena dapat mengatur ukuran individual. Seperti yang disebutkan di bagian Bootstrap grid system, kita dapat dengan mudah mengubah lebar kolom dengan menambahkan angka mulai dari 1-12 di akhir kelas col

Kode berikut menghasilkan hasil yang disebutkan di atas

Seperti yang Anda lihat, menyetel lebar eksplisit kolom sangat mudah, tetapi ini menerapkan lebar untuk semua ukuran layar. Anda mungkin menginginkannya hanya diterapkan pada ukuran layar tertentu. Bagian selanjutnya akan membahas hal ini

Kolom berukuran berbeda dengan batasan ukuran layar

Mari gunakan contoh sebelumnya dan perluas untuk mengubah ukuran secara responsif pada layar dengan ukuran berbeda. Pada layar ekstra besar, grid akan terlihat seperti berikut ini

Pada semua ukuran layar lainnya, itu akan muncul dengan kolom dengan lebar yang sama

Kode berikut menghasilkan hasil yang disebutkan di atas

Sekarang kami mulai menggunakan breakpoint yang menyediakan cara untuk membuat banyak tata letak dengan kode ekstra minimal untuk memanfaatkan real estate yang tersedia sepenuhnya

Mencampur dan mencocokkan

Kami tidak dibatasi untuk memilih hanya satu break-point, kami dapat mengatur breakpoint untuk semua ukuran layar yang tersedia. Gambar berikut mengilustrasikan semua ukuran layar, dari ekstra kecil hingga ekstra besar

Ekstra kecil

Kecil

Medium

Besar

Ekstra besar

Kode berikut menghasilkan hasil yang disebutkan di atas

Semua div tidak perlu memiliki breakpoint yang sama atau memiliki breakpoint sama sekali

Penjajaran vertikal

Contoh sebelumnya menyediakan fungsionalitas untuk kasus penggunaan, tetapi terkadang mungkin diperlukan untuk menyelaraskan objek secara vertikal. Ini secara teknis dapat dilakukan dengan div kosong, tetapi ini bukanlah solusi yang sangat elegan. Sebagai gantinya, ada kelas penyelarasan untuk membantu hal ini seperti yang dapat dilihat di sini

Seperti yang bisa kita lihat, Anda dapat menyelaraskan baris secara vertikal di salah satu dari tiga posisi. Kode berikut menghasilkan hasil yang disebutkan di atas

Kami tidak dibatasi untuk hanya menyelaraskan baris, kami dapat dengan mudah menyelaraskan kolom relatif satu sama lain, seperti yang ditunjukkan di sini

Kode berikut menghasilkan hasil yang disebutkan di atas

Penjajaran horizontal

Saat kami menyelaraskan konten secara vertikal di bagian sebelumnya, kami sekarang akan membahas betapa mudahnya menyelaraskan konten secara horizontal. Gambar berikut menunjukkan hasil alinyemen horizontal

Kode berikut menghasilkan hasil yang disebutkan di atas

Offset kolom

Mungkin timbul kebutuhan untuk memposisikan konten dengan sedikit offset. Jika konten tidak terpusat atau di awal atau akhir, hal ini dapat menjadi masalah, tetapi dengan menggunakan penyeimbangan kolom, kami dapat mengatasi masalah ini. Cukup tambahkan kelas offset, dengan ukuran layar yang akan ditargetkan, dan berapa banyak kolom (1-12) konten yang harus diimbangi, seperti yang dapat dilihat pada contoh berikut

Kode berikut menghasilkan hasil yang disebutkan di atas

Kotak selesai

Contoh yang dibahas sejauh ini sudah cukup untuk sebagian besar situs web. Ada lebih banyak teknik untuk memanipulasi grid, yang dapat ditemukan di website Bootstrap

Jika Anda mencoba salah satu contoh, Anda mungkin telah melihat kaskade dari kelas ukuran layar yang lebih kecil ke kelas ukuran layar yang lebih besar. Ini terjadi ketika tidak ada kelas eksplisit yang ditetapkan untuk ukuran layar tertentu

Komponen bootstrap

Ada banyak sekali komponen luar biasa yang disediakan dengan Bootstrap, sehingga menghemat waktu untuk membuatnya dari awal. Ada komponen untuk dropdown, tombol, gambar, dan banyak lagi

Penggunaannya sangat mirip dengan sistem grid, dan elemen HTML yang sama yang kita kenal dan sukai digunakan dengan kelas CSS untuk memodifikasi dan menampilkan konstruksi Bootstrap. Saya tidak akan membahas setiap komponen yang ditawarkan Bootstrap karena itu memerlukan ensiklopedia itu sendiri, dan banyak komponen yang umum digunakan akan dibahas di bab-bab mendatang melalui proyek contoh. Namun saya akan merekomendasikan untuk melihat beberapa komponen di situs web Bootstrap

Jika menurut Anda postingan ini bermanfaat, lihat buku ini, ‘ Desain Web Responsif dengan Contoh‘ untuk membuat situs web responsif yang menarik menggunakan kerangka kerja seperti Bootstrap dan tingkatkan keterampilan Anda sebagai desainer web

Baca Selanjutnya

Bersiaplah untuk Bootstrap v4. 1;

Pengembangan Web dengan React dan Bootstrap

Bootstrap 4 Objek, Komponen, Flexbox, dan Tata Letak

• TAG
• Bootstrap

Membagikan

Facebook

Twitter

Linkedin

Savia Lobo

Seorang fanatik ilmu data. Suka diperbarui dengan kejadian teknologi di seluruh dunia. Suka menyanyi dan membuat lagu. Percaya dalam menempatkan seni dalam cerdas

2 KOMENTAR

1. Mubashirullah

   Saya akan memeriksa ulang col-sm dan yang lebih besar dari ini untuk memiliki batas atas. Saya percaya mereka hanya memiliki batas bawah

• 

  Savia Lobo

  Terima kasih atas saranmu. Kami menyambut umpan balik Anda dan ingin mengetahui lebih jauh pendapat Anda tentang hal ini, yang akan membantu pembaca lainnya. Semoga Anda membaca dengan baik

TINGGALKAN BALASAN

Silakan masukkan komentar Anda

Silakan masukkan nama Anda di sini

Anda telah memasukkan alamat email yang salah

Silakan masukkan alamat email Anda di sini

Simpan nama, email, dan situs web saya di browser ini untuk komentar saya berikutnya

Δ

Harus Dibaca di Web Dev

Mempelajari Perintah Linux Penting untuk Menavigasi Shell Secara Efektif

Jaringan Pakar - 16 Agustus 2021 - 3. 45 pagi

Setelah kita mempelajari cara menggunakan server Ubuntu, cara mengelola pengguna, dan cara mengelola paket perangkat lunak, kita harus meluangkan waktu sejenak

Bagaimana cara kerja sistem grid Bootstrap?

Bagaimana cara menerapkan sistem grid?

Apakah Bootstrap dibangun di atas CSS Grid?

Bagaimana cara kerja Bootstrap secara internal?