Tuesday, August 29, 2017

Pengenalan dan Cara Menggunakan Bootstrap

Tags

Pada kesempatan kali ini saya akan membahas tentang Apa Itu Bootstrap? Dan bagaimana cara menggunakan Bootstrap. Perlu Anda ketahui bersama sebelum adanya sebuah php framework yang kita kenal dengan sebutan Bootstrap, kebanyakan seorang pengembang website harus berlama-lama membuat sebuah desain yang cocok untuk project mereka. Nah, kini dengan adanya Bootstrap menjadi lebih mudah, lalu apa itu framework bootstrap sebenarnya?

Apa Itu Bootstrap?

Bootstrap adalah salah satu framework CSS yang dapat digunakan oleh setiap pengembang website karena memiliki komponen dasar antarmuka dasar web yang dirancang sedemikian rupa untuk dapat digunakan dengan mudah. Selain itu, bootsrtap juga adalah front-end yang luar biasa dan sangat memperhatikan setiap detail code agar dapat digunakan dalam berbagai bentuk layar monitor.
Apa Itu Bootstrap?


Jadi pengembang web dapat membangun desain web secara responsive. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis.

Cara Menggunakan Bootstrap

Bootstrap bersifat OpenSource atau siapa pun boleh mendownload, menggunaannya dan mengembangkan. Untuk mendapatkan bootstrap secara penuh dapat anda download melalui website resminya.
http://getbootstrap.com/getting-started/#download

Agar bootstrap dapat diterapkan kedalam website anda berikut contoh dasar menggunakan bootstrap,
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <!-- Link CSS Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, AndroSoftware!</h1>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Kelebihan Bootstrap

Apabila dilihat dari kode sederhana diatas dapat kita ketahui sebenarnya bootstrap memiliki banyak kelebihan dibanding dengan framework lainnya
  • Dapat menghemat waktu pengembang setiap membuat web,
  • Dari segi tampilan terlihat modern dan menarik,
  • Mobile Friendly yang artinya sudah responsive,
  • Ringan dalam artian telah dibuat dengan sangat tersetruktur,
Salah satu website besar yang telah menggunakan framework Bootstrap adalah Twitter, tentu bagi anda familiar dengan twitter, sebab BootStrap sendiri dikembangkan dan dibuat oleh seorang designer dan pengembang dari twitter. Bootstrap diciptakan di Twitter pada pertengahan 2010, sebelum menjadi kerangka kerja open-source, Bootstrap dikenal sebagai Twitter Blueprint.

Demikian tentang Apa Itu Bootstrap? semoga berguna dan bermanfaat. Dengan begitu tampilan website anda akan terlihat makin profesional dan keren dimata pengunjung.

Silahkan berkomentar dengan baik, asal tidak melanggar peraturan dibawah ini.
1. NO SPAM
2. NO SARA
3. NO LINK AKTIVE

Terimakasih
EmoticonEmoticon