Getting Started With Bootstrap

Apa itu Bootstrap?

Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development, Atau lebih jelasnya:
Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan.

Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun menggunakan JavaScript.

Apa saja kelebihan Bootstrap?

1. Responsif
Singkat saja maksud dari responsif disini adalah tampilan yang terlihat akan menyesuaikan diri secara otomatis dengan device kita. Contohnya jika kita buka template kita di smartphone maka templatenya akan mengikuti ukuran dari layar smartphone kita

2. Punya Banyak Fitur
Twitter sendiri menyediakan cukup banyak class (dalam CSS) yang bervariasi dan mengutamakan keindahan yang mana akan lebih mempermudah kita mengerjakan suatu web

3. Compatible Dengan Banyak Browser
Class-class yang dibuat dalam bootstrap sudah compatible dengan browser2 favorit agan semua seperti mozila, chrome, opera dsb sehingga membuat bootstrap sangatlah flexible

4. Sudah Support HTML5 dan CSS3 
HTML5 dan CSS3 adalah versi terbaru dan terupdate dari kedua markup language tersebut. Sehingga kita tidak kehilangan fitur2 dari mereka berdua.

Bagaimana cara mendapatkan Bootstrap?

Kamu bisa langsung download di web resmi nya http://getbootstrap.com/

Bagaimana cara installasinya?

Setelah mendownload Bootstrap,  kamu ekstrak kemudian simpan hasil ekstrak tadi ke folder webroot/htdocs kamu.

Template Default 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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- 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, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Silahkan anda copy dan beri nama index.html di folder htdocs/webroot bootstrap tadi

Hasilnya:

0 komentar