Skip to main content

Desain Website Cantik Namun Mudah dengan Bootstrap

By

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 :)

Labels:

Comments

Post a Comment

Popular posts from this blog

Cara Mendapatkan Game Steam Berbayar tapi Geratis dengan Steam Keys

By
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...
37 comments
Selengkapnya..

Membuat Server Minecraft Multiplayer Sendiri

By
Pada artikel sebelumya kita telah membahas keasyikan bermain minecraft . Nah, Kali ini kita akan belajar bagaimana membuat server Minecraft kita sendiri, nantinya bisa dimainkan via LAN maupun Internet. Spesifikasi Komputer Yang di Butuhkan Untuk dapat menjalankan server Minecraft, spesifikasi minimal yaitu processor dual core 2ghz dan RAM  2ghz, serta koneksi internet yang cepat. Karena nantinya server kita akan menahan beban beberapa player yang sedang bermain. Langkah 1: Download Minecraft Server Download program server terbaru di https://minecraft.net/download . Jika anda menjalankan sistem operasi windows silahkan download file .exe, untuk Linux dan OSX silahkan download file berekstensi .jar. Windows: Taruh file server minecraft .exe di folder lalu jalankan, setelah itu secara otomatis akan muncul file-file baru di folder (termasuk file world atau dunia di minecraft). Rubahlah file eula.txt dan rubah isinya menjadi eula=true Jalankan lagi server minecraft.ex...
2 comments
Selengkapnya..

Membuat Arduino Uno Sendiri

By
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...
9 comments
Selengkapnya..