Bootstrap Part 16 : Mengenal Grid System Bootstrap

Bootstrap

Malas Ngoding

mengenal grid system bootstrap

Bootstrap Part 16 : Mengenal Grid System Bootstrap

Mengenal Grid System Bootstrap

Grid System pada bootstrap merupakan pengaturan ukuran yang di tampilkan pada monitor. grid system berfungsi untuk membuat pengaturan untuk lebar dari masing-masing komponen web sehingga kita dapat dengan bebas mengatur ke-responsivan halaman website yang kita buat dengan bootstrap. bootstrap memiliki 12 grid. yang nantinya kita akan dapat menggunakan class berikut ini untuk mengatur keresponsive an halaman website dengan mengaturnya menggunakan 12 grid bootstrap. bootstrap memiliki beberapa class grid yang masing-masing nya memiliki kegunaannya masing-masing. Mengenal Grid System Bootstrap

  • col-lg-*
    digunakan untuk mengatur grid pada monitor komputer yang berukuran besar.
  • col-md-*
    digunakan untuk mengatur grid pada layar monitor komputer yang berukuran sedang.
  • col-sm-*
    digunakan untuk mengatur grid pada monitor yang berukuran tablet.
  • col-xs-*
    digunakan untuk mengatur grid untuk ukuran handphone.

Silahkan perhatikan gambar berikut ini untuk memahami grid system pada bootstrap.

dan perhatikan hasil dari grid system bootstrap berikut.

mengenal grid system bootstrap

mengenal grid system bootstrap

See the Pen pgPPjW by Malas Ngoding (@malasngoding) on CodePen.

jadi dapat di simpulkan bootstrap membagi halaman website menjadi 12 grid. dan kita bebar ingin menggunakan berapa grid untuk menentukan lebar sebuah element yang ingin kita buat. ukuran col-md-1 adalah ukuran yang paling kecil seperti yang dapat di lihat pada gambar di atas. penggunaan col-md untuk mengatur ukuran lebar pada ukuran monitor yang sedang, dan col-lg untuk ukuran monitor yang besar, begitu juga untuk col-xs dan col-sm seperti yang sudah di jelaskan pada penjelasan tentang class grid bootstrap di atas. Mengenal Grid System Bootstrap

contoh sederhananya jika misalnya anda memiliki dua buah kotak. dan pada ukuran laptop biasa anda ingin menampilkan kotak tersebut dengan bersampingan. maka anda bisa memberikan col-md-6 pada masing-masing kotak. dan jika di buka melalui smartphone misalnya anda ingin masing-masing kotak tersebut di tampilkan dengan lebar penuh maka anda bisa menambahkan lagi col-xs-12 pada masing-masing element kotak. contohnya

pengertian grid bootstrap

pengertian grid bootstrap

 

cara menggunakan grid system bootstrap

cara menggunakan grid system bootstrap

contoh penggunaan grid system bootstrap lainnya.

contoh grid system bootstrap

contoh grid system bootstrap

 

membuat grid bootstrap

membuat grid bootstrap

Setelah membaca penjelasan dari mengenal grid system bootstrap dan melihat beberapa contoh penggunaan dari grid system bootstrap di harapkan dapat memberikan pemahaman yang jelas tentang penggunaan dan kegunan dari grid bootstrap. sekian tutorial bootstrap part 16 :  Mengenal grid system bootstrap.

Tutorial Bootstrap Dasar Lainnya

Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap
Bootstrap Part 2 : Membuat Table dengan Bootstrap
Bootstrap Part 3 : Tampilan Gambar dengan Bootstrap
Bootstrap Part 4 : Membuat Tombol dengan Bootstrap
Bootstrap Part 5 : Membuat Jumbotron dengan Bootstrap
Bootstrap Part 6 : Membuat Pesan Alert dengan Bootstrap
Bootstrap Part 7 : Cara Membuat Icon dengan Bootstrap
Bootstrap Part 8 : Pagination dan Breadcrumb dengan Bootstrap
Bootstrap Part 9 : Membuat List dengan Bootstrap
Bootstrap Part 10 : Membuat Panel dengan Bootstrap
Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills dengan Bootstrap
Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
Bootstrap Part 13 : Membuat Form dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel dengan Bootstrap
Bootstrap Part 15 : Membuat Modal dengan Bootstrap
Bootstrap Part 16 : Mengenal System Grid Bootstrap

Incoming search terms:

  • www malasngoding com/mengenal-grid-system-bootstrap
  • Pengertian grid system
  • cara menghitung sisten grid di bootsrap
  • cara membuat web responsive dengan bootstrap
  • cara membuat web respinsive dengan bootstrap
  • mengatur lebar bootstrap jumbotron
  • fungsi grid system pada bootstarp
  • cara membuat grid bootstrap
  • belajar grid dasar bootstrap
  • cara menghitung rata-rata dan grid dalam bootstrap



Write a Comment

Your email address will not be published. Required fields are marked *