Membuat Tampilan Web Menggunakan Bootstrap
Kita lanjut lagi yah sobat gakpunyakode hehee, empat postingan saya sebelumnya adalah seperti itu. Yaaah memang banyak cara untuk membuat web, salah satunya adalah tersedianya framework. Framework web mvc seperti laravel, codeigniter, ruby dll. dan bootstrap adalah framework css
Pengertian tentang bootstrap
Bootstrap merupakan komponen penunjang yang penting untuk tampilan antar muka, dengan menggunakan bootstrap pembuatan tampilan akan lebih mudah dan rapi. Bootstrap yang merupakan framework css yang digunakan untuk memodifikasi tampilan html, selain Bootstrap ada Materialize yang fungsinya sama.
Cara menggunakan bootstrap
Komponen bootstrap bisa didapat website resminya, bisa search langsung di search engine milik mbah kita getbootstrap begitulah atau dengan menambah domain .com dibelakangnya hehe.
Pengertian tentang bootstrap
Bootstrap merupakan komponen penunjang yang penting untuk tampilan antar muka, dengan menggunakan bootstrap pembuatan tampilan akan lebih mudah dan rapi. Bootstrap yang merupakan framework css yang digunakan untuk memodifikasi tampilan html, selain Bootstrap ada Materialize yang fungsinya sama.
Cara menggunakan bootstrap
Komponen bootstrap bisa didapat website resminya, bisa search langsung di search engine milik mbah kita getbootstrap begitulah atau dengan menambah domain .com dibelakangnya hehe.
Langsung saja download komponen bootstrapnya setelah selesai download makan akan didapat file berbentuk zip. ekstrak file tersebut yang berisikan file css, js dan lain lain.
untuk menggunakannya tentu Anda harus me-load komponen tersebut dibagian tag <head>...</head> jangan lupa di mana anda menaruh alamat filenya contohnya :
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
untuk js nya
<script src="bower_components/jquery/dist/jquery.min.js"></script>
Mengunakan bootstrap menurut saya pribadi sangat menguntungkan dan sangan memudahkan dalam membuat tampilan website, tag yang saya sukai adalah class "col" , fungsi col ini adalah untuk mengatur lebar tiap tag <div>...</div>
tag col dituliskan seperti
<div class="col-lg-12>
<a href="#"> digunakan untuk membuat ukuran lebar maksimal lg large </a>
</div>
<div class="col-md-12>
<a href="#"> digunakan untuk membuat ukuran lebar md middle </a>
</div>
<div class="col-sm-12>
<a href="#"> digunakan untuk membuat ukuran lebar maksimal sm small </a>
</div>
<div class="col-xs-12>
<a href="#"> digunakan untuk membuat ukuran lebar maksimal xs extra small </a>
</div>
Menggunakan col sangat membantu gaess, lebar tag div dapat diatur dengan mengubah ukuran angka 12 sesuai dengan kebutuhan bisa ditulis col-lg-2, col-lg-4, col-lg-6, col-lg-8, col-lg-10 dan col-lg-12. selain tag col ada juga tag class container, tag container ini adalah bagian bootstrap juga dan berfungsi sebagai wadah content.
Sampai sini apakah masih bingung? kalo masih bingung bisa ditanyakan tulis saja dikomentar dengan senang hati saya akan membantu dengan ilmu yang sedikit ini.
Tambahan !!!
Karena sekarang di Indonesia hampir semua masyarakat memiliki gadget smartphone, hampir kemungkinan besar dunia internet dikonsumsi menggunakan gadget maka dibutuhkan website yang responsive saat dibuka di gadget. teknik dasar menggunakan bootstrap untuk membuat website responsive adalah dengan menggunakan tag
<div class="col-xs-12">...</div>
Ukuran 12 ini tentunya membarikan efek tampilan pada tampilan website ketika dibuka di gadget, ukuran 12 akan memberikan efek tampilan lebar penuh pada browser gadget. Jika lebar yang dibutuhkan tidak penuh bisalah ya sobat atur ukuran 12 nya jadi 10 atau 2. Kalau tulis 13 gimana ? kayaknya gak bisa deh, coba aja ... karena ukuran yang diberikan bootstrap sepengetahuan saya sampai 12 saja untuk ukuran tag class col.
Lahhh kalo user buka pake tablet bagaimana ?
Kalau user buka pakai tablet bisalah ya gunakan ukuran col-md atau col-sm, penulisannya sama seperti menulis kode untuk tag col-xs yang penting kuncinya sobat harus kreatif.
Mungkin cukup disini dulu untuk membuat tampilan web menggunakan bootstrap, untuk lebih lanjutnya tunggu postingan saya selanjutnya yah. Terima kasih sobat
untuk menggunakannya tentu Anda harus me-load komponen tersebut dibagian tag <head>...</head> jangan lupa di mana anda menaruh alamat filenya contohnya :
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
untuk js nya
<script src="bower_components/jquery/dist/jquery.min.js"></script>
Mengunakan bootstrap menurut saya pribadi sangat menguntungkan dan sangan memudahkan dalam membuat tampilan website, tag yang saya sukai adalah class "col" , fungsi col ini adalah untuk mengatur lebar tiap tag <div>...</div>
tag col dituliskan seperti
<div class="col-lg-12>
<a href="#"> digunakan untuk membuat ukuran lebar maksimal lg large </a>
</div>
<div class="col-md-12>
<a href="#"> digunakan untuk membuat ukuran lebar md middle </a>
</div>
<div class="col-sm-12>
<a href="#"> digunakan untuk membuat ukuran lebar maksimal sm small </a>
</div>
<div class="col-xs-12>
<a href="#"> digunakan untuk membuat ukuran lebar maksimal xs extra small </a>
</div>
Menggunakan col sangat membantu gaess, lebar tag div dapat diatur dengan mengubah ukuran angka 12 sesuai dengan kebutuhan bisa ditulis col-lg-2, col-lg-4, col-lg-6, col-lg-8, col-lg-10 dan col-lg-12. selain tag col ada juga tag class container, tag container ini adalah bagian bootstrap juga dan berfungsi sebagai wadah content.
Sampai sini apakah masih bingung? kalo masih bingung bisa ditanyakan tulis saja dikomentar dengan senang hati saya akan membantu dengan ilmu yang sedikit ini.
Tambahan !!!
Karena sekarang di Indonesia hampir semua masyarakat memiliki gadget smartphone, hampir kemungkinan besar dunia internet dikonsumsi menggunakan gadget maka dibutuhkan website yang responsive saat dibuka di gadget. teknik dasar menggunakan bootstrap untuk membuat website responsive adalah dengan menggunakan tag
<div class="col-xs-12">...</div>
Ukuran 12 ini tentunya membarikan efek tampilan pada tampilan website ketika dibuka di gadget, ukuran 12 akan memberikan efek tampilan lebar penuh pada browser gadget. Jika lebar yang dibutuhkan tidak penuh bisalah ya sobat atur ukuran 12 nya jadi 10 atau 2. Kalau tulis 13 gimana ? kayaknya gak bisa deh, coba aja ... karena ukuran yang diberikan bootstrap sepengetahuan saya sampai 12 saja untuk ukuran tag class col.
Lahhh kalo user buka pake tablet bagaimana ?
Kalau user buka pakai tablet bisalah ya gunakan ukuran col-md atau col-sm, penulisannya sama seperti menulis kode untuk tag col-xs yang penting kuncinya sobat harus kreatif.
Mungkin cukup disini dulu untuk membuat tampilan web menggunakan bootstrap, untuk lebih lanjutnya tunggu postingan saya selanjutnya yah. Terima kasih sobat
0 Response to "Membuat Tampilan Web Menggunakan Bootstrap"
Post a Comment