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 Menginstall Arduino Uno di Linux Ubuntu

By
Sebelumnya saya pernah bercerita tentang membuat arduino uno sendiri atau menggunakan minimum system untuk low budget :D. Alhamdulillah akhirnya sekarang saya memiliki arduino uno sendiri, setelah di hadiahi oleh kang Sucipto yang baik :D. Oke kali saya akan menceritakan pengalaman saya menggunakan arduino di linux Ubuntu. Keunggulan arduino Uno adalah praktis, dan sudah ada regulator tegangan, serta dapat di monitoring dengan serial monitor. sedangkan Minimum system kita masih sedikit ribet dengan perkabelan, tidak ada regulator tegangan, tidak bisa diserial monitor, kecuali harus memprogram menggunakan alat tambahan USBasp atau USB to UART(USB to TTL). Walaupun begitu, pengalaman menggunakan minimum system tentu sangat penting bagi kita, akhirnya kita lebih paham dari dasar microcontroller dan cara kerja dari arduino sendiri. Serta nanti nya pada fase produksi. Biaya produksi akan lebih tertekan menggunakan minimum system daripada harus membeli arduino uno untuk set...
Post a Comment
Selengkapnya..

Cara Membuat Launcher Aplikasi di Ubuntu

By
Jika kita menginstall suatu aplikasi di Ubuntu menggunakan software center atau via ppa, secara otomatis Launcher aplikasi tersebut akan ditambahkan pada menu utama Applications . Namun kelemahan dari Software Center atau PPA terkadang aplikasi yang kita install adalah bukan versi terbaru ( biasanya versi lama tergantung repository), lalu akhirnya demi menginstall aplikasi terupdate terbaru kita harus mendownload paket aplikasi terbaru secara manual (biasanya compressed file berformat .zip, .tar.gz, .tar.bz2, .tar, dll. ) yang harus kita extract terlebih dahulu. Dan setiap kali menjalankan suatu aplikasi kita harus secara manual mengakses folder file kemudian menjalankan file programnya. (Huft, sangat melelahkan bukan? -_-' ) Lalu bagaimanakah cara membuat shortcut aplikasi agar muncul di menu utama? Layaknya aplikasi dari Software Center. Sebenarnya cukup simple namun sangat bermanfaat :D. Caranya buatlah file berekstensi .desktop di dalam folder /usr/share/applica...
Post a Comment
Selengkapnya..

Mengatasi Eclipse Eror di Elementary OS

By
Pada artikel yang singkat kali ini, saya akan berbagi masalah yang saya temui ketika saya sedang menginstal Eclipse (software IDE untuk koding pemrograman Java) di sistem linux Elementary OS. Jadi bermula ketika setiap saat saya menjalankan eclipse, sistem Elementary OS menjadi sangat lambat dan freeze, sampai akhirnya sistem saya shutdown secara paksa dengan tombol power. Saya penasaran kenapa dengan eclipse yang saya install ini, padahal rencananya saya ingin melanjutkan belajar java. Sempat beberapa hari saya biarkan, tidak menggunakan eclipse lagi karena sebelumya saya telah bermigrasi ke Android Studio untuk pemrograman Android. Hingga terbesit untuk mencari solusinya di mbah Google, akhirnya ketemu juga di forum coding, forum yang penuh pertanyaan dimana otak sudah stack .yah http://stackoverflow.com :D Pertanyaan yang diajukan tepat sekali dengan masalah yang saya alami, ada jawaban dari salahsatu user yang ternyata dapat mengatasi problem ini. Namun sayangnya jawaban t...
Post a Comment
Selengkapnya..