Skip to main content

Desain Website Cantik Namun Mudah dengan Bootstrap


Bootstrap adalah framework html-css yang digunakan untuk membuat tampilan fornt-end sebuah website. Dengan Bootstrap kita dapat membuat desain website yang responsive dengan mudah.


Cara kerja Bootsrap adalah menyediakan library CSS yang dapat kita panggil ketika membuat halaman html. Sehingga kita tidak perlu membuat atau mengatur CSS secara manual lagi.

Cara Menggunakan Bootstrap

Karena bootstrap adalah library CSS, untuk menggunakannya kita tinggal mengimportnya saja kedalam tag head html.

Terlebih dahulu silahkan download bootstrap dari http://getbootstrap.com/ .
Ekstrak file dan letakkan di dalam folder poject web kalian.
Untuk mengimport tambahkan tag link rel seperti dibawah ini

<link rel="stylesheet" href="css/bootstrap.css">

Apabila tidak ingin mendownload bootstrap kita bisa menggunakan alternatif bootstrap CDN atau online
Tag importnya adalah:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Contoh Penggunaan Bootstrap

Kali ini adalah contoh penggunaan bootstrap untuk membuat komponen bernama panel


Tagnya adalah sebagai berikut:
<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Untuk mengganti warna panel ubah pada bagian "panel-primary", menjadi panel-success , panel-info, panel-warning, atau panel-danger.

Beberapa html Example Page bisa kalian lihat di http://getbootstrap.com/getting-started/#examples

Penggunaan css selengkapnya silahkan lihat Dokumentasi

Semoga perkenalan kita dengan bootstrap kali ini bermanfaat :)

Comments

Popular posts from this blog

Cara Mendapatkan Game Steam Berbayar tapi Geratis dengan Steam Keys

Halo gaes, Kali ini adalah artikel yang sangat menyenangkan untuk para gamers. Yak, karena kita akan mendapatkan Game Berbayar dari Steam secara geratis aman dan legal, caranya yaitu dengan mendapatkan steam keys secara geratis. Kalian sudah tau Steam Keys? Steam keys adalah kode yang digunakan untuk mengaktifasi pembelian sebuah product/game dalam Steam. Ketika kita meng-activate product dengan kode Steam Keys otomatis kita telah melakukan pembelian game dalam Steam. Tentu saja hal ini legal. Kok bisa? siapa gerangan yang sangat dermawan, kok mau2nya membagikan steam keys secara cuma-cuma? Dia adalah http://dlh.net DLH.net adalah situs yang akan memberikan Steam Keys game berbayar namun secara free / geratis. Yuk langsung saja saya jelaskan bagaimana cara memperoleh game secara geratis di dlh.net 1. Pertama, silahkan mendaftar di dlh.net. Jika kalian tidak mau ribet kalian bisa langsung login menggunakan facebook. 2. Jika sudah login, arahkan kursor ke nama kalian d...

Membuat Arduino Uno Sendiri

Arduino adalah jenis microcontroller yang digunakan untuk membuat prototype project elektronik dan robotik. Arduino Board telah di desain sedemikian rupa untuk memudahkan pemrograman microcontroller. Trend microcontroller bernama Arduino yang berbasis Open Source / Open Hardware (Artinya semua orang bebas membeli, menggunakan dan mengembangkan Arduino untuk prototyping keperluan belajar, proyek pribadi maupun corporate company) saat ini rupanya telah menyerang saya juga. Betapa penasarannya saya ingin belajar pemrograman untuk hardware. Karena microcontroller ini berkaitan dengan elektronika alhasil saya harus mempelajari elektronika mulai dasar :D Cerita berawal dari harapan saya ingin membeli Arduino namun digagalkan oleh teman saya, dia merekomendasikan saya untuk membuat arduino sendiri.. Lho? Dasar elektro saja saya gak bisa kok disuruh bikin arduino :D Teman saya yang cukup hobi dengan elektronika itu, ternyata dia cukup mengerti tentang microcontroller walaupun belum p...

Menyembunyikan file di android

Fitur gallery di android memang sengaja dibuat untuk memudahkan user karena menampilkan semua gambar atau video di sdcard maupun phone, tetapi bagaimana jika kita memiliki file, gambar, video yang sifatnya pribadi?? Tentu kita ga mau dilihat orang kan hahaha :D untuk itu aplikasi ini diciptakan.