Jumat, 10 Maret 2017

Pengenalan dan Penggunaan Bootstrap

   No comments






Assallamuallaikum Wr Wb
         Halo kawan kawan , di kesempatan kali ini saya akan mulai dalam pengenalan dan penggunaan boostrap untuk membuat suatu tampilan website yang responsive dan menarik.

 1.PENGERTIAN 
         Bootstrap adalah framework ataupun tools untuk membuat aplikasi web ataupun website yang bersifat responsive secara cepat, mudah dan gratis. Kata 'responsive' disini berarti bahwa tampilan web (lebar dan susunan isinya) dapat berubah otomatis sesuai denan lebar layar yang menampilkanya.

         Salah satu website besar yang menggunakan framework bootstrap adalah Twitter, Tentu sobat sudah tidak asing lagi dengan Twitter ? interface twitter dibangun dengan menggunakan bootstrap. Mengapa bisa demikian? Karena Bootstrap sendiri dikembangkan oleh developer twitter sehingga Bootstrap juga disebut " Twitter Bootstrap " Dengan bootstrap, kita dapat membuat responsive website dengan cepat dan mudah dapat berjalan sempurna pada browser-brwoser modern sepert Firefox, Google Chrome, Safari, Opera, Dan Internet Exploler.
2.LATAR BELAKANG 
         Bootstrap  banyak di gemari bagi orang  orang yang ingin membuat suatu website secara praktis karena boostrap mudah dalam pembuatanya. Kita tinggal men download dari website resmi boostrap, di getbootstrap.com . Setelah selesai mendownload kita dapat menggunakan bootstrap dengan cara menggunakan file file yang berada dalam file bootstrap yang kawan kawan download tadi yang berisi file CSS, JavaScript, dan file file font. dan kawan tinggal memanggil dengan nama nama class yang sesuai.

3.MAKSUD DAN TUJUAN
        Bootstrap berisi kumpulan class yang siap pakai. misalnya kawan ingin membuat sebuah tombol dengan cepat dan tanpa harus merancang dan mengetikkan syntax css untuk membuat sebuah tombol, maka dengan bootstrap kita dapat membuatnya dengan sangat cepat, yaitu hanya dengan menambahkan class “btn” . Akan saya jelaskan kembali agar lebih jelas tentang kelebihan Bootstrap untuk membangun sebuah website, berikut kelebihanya

  • Penggunaan bootstrap yang menghemat waktu 
  • Tampilan terlihat modern
  • Tidak perlu susah payah mengatur Script, tinggal memanggil class maka sudah jadi script tersebut
  • Mobile Friendly maksudnya tampilan Bootstrap sangat responsive, yaitu tampilan Bootstrap sudah mendukung segala jenis resolusi, baik itu PC, Laptop, Tablet, Smartphone dan lain - lain
  • Sangat ringan karena bootstrap dibuat dengan sangat terstruktur
  • Dan masih banyak lagi kelebihan Bootstrap yang dapat sobat temukan nanti jika sudah menggunakan Bootstrap
4.ALAT & BAHAN 
  • PC / Laptop
  • Text Editor
  • Browser
5.CARA MENGGUNAKAN BOOTSTRAP

         Pertama tama untuk menggunakan bootstrap kawan kawan harus men download file bootstrapnya terlebih dahulu di getbootstrap.com
Setelah kawan selesai mendownload bootstrapnya maka file bootstrapnya akan memiliki struktur di bawah ini :
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
Setelah itu kawan kawan dapat membuat file baru format HTML untuk menguji apakah bootstrap sudah berhasil. Buat file baru satu folder dengan 3 file bootstrap tadi.

Kemudian isikan sintag berikut untuk mencoba bootstrapnya :
<!DOCTYPE html>
<html>
<head>
    <title>Belajar Bootstrap Part 1 : Penggunaan Bootstrap</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<center>
    <h1>Belajar Menggunakan Bootstrap</h1>
    <button class="btn btn-warning">TOMBOL KUNING</button>
    <button class="btn btn-primary">TOMBOL BIRU</button>
</center>
</body>
</html>

Kemudian run file HTML di browser kawan kawan , jika tampil seperti gambar di bawah maka tandanya bootstrap sudah berhasil di gunakan.

     cuman ini saja yang dapat saya simpulkan tentang penggunaan bootstrap di dalam pembuatan web browser.
wassalamualaikum

0 komentar:

Posting Komentar