Apa itu Bootstrap ?

A. Judul

Belajar Bootstrap

B.  Pendahuluan

1)      Pengertian

Bootstrap adalah sebuah library framework CSS yang dibuat khusus untuk bagian pengembangan front-end website. Bootstrap merupakan salah satu framework HTML. CSS dan Javascript yang paling popular di kalangan web developer.

2)      Latar Belakang dan Batasan Permasalahan

Pada saat ini hamper semua web developer telah menggunakan bootstrap untuk membuat tampilan front-end menjadi lebih mudah dan sangat cepat. Karena anda hanya perlu menambahkan class-class tertentu untuk misalnya membuat tombol, grid, navigasi dan lainnya.

3)      Maksud dan Tujuan

Tentu anda bertanya-tanya kenapa banyak yang menggunakan bootstrap dalam pengembangan website. Berikut ini akan dijelaskan beberapa kegunaan yang telah menjadi kelebihan pada bootstrap. Adapun beberapa kelebihan bootstrap adalah sebagai berikut.

·         Penggunaan bootstrap sangat menghemat waktu.

·         Tampilan bootstrap yang sudah cukup terlihat modern.

·         Mobile Friendly yang maksudnya tampilan bootstrap sudah sangat responsive, yaitu tampilan bootstrap sudah mendukung segala jenis resolusi, baik itu pc, laptop, tablet, dan smartphone.

·         Sangat ringan karena bootstrap dibuat dengan sangat terstruktur.

·         Dan masih banyak lagi kelebihan dan kegunaan dari bootstrap yang akan anda temukan sendiri setelah mencoba membangun sebuah aplikasi berbasis web dengan menggunakan bantuan framework css bootstrap.

4)      Hasil yang didapatkan

Dapat menggunakan dan memanfaatkan bootstrap dengan benar dan baik.

C.  Alat dan Bahan

1)      File Items

2)      Laptop

3)      Text Editor

4)      Browser

D. Uraian

Apa itu bootstrap ?

Bootstrap adalah kerangka front-end gratis untuk mengembangan web lebih cepat dan mudah.

Bootstrap mencakup template desain berbasis HTML dan CSS untuk tipografi, form, tombol, table, navigasi, modals, carousels gambar dan banyak lainnya, serta plugin JavaScript opsional.

Bootstrap juga memberi anda kemampuan untuk membuat desain responsive dengan mudah.

Desain Web yang Responsif adalah tentang membuat situs web yang secara otomatis menyesuaikan diri agar terlihat bagus di semua perangkat, mulai dari ponsel kecil sampai desktop besar.

Sejarah bootstrap

Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter, dan dirilis sebagai produk open source pada bulan Agustus 2011 di GitHub.

Mengapa menggunakan bootstrap ?

Keuntungan Bootstrap :

·         Mudah digunakan : Siapa saja yang hanya memiliki pengetahuan dasar tentang HTML dan CSS bias mulai menggunakan Bootstrap.

·         Fitur responsive : CSS respon Bootstrap menyesuaikan ke ponsel, tablet, dan desktop.

·         Pendekatan Mobile-first : Pada Bootstrap 3, gaya mobile-first adalah bagian dari kerangka inti.

·         Kompabilitas browser : Bootstrap kompatibel dengan semua browser modern (Chrome, Firefox, Internet, Explorer, Safari, dan Opera)

Cara Menggunakan Bootstrap

Untuk cara menggunaan bootstrap yang pertama kali yang harus anda lakukan adalah melakukan instalasi bootstrap.

Ada du acara untuk mulai menggunakan Bootstrao di situs web anda sendiri. Anda bisa :

·         Mendownload langsung bootstrap pada website resminya di http://getbootstrap.com/getting-started/ (http://getbootstrap.com/getting-started/).

·         Sertakan Bootstrap dari CDN. Jika tidak ingin mendownload dan meng-host Bootstrap sendiri, Anda bias memasukkannya dari CDN (Content Delivery Network).

MaxCDN menyediakan dukungan CDN untuk CSS dan JavaScript Bootstrap. Anda juga harus menyertakan jQuery:

<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

jQuery , bootstrap menggunakan jQuery untuk plugin JavaScript (seperti modals, tooltips, dll.) namun, jika Anda hanya menggunakan bagian CSS dari Bootstrap, Anda tidak memerlukan jQuery.

E.  Hasil yang didapatkan

Memahami cara kerja dan dapat menjalankan bootstrap.

Membuat Halaman Web Pertama Dengan Bootstrap

1.       Tambahkan doctype HTML5

Bootstrap menggunakan elemen HTML dan property CSS yang memerlukan DOCTYPE HTML5.

Selalu sertakan DOCTYPE HTML5 di awal halaman, bersama dengan atribut lang dan set karakter yang benar :

<!DOCTYPE html> <html lang="en">   <head>     <meta charset="utf-8">    </head> </html>

2.       Bootstrap 3 adalah ponsel pertama

Bootstrap 3 dirancang untuk responsif terhadap perangkat mobile. Gaya mobile-pertama adalah bagian dari kerangka inti.

Untuk memastikan rendering dan sentuhan zoom yang benar, tambahkan tag <meta> berikut di dalam <head> :

<meta name="viewport" content="width=device-width, initial-scale=1">

Bagian width=device-width mengatur lebar halaman untuk mengikuti lebar layar perangkat (yang akan bervariasi tergantung pada perangkat).

intial-scale=1 bagian menetapkan tingkat pembesaran awal saat halaman pertama kali dimuat oleh browser.

3.       Wadah

Bootstrap juga membutuhkan elemen yang mengandung unsur untuk membungkus isi situs.

Ada dua kelas kontainer untuk dipilih:

1.    Kelas .container menyediakan wadah lebar tetap responsive

2.    .container-fluid menyediakan wadah lebar penuh , yang mencakup seluruh lebar area pandang

       Dua Halaman Dasar Bootstrap

Contoh berikut menunjukkan kode untuk halaman Bootstrap dasar (dengan wadah lebar tetap responsif):

Contoh :

<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container">   <h1>My First Bootstrap Page</h1>   <p>This is some text.</p>  </div> </body> </html>

Contoh berikut menunjukkan kode untuk halaman bootstrap dasar (dengan wadah lebar penuh):

<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid">   <h1>My First Bootstrap Page</h1>   <p>This is some text.</p>  </div> </body> </html>

F.  Referensi

1.       https://papawardi.blogspot.co.id/2016/02/cara-mudah-belajar-bootstrap-offline.html

2.       https://www.malasngoding.com/pengertian-dan-cara-menggunakan-bootstrap/

3.       https://www.malasngoding.com/membuat-table-dengan-bootstrap/