Salam jagocoding~ sebagai lanjutan dari tutorial saya sebelumnya Membuat Responsive Layout dengan CSS Media Query, kali ini kita masih akan belajar layout responsive juga, tapi dengan bantuan Bootstrap. Peran bootstrap disini bukan untuk menggantikan CSS Media Query, tapi untuk membantu mempermudah, dan sebagai pelengkap layout responsive. Yang penasaran langsung simak aja yok~

Membuat Layout Responsive dengan Container Bootstrap [Part 1]

Salam jagocoding~ sebagai lanjutan dari tutorial saya sebelumnya Membuat Responsive Layout dengan CSS Media Query, kali ini kita masih akan belajar layout responsive juga, tapi dengan bantuan Bootstrap. Peran bootstrap disini bukan untuk menggantikan CSS Media Query, tapi untuk membantu mempermudah, dan sebagai pelengkap layout responsive. Yang penasaran langsung simak aja yok~

Instalasi Bootstrap

Buat yang belum punya, pertama-tama download dulu di http://getbootstrap.com/getting-started/#download ya.. Setelah kita download, setidaknya ada 3 folder yang disediakan Bootstrap untuk kita gunakan. Folder CSS, JS, dan Font. Untuk bisa menggunakan bootstrap, setidaknya paling minimal kita harus include CSS yang sudah disediakan.. File JS lebih bersifat Optional untuk membuat efek-efek lainnya.

Kita buat file HTML dulu..

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Latihan Layout Bootstrap</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/css_kita.css">
</head>
<body>

<!--ISI WEB DISINI-->
</body> </html>

Dalam contoh saya include CSS Bootstrap bentuk minified (bootstrap.min.css), supaya performa website sedikit lebih ringan. Secara tampilan dan cara penggunaannya, bootstrap.css dengan bootstrap.min.css nggak akan memberikan perbedaan apapun.

 

Penggunaan Bootstrap

Untuk bisa menggunakan bootstrap, setidaknya kita harus sedikit punya kemampuan menghafal nama-nama class yang sudah disediakan Bootstrap, Pertama-tama, bootstrap menyediakan class .container sebagai penampung seluruh isi website, yang lebarnya akan otomatis menyesuaikan sesuai dengan ukuran layar.. Disini kita akan coba langsung 2 model layout yang bisa digunakan sebagai perbandingan.

Container Luar

Langsung liat contoh aja yuk~

<div class="container">
	<div class="header">
		<a class="judul">Judul Website</a>
	</div>
	<div class="content">
		Lorem ipsum dolor sit amet ...
	</div>
	<div class="footer">
		&copy; 2015. Designed by Christian Rosandhy
	</div>
</div>

Seenggaknya ngerti dong ya, kenapa disebut Container luar? Karena <div class="container">nya kita letakkan sebagai parent div utamanya. Untuk lihat perbedaannya, kita coba kasi header, content, dan footer kita warna background dan height di file css_kita.css..

.header{background:#555; padding:20px;}
	.header a.judul{font-size:200%; color:#fff;}
.content{background:#ddd; min-height:400px; padding:10px;}
.footer{background:#333; padding:10px; color:#ccc;}

Langsung kita lihat hasilnya deh..

Responsive Container Luar

Ketika layar browser dikecilkan pun, tampilannya masih rapi kan? :D Sekarang kita bandingkan dengan layout Container dalam..

Container Dalam

Hapus semua isi body di tag sebelumnya, kita ganti dengan yg ini..

<div class="header">
	<div class="container">
		<a class="judul">Judul Website</a>
	</div>
</div>
<div class="content">
	<div class="container">
		Lorem ipsum dolor sit amet ...
	</div>
</div>
<div class="footer">
	<div class="container">
		&copy; 2015. Designed by Christian Rosandhy
	</div>
</div>

 Hasilnya jadi seperti ini : 

Container Dalam

Terlihat kah perbedaannya? Container Dalam memungkinkan kita membuat layout background memenuhi layar dengan content yang tetap tertata rapi didalam. Untuk penggunaan container luar dan dalam bisa disesuaikan dengan kebutuhan kita masing-masing..

 

 

Next part, kita akan mulai masuk ke konsep grid Bootstrap.. Jadi terus simak tutorial terbarunya ya~ Terima kasih untuk perhatiannya~ :D 

 

 


About Author

Christian Rosandhy


Comment & Discussions

  • Freddy (Guest)
    admin i would regesign this http://www.freddysidauruk.zz.mu/ using bootstrap and this is my design using bootstrap http://www.examplebootstrap.esy.es/ i think my design is so poor, would you correct it admin so i would have responsive layout, more appreciate that if people correct it what do i wrong ?

    Big Thums for help

  • Christian Rosandhy
    @Freddy : Ok,, saya juga melayani jasa design ulang kok,, utk budget mas Freddy dan detailnya bisa email saya langsung di tianrosandhy@gmail.com.. :D

  • somge arik
    saya sudah coba apa yang di atas kok tidak menghasilkan gambar yang sama???

    • Christian Rosandhy

      emang hasilnya kayak gimana gan?
      coba bandingin sama file Demo saya disamping..

      Kalau bingung atau mau tanya2,, bisa kontak via email aja di tianrosandhy@gmail.com utk fast responnya.. :D


    • Christian Rosandhy

      emang hasilnya kayak gimana gan?
      coba bandingin sama file Demo saya disamping..

      Kalau bingung atau mau tanya2,, bisa kontak via email aja di tianrosandhy@gmail.com utk fast responnya.. :D


  • Helmi Setya
    punya ku kok tabelnya gak keluar semua keluar di kiri....

    • Christian Rosandhy

      coba klik tombol Demo di atas kanan ini gan.. bisa dibandingin langsung source codenya.. kalo diikutin persis, pasti hasilnya sama kok.. :D


  • Helmi Setya
    punya ku kok tabelnya gak keluar semua keluar di kiri....

  • Please LOGIN before if you want to give the comment.