IlmuWeb.NET

Blog Belajar Web Programing Indonesia

Tutorial Sistem Grid Pada Bootsrap Bagi Pemula

by · Published · Updated

Sistem grid pada Bootsrap digunakan untuk mengatur lebar layout atau tata letak berbagai elemen di web yang ditampilkan pada monitor, sehingga kita dapat dengan mudah mengatur layout atau tata letak sesuai dengan keinginan kita dengan cepat dan mudah.

Pada sistem web sebelumnya banyak menggunakan table (table) untuk mengatur letak, tapi saat ini tidak efektif, oleh karena itu web saat ini menggunakan CSS sehingga bisa dengan mudah mengatur tata letak elemen pada website.

Sebelum anda mengikuti tutorial ini anda diharapkan sudah mengikuti tutorial sebelumnya tentang memahami cara menginstal dan menggunakan bootsrap.

Sistem grid di Bootsrap diadopsi dari konsep table, dimana terdapat tiga kelas, kelas tersebut kita terapkan didalam tag <div>

  1. Kelas .container
  2. Kelas .row
  3. Kelas .col

1. Kelas .container

Untuk kelas .container dugunakan untuk mengikat seluruh elemen konten web, ada dua jenis elemen kelas pada .container yakni kelas ( .container ) untuk ukuran lebar tetap, kelas .container-fluid ukuran lebar mengikuti tampilan browser.

Kita akan coba latihan dengan menggunakan kelas  .container buatlah sebuah file sistemgrid.php ketikan kode berikut:


<!DOCTYPE html>
<html>
<head>
    <title>Belajar Sistem Grid Bootsrap</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	
</head>

<body>
    
    <div class="container" style="background: #005080; color: white">
        <h1>Belajar Bootstrap!</h1>
		<div class="row">
		<p>Selamat datang di tutorial bootstrap http://ilmuweb.net</p>
		</div>
	</div>
    
</body>
</html>

Disini kita lihat dengan menggunakan kelas .container maka tampilan letak tuisan berada di tengah halaman. Selanjutya anda coba ganti dengan .container dengan kelas .container-fluid maka hasilnya seperti berikut :

Ukuran lebar container mengikuti lebar dari browser, apabila anda mengubah ukuran browser maka elemen didalam container akan mengikutinya. Dan didalam sebuah web anda bisa menggunakan beberapa kelas container sesuai kebutuhan.

2. Kelas .row (Baris)

Didalam elemen .row (baris) terdapat kelas .row fungsinya adalah membuat baris, untuk membuat elemen row atau barus kita buat elemen didalam div dalam kelas container :

<div class=”container”>

       <div class=row”>

         … isi konten website

       </div>

</div>

3. Kelas .col (Kolom)

Didalam kelas row terdapat kelas .col (kolom) berfungsi membuat kolom, dan penting untuk diketahui kolom pada bootsrap terbagi atas tiga ukuran yakni :

  1. col-xs- (extra smal) digunakan untuk ukuran kecil seperti perangkat smartphone
  2. col-sm – ( Small ) untuk perangkat dengan ukuran agak besar seperti pada tablet.
  3. col-md- (medium) untuk ukuran perangkat layar seperti pada laptop
  4. col-lg- (Large) untuk ukuran perangkat yang besar serperti Komputer PC.

Pada tutorial ini saya menggunakan jenis kolom medium.

Pada sistem bootsrap ukuran kolom yang harus kita tau ukuran paling panjang adalah 12 dan ukuran yang pendek adalah 1, sehingga dalam membuat ukuran kolom dengan lebar 12 tinggal panggil class col-md-12. Pada dokumentasi bootsrap dijelaskan posisi ukuran colom seperti pada gambar berikut:

Selanjutya kita akan latihan membuat sebuah halaman web dengan menggunakan tiga baris dan satu kolom :

Buat file dengan nama latihangrid.php kemudian ketikan kode dibawah ini:

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Bootstrap</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	
</head>

<body>
	
    <div class="container">
		
        <!-- row 1: Header -->
        <div class="row" style="background: #003080; color: white">
            <div class="col-md-12">
                <h1>Blog Ilmu Website</h1>
                <p>Selamat datang di Blog Ilmuweb.net</p>
            </div>
        </div>
		
        <!-- row 2: Isi Artikel -->
        <div class="row">
            <div class="col-md-12">
                <h2>Tutorial Belajar Sistem Grid Bootstrap</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
		
        <!-- row 3: Footer -->
        <div class="row" style="background: #003080; color: white">
            <div class="col-md-12">
                <p>© 2018 Ilmuweb.NET</p>
            </div>
        </div>
		
    </div>
	
</body>
</html>

Gambar hasil kode di atas adalah sebagai berikut :

Didalam kelas container terdapat 3 elemen row (baris), dimana elemen row 1 adalah header ukuran kolom 12, berisi teks dengan tulisan Blog ilmu website, dan subtitle selamat datang di ilmuweb.net.

Selanjutnya elemen row 2 berisi isi artikel web dengan ukuran kolom 12, dan terdapat judul artikel dan isi dari artikel.

Kemudian pada elemen footer pada row 3 dengan ukuran kolom 12, berisi footer atau bagian bawah dari web dengan © 2018 ilmuweb.net

Terima kasih anda telah membaca sampai selesai tutorial ini, dan  diharapkan anda mengetik dan mempraktekan langsung tutorial diatas sehingga membuat anda semakin lancar koding serta memahami sistem grid pada bootsrap, semoga bermanfaat.

Share and Enjoy !

Tags:

You may also like...

Leave a Reply

Share