pengenalan Botstrap

ulil   October 04, 2017   Comment  

Bootstrap

 

A. Pendahuluan
     1. Pengertian
Bootstrap adalah kerangka kerja front-end open source yang gratis dan terbuka untuk merancang situs web dan aplikasi web . Ini berisi template desain berbasis HTML dan CSS untuk tipografi , form, tombol, navigasi dan komponen antarmuka lainnya, serta ekstensi JavaScript opsional. Tidak seperti banyak kerangka web, ini hanya menyangkut pengembangan front-end saja.
    2. Latar Belakang
        belajar bootstrap

    3. Maksud dan Tujuan
       memahami bootstrap

B. Alat dan Bahan
pc/laptop
koneksi internet

C. Durasi Waktu
-
D. Uraian Kegiatan
Bootstrap adalah kerangka kerja front-end open source yang gratis dan terbuka untuk merancang situs web dan aplikasi web . Ini berisi template desain berbasis HTML dan CSS untuk tipografi , form, tombol, navigasi dan komponen antarmuka lainnya, serta ekstensi JavaScript opsional. Tidak seperti banyak kerangka web, ini hanya menyangkut pengembangan front-end saja.

Origins

Bootstrap, yang awalnya bernama Twitter Blueprint, dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter sebagai kerangka kerja untuk mendorong konsistensi di alat internal. Sebelum Bootstrap, berbagai perpustakaan digunakan untuk pengembangan antarmuka, yang menyebabkan ketidakkonsistenan dan beban pemeliharaan yang tinggi. Menurut pengembang Twitter Mark Otto:

"Sekelompok pengembang kecil dan saya bersama-sama merancang dan membangun alat internal baru dan melihat kesempatan untuk melakukan sesuatu dengan lebih banyak. Melalui proses itu, kami melihat diri kita membangun sesuatu yang jauh lebih penting daripada alat internal lainnya. Beberapa bulan kemudian, kami mengakhiri up dengan versi awal Bootstrap sebagai cara untuk mendokumentasikan dan berbagi pola desain umum dan aset di dalam perusahaan. " ^[4]

Setelah beberapa bulan pengembangan oleh sebuah kelompok kecil, banyak pengembang di Twitter mulai berkontribusi pada proyek tersebut sebagai bagian dari Hack Week, minggu gaya hackathon untuk tim pengembang Twitter. Ini berganti nama dari Twitter Blueprint menjadi Bootstrap, dan dirilis sebagai proyek open source pada 19 Agustus 2011. ^[5] Ini terus dipertahankan oleh Mark Otto, Jacob Thornton, dan sekelompok kecil pengembang inti, serta sebuah komunitas besar kontributor ^[6]
Pada tanggal 31 Januari 2012, Bootstrap 2 dirilis, yang menambahkan sistem tata letak grid dua belas kolom yang responsif , dukungan built-in untuk Glyphicons, beberapa komponen baru, serta perubahan pada banyak komponen yang ada. ^[7]
Pada tanggal 19 Agustus 2013, Bootstrap 3 dirilis, yang mendesain ulang komponen untuk menggunakan desain datar , dan pendekatan pertama mobile . ^[8]
Pada tanggal 29 Oktober 2014, Mark Otto mengumumkan bahwa Bootstrap 4 sedang dikembangkan. ^[9] Versi alpha pertama dari Bootstrap 4 dirilis pada tanggal 19 Agustus 2015. ^[10] Versi beta pertama dirilis pada tanggal 10 Agustus 2017. ^[2]

Fitur

Bootstrap 3 mendukung versi terbaru Google Chrome , Firefox , Internet Explorer , Opera , dan Safari (kecuali di Windows). Ini juga mendukung kembali ke IE8 dan Firefox Extended Support Release (ESR) terbaru. ^[11]
Sejak 2.0, Bootstrap mendukung desain web yang responsif . Ini berarti tata letak halaman web menyesuaikan secara dinamis, dengan mempertimbangkan karakteristik perangkat yang digunakan (desktop, tablet, ponsel).
Dimulai dengan versi 3.0, Bootstrap mengadopsi filosofi desain mobile-pertama , yang menekankan desain responsif secara default.
Versi 4.0 alpha release menambahkan dukungan Sass dan flexbox . ^[10]

Struktur dan fungsi

Contoh halaman web menggunakan kerangka Bootstrap yang diberikan di Mozilla Firefox

Bootstrap bersifat modular dan terdiri dari serangkaian stylesheet Kurang yang menerapkan berbagai komponen toolkit. Lembar kerja ini umumnya disusun menjadi bundel dan disertakan dalam halaman web, namun komponen individual dapat disertakan atau dihapus. Bootstrap menyediakan sejumlah variabel konfigurasi yang mengendalikan hal-hal seperti warna dan padding berbagai komponen.
Sejak Bootstrap 2, dokumentasi Bootstrap menyertakan wizard kustomisasi yang menghasilkan versi Bootstrap yang disesuaikan berdasarkan komponen yang diminta dan berbagai pengaturan.
Pada Bootstrap 4, Sass digunakan sebagai pengganti Less for the stylesheet.
Setiap komponen Bootstrap terdiri dari struktur HTML, deklarasi CSS, dan dalam beberapa kasus yang menyertai kode JavaScript.
Sistem grid dan desain responsif hadir standar dengan tata letak grid lebar 1170 piksel. Sebagai alternatif, pengembang dapat menggunakan layout dengan lebar variabel. Untuk kedua kasus tersebut, toolkit memiliki empat variasi untuk menggunakan berbagai resolusi dan jenis perangkat: ponsel, potret dan lansekap, tablet dan PC dengan resolusi rendah dan tinggi. Setiap variasi menyesuaikan lebar kolom.

Stylesheets

Bootstrap menyediakan seperangkat stylesheet yang memberikan definisi gaya dasar untuk semua komponen kunci HTML. Ini memberikan penampilan yang seragam dan modern untuk memformat teks, tabel dan elemen bentuk.

Komponen yang dapat digunakan kembali

Selain elemen HTML biasa, Bootstrap mengandung elemen antarmuka yang umum digunakan lainnya. Komponen diimplementasikan sebagai kelas CSS, yang harus diterapkan pada elemen HTML tertentu di halaman.

Komponen JavaScript

Bootstrap hadir dengan beberapa komponen JavaScript dalam bentuk plugin jQuery . Mereka menyediakan elemen antarmuka pengguna tambahan seperti kotak dialog, tooltips, dan carousels. Mereka juga memperluas fungsionalitas beberapa elemen antarmuka yang ada, termasuk misalnya fungsi lengkapi otomatis untuk bidang masukan. Di versi 2.0, plugin JavaScript berikut didukung: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel dan Typeahead.

Bootstrap 4

Pada tanggal 29 Oktober 2014, Mark Otto mengumumkan bahwa Bootstrap 4 sedang dikembangkan. ^[9] Pada tanggal 6 September 2016, Mark menangguhkan pekerjaan pada Bootstrap 3 untuk membebaskan waktu bekerja pada Bootstrap 4. Lebih dari 4.000 komit telah dibuat ke basis kode Bootstrap 4 sejauh ini.
Bootstrap 4 hampir bisa ditulis ulang dari Bootstrap 3. Perubahan signifikan meliputi:

• Beralih dari Less to Sass .
• Turunkan dukungan IE8 , IE9 , dan iOS 6 .
• Dukungan flexbox yang ditambahkan dan kemudian menjatuhkan dukungan non- flexbox .
• Beralih dari piksel ke akar ems .
• Peningkatan ukuran font global dari 14px menjadi 16px.
• Turunkan panel, thumbnail, dan komponen yang baik yang mendukung kartu.
• Turunkan font ikon Glyphicons.
• Turunkan komponen pager.
• Menulis ulang hampir semua komponen, plugin dan dokumentasi jQuery .

E.Penutup
Sekian yang dapat saya sampaikan semoga bermanfaat...!!!
F. Referensi
https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)