Bootstrap 1 : Pengenalan Bootstrap

pada tanggal
Bootstrap adalah sebuah library framework CSS yang dirancang untuk membuat web yang bersifat responsive dengan cepat, mudah dan gratis.Kata responsive berarti bahwa tampilan web bisa berubah sesuai lebar layar. Dan Bootstrap merupakan framework CSS dan Javascript yang populer dikalangan developer web. Pada saat ini hampir seluruh web developer menggunakan bootstrap untuk tampilan web mereka karena penggunaannya yang mudah, praktis, cepat dan gratis.

Kelebihan Bootstrap

  • Teknologi CSS yang sederhana dan mudah digunakan.
  • Dapat mengakses dengan mudah informasi dan fungsi warna, variabel dan variasi penggunaan.
  • Didukung oleh semua browser popular seperti mozilla firefox,google chrome,safari,internet explore dan opera.
  • Fitur responsive.
  • Gratis - bootstrap merupakan framework open source yang dapat digunakan secara gratis

Kekurangan Bootstrap

  • Minim gambar karena menggunakan CSS3.
  • Belum mampu memberikan tampilan yang sesuai di semua browser.
  • Membuat kita menjadi tidak kreatif.

Menggunakan Bootstrap

Langkah pertama yang harus dilakukan untuk menggunakan bootstrap yaitu mendownload bootstrap tersebut agar bisa digunakan secara offline. Kalian bisa langsung mendownload di website resminya https://getbootstrap.com/.



Menerapkan Boostrap Kedalam Web


1. Menggunakan bootstrap secara offline

Menggunakan bootstrap secara offline banyak digunakan oleh web developer karena tidak perlu menggunakan koneksi internet untuk menjalankan dibrowser.

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

Sematkan link diatas diantara tag <head></head> untuk menerapkan bootstrap kedalam web.


2. Menggunakan bootstrap secara online

Jika anda memilih menggunakan bootstrap secara online sematkan code berikut di antara tag <head></head>
<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>

Membuat web pertama dengan bootstrap

index.html
<!DOCTYPE html>
<html>
<head>
    <title> Judul </title>
    <link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
         Hello Word
    </div>
    <div class="container-fluid">
         Hello Bootstarp
    </div>
</body>
</html>

Jalankan index.html di browser kesayangan anda dan pastikan index.html ada didalam folder yang sama dengan bootstrap.min.css. Sekian Bootstrap 1 : Pengenalan Bootstrap semoga bermanfaat.

Komentar

Posting Komentar