bootstrap

Selamat Sore Akang-Akang

pada kesempatan kali ini ilmukita akan sedikit mengulas tentang Pengertian dan cara menggunakan bootstrap untuk pemula. Bootstrap adalah sebuah framework CSS yang menyediakan banyak komponen komponen antarmuka pada web yang telah dirancang sedemikian rupa untuk dipakai bersama. Bootstrap pertama kali di kembangkan di Twitter oleh Mark Otto dan Jacob Thornton pada pertangahan 2010 di Twitter oleh Mark Otto dan Jacob Thornton.

Bootstrap sangat populer di kalangan web depelover, bahkan hampir semua web depelover menggunakan framework yang dikembangkan oleh perusahaan twitter tersebut. Dengan menggunakan bootstrap kita bisa membuat sebuah website dengan cepat dan responsive.

Memasang Twitter Bootstrap

Proses instalasi atau pemasangan Bootstrap sangatlah mudah, Kita hanya perlu meng-include file Bootstrap ke dalam file HTML  sama seperti memanggil file css dan Javascript.

[html]
<!DOCTYPE html>
<html>
<head>
<title>Belajar Bootstrap dengan ILMUKITA</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>
[/html]

Catatan : pastikan komputer anda terhubung dengan koneksi internet

kita juga memanggil Jquery, karena bootstrap memerlukan framework Jquery untuk bagian javascript.

Kita juga bisa menggunakan bootstrap secara offline, namun kita harus mengunduh file bootstrap dan Jquery-nya terlebih dahulu.

download bootstrap disini

download Jquery disini

jika sudah di download, buat file di htdoct kemudian ekstrak bootstrap di dalam folder yang telah dibuat

bootstrap

ekstrak juga Jquery yang sudah di download tadi ke dalam folder js

jika sudah, maka masukan script-nya

[html]
<!DOCTYPE html>
<html>
<head>
<title>Belajar Bootstrap dengan ILMUKITA</title>

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

</head>
<body>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
[/html]

nah, sekarang kita masukan script di bawah di <body>

[html]

<button class="btn btn-default">ILMUKITA</button>
<button class="btn btn-warning">ILMUKITA</button>
<button class="btn btn-success">ILMUKITA</button>
<button class="btn btn-info">ILMUKITA</button>

[/html]

dan jika dijalankan di browser akan terlihat hasilnya

bootstraphas
hasil bootstrap

mungkin hanya sedikit yang dapat kita bahas tentang   Pengertian dan cara menggunakan bootstrap untuk pemula, untuk tutorial selanjutnya akan kita bahas dibahas di belajar bootstrap

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here