MEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP

Ukuran: px

Mulai penontonan dengan halaman:

Download "MEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP"

Djaja Muljana
6 tahun lalu
Tontonan:

MEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP NURLITA nurlita.icha@gmail.com Abstrak Kali ini kita akan membahas cara membuat layout dengan container bootstrap.

1 MEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP NURLITA Abstrak Kali ini kita akan membahas cara membuat layout dengan container bootstrap. Bootstrap adalah suatu framework front-end yang digunakan untuk mendesain atau membuat template lebih mudah dan hanya butuh tambahan sedikit CSS atau pun Javascript untuk lebih mempercantik suatu template website Kata Kunci:Framework, Bootstrap, Layout Pendahuluan Dalam membuat template seorang user atau customer ingin template nya secepatnya selesai dengan itu muncullah framework bootsrap yang memudahkan seorang programmer membuat template atau tampilan suatu website. Bootstrap dibuat pertama kali nya oleh seorang developer front end yang bernama Mark Otto. kali ini kita akan membahas cara membuat layout dengan container bootstrap.

2 Pembahasan 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. 1. Instalasi Bootstrap Buat yang belum punya, pertama - tama download dulu di 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 terlebih dahulu. <!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> <br><br> </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.

3 2. 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 : <div class="container"> <div class="header"> <a class="judul">judul Website</a> <div class="content"> Lorem ipsum dolor sit amet... <div class="footer"> 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;}

Hasilnya : Ketika layar browser dikecilkan pun, tampilannya masih rapi. Sekarang kita bandingkan dengan layout Container dalam. Penutup Dibutuhkan kepercayaan tinggi untuk dapat menulis artikel ini.

4 Hasilnya : Ketika layar browser dikecilkan pun, tampilannya masih rapi. Sekarang kita bandingkan dengan layout Container dalam. Penutup Dibutuhkan kepercayaan tinggi untuk dapat menulis artikel ini. Karena sadar penulis masih jauh dikatakan mampu untuk menulis artikel dan berbagi ilmu. Terimakasih untuk kesempatan ini saya ucapkan sehingga saya mau untuk mencoba, mohon maaf jika masih banyak kekurangan dalam penulisan, bahasa yang tidak terstuktur, serta materi yang mungkin tidak 100% persen benar. Semoga apa yang saya tulis dapat bermanfaat untuk kita semua dan semoga ditulisan selanjutnya saya dapat memberikan yang lebih baik dari sebelumnya.

5 Referensi ootstrap_part_1 sama-tinggi Biografi Nurlita Saya berkerja diperusahaan yang berada di Jakarta Pusat dan saya sedang kuliah disalah satu kampus yang ada di kota tangerang. Apabila ada yang ditanyakan bisa hubungi saya di

dokumen-dokumen yang mirip

Responsive Layout dengan Bootstrap [Part 2]

Responsive Layout dengan Bootstrap [Part 2] Oleh: Christian Rosandhy Salam jaco,, sebagai lanjutan dari tutorial Membuat Layout Responsive dengan Container Bootstrap, kali ini kita akan mencoba membuat