Tutorial Desain Web Responsif dengan Bootstrap (Bagian 6) - Sistem Grid dan Typography Bootstrap

Senin, 19 Juni 2017 13:17:20 ,Oleh ,Dilihat : 219 x

Diasuh oleh Dr. Ir. Agus Wibowo, M.Kom, M.Si, M.M.

Sistem grid Bootstrap memungkinkan pembagian hingga 12 kolom di seluruh halaman. Jika kita tidak ingin menggunakan semua 12 kolom yang terpisah satu dengan yang lain, Anda dapat mengelompokkan kolom secara bersama untuk membuat kolom yang lebih lebar :

  • Span 1 : Ukuran lebar 1 bagian kolom
  • Span 4 : Ukuran lebar 4 bagian kolom
  • Span 8 : Ukuran lebar 8 bagian kolom
  • Span 12 : Ukuran lebar 12 bagian kolom

1. Kelas dari Grid

Sistem grid Bootstrap memiliki empat kelas:

  • xs (untuk ponsel)
  • sm (untuk tablet)
  • md (untuk desktop)
  • lg (untuk desktop yang lebih besar)

Kelas di atas dapat dikombinasikan untuk menciptakan layout yang lebih dinamis dan fleksibel. Berikut ini adalah struktur dasar dari sebuah Grid (kotak) Bootstrap:


2. Struktur Dasar Grid Bootstrap

Berikut cara membuat struktur dasar grid bootstrap

  • Langkah Pertama buat baris  <div class = "row">  .
  • Langkah kedua, tambahkan jumlah kolom yang diinginkan (tag dengan kelas .col - * - * yang sesuai). Perhatikan bahwa angka di .col - * - *    harus selalu ditambahkan hingga 12 untuk setiap baris.

Contoh membuat grid dengan 3 kolom, masing masing lengan lebar sebanyak 4 bagian :

Kode grid :

Kode lengkap HTML 5, grid 2 kolom dengan lebar 4 dan 8 bagian:

Kode lengkap HTML 5, grid 3 kolom dengan lebar masing-masing 4 bagian:

3. Teks pada Bootstrap/Typography

  • Ukuran huruf default global Bootstrap adalah 14px, dengan tinggi garis 1,428.
  • Aturan ini diterapkan pada elemen <body> dan semua paragraf <p>.
  • Selain itu, semua elemen <p> memiliki margin bawah yang sama dengan setengah tinggi baris yang dihitung (10px secara default).

4. Ukuran Judul <h1> - <h6>

Bootstrap mendukung berbagai macam ukuran teks untuk penulisan judul mulai dari h1 (terbesar) sampai h6 (terkecil)

Kode lengkap HTML 5, header dengan ukuran h1 sampai h6 :


5. Kelas warna untuk latar belakang

Bootstrap mendukung pemberian warna untuk latar belakang suatu division dalam bentuk kelas. Kelas untuk warna latar belakang adalah:

           .bg-primary
        .bg-success
        .bg-info
        .bg-warning
        .bg-danger

Tampilan dari kelas untuk warna latar :


Kode lengkap HTML 5, header dengan ukuran h1 sampai h6 :


6. Tag <pre>

Tag <pre> di gunakan untuk menampilkan elemen yang sifatnya blok yang memiliki banyak baris, jadi jika kita menggunakan Tag <pre> ini untuk menampilkan Tag HTML di dalam dokumen HTML, maka akan terdapat background-color dengan warna abu-abu muda. Contoh tampilan teks yang menggunakan  Tag <pre>

Kode lengkap HTML 5 sampel teks menggunakan tag <pre>






TOP