Sabtu, 05 Juli 2014

Bootstrap (front-end framework)

Bootstrap adalah gratis kumpulan alat untuk membuat website dan aplikasi web . Ini berisi HTML dan CSS berbasis desain template untuk tipografi , bentuk, tombol, navigasi dan komponen antarmuka lainnya, serta opsional JavaScript ekstensi. Pada bulan Juni 2014 adalah proyek No.1 di GitHub dengan 69.000 + 25.000 + bintang dan garpu,  dengan basis pengguna termasuk MSNBC dan NASA .

Asal

Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter sebagai kerangka untuk mendorong konsistensi di alat internal. Sebelum Bootstrap, berbagai perpustakaan yang digunakan untuk pengembangan antarmuka, yang menyebabkan inkonsistensi dan beban pemeliharaan tinggi. Menurut Twitter pengembang Mark Otto:
"Sekelompok super kecil dari pengembang dan aku bersama-sama untuk merancang dan membangun sebuah perangkat internal baru dan melihat kesempatan untuk melakukan sesuatu yang lebih. Melalui proses itu, kita melihat diri kita membangun sesuatu yang jauh lebih besar daripada perangkat internal lain. Beberapa bulan kemudian, kami akhirnya dengan versi awal Bootstrap sebagai cara untuk mendokumentasikan dan berbagi pola desain umum dan aset dalam perusahaan. "
Penyebaran pertama di bawah kondisi nyata yang terjadi selama Twitter pertama Hackweek.  Mark Otto menunjukkan beberapa rekan bagaimana untuk mempercepat pembangunan proyek mereka dengan bantuan toolkit. Akibatnya, puluhan tim telah pindah ke kerangka.
Pada bulan Agustus 2011, Twitter merilis Bootstrap sebagai open source. Pada bulan Februari 2012, itu adalah proyek pengembangan GitHub paling membintangi, posisi masih memegang pada bulan Juni 2014.

Fitur

Bootstrap kompatibel dengan versi terbaru dari semua browser utama. Ini anggun mendegradasi bila digunakan pada browser lama seperti Internet Explorer 8.
Sejak versi 2.0 juga mendukung desain web responsif . Ini berarti tata letak halaman web secara dinamis menyesuaikan, dengan mempertimbangkan karakteristik dari perangkat yang digunakan (desktop, tablet, ponsel).
Dimulai dengan versi 3.0, Bootstrap mengadopsi mobile pertama filosofi desain, menekankan desain responsif secara default.
Bootstrap adalah open source dan tersedia di GitHub. Pengembang didorong untuk berpartisipasi dalam proyek dan membuat kontribusi mereka sendiri untuk platform.
Baru-baru ini, anggota masyarakat telah diterjemahkan dokumentasi Bootstrap ke dalam berbagai bahasa, termasuk Cina , Spanyol dan Rusia .

Struktur dan fungsi

Bootstrap adalah modular dan pada dasarnya terdiri dari serangkaian stylesheet KURANG yang menerapkan berbagai komponen toolkit. Sebuah stylesheet disebut bootstrap.less mencakup komponen-komponen stylesheet. Pengembang dapat menyesuaikan file Bootstrap sendiri, memilih komponen yang ingin mereka gunakan dalam proyek mereka.
Penyesuaian yang mungkin sampai batas tertentu melalui stylesheet konfigurasi pusat. Perubahan yang lebih mendalam adalah mungkin dengan deklarasi KURANG.
Penggunaan bahasa stylesheet KURANG memungkinkan penggunaan variabel, fungsi dan operator, penyeleksi bersarang, serta disebut mixin .
Sejak versi 2.0, konfigurasi Bootstrap juga memiliki khusus "Customize" pilihan dalam dokumentasi. Selain itu, pengembang memilih pada formulir komponen yang diinginkan dan menyesuaikan, jika perlu, nilai-nilai berbagai pilihan untuk kebutuhan mereka. Paket kemudian dihasilkan sudah termasuk pre-built style sheet CSS.
Sistem Grid dan desain responsif datang standar dengan 1170 pixel lebar, layout grid. Atau, pengembang dapat menggunakan tata letak variabel-lebar. Untuk kedua kasus, toolkit memiliki empat variasi untuk menggunakan resolusi yang berbeda dan jenis perangkat: ponsel, portrait dan landscape, tablet dan PC dengan resolusi rendah dan tinggi. Setiap variasi menyesuaikan lebar kolom.

CSS stylesheet

Bootstrap menyediakan satu set stylesheet yang memberikan definisi gaya dasar untuk semua komponen HTML kunci. Ini menyediakan seragam, penampilan modern untuk teks format, tabel dan elemen form. 

Komponen dapat digunakan kembali

Selain elemen HTML biasa, Bootstrap mengandung elemen antarmuka yang umum digunakan. Ini termasuk tombol dengan fitur-fitur canggih (misalnya pengelompokan tombol atau tombol dengan opsi drop-down, membuat dan daftar navigasi, tab horizontal dan vertikal, navigasi, navigasi breadcrumb, pagination, dll), label, kemampuan tipografi maju, thumbnail, pesan peringatan dan progress bar.

JavaScript komponen

Bootstrap dilengkapi dengan beberapa komponen JavaScript dalam bentuk jQuery plugin. Mereka menyediakan elemen antarmuka pengguna tambahan seperti kotak dialog, tooltips, dan komidi putar. Mereka juga memperluas fungsionalitas dari beberapa elemen antarmuka yang ada, termasuk misalnya fungsi auto-lengkap untuk bidang masukan. Dalam versi 2.0, plugin JavaScript berikut ini didukung: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Tutup, Carousel dan Typeahead.
Sebuah implementasi dari Twitter Bootstrap menggunakan Toolkit Dojo juga tersedia. Hal ini disebut Dojo Bootstrap dan merupakan pelabuhan plugin Twitter Bootstrap. Menggunakan kode Dojo 100% dan memiliki dukungan untuk AMD ( Asynchronous Modul Definition  ).
Demikian juga, Bootstrap kontrol untuk AngularJS juga tersedia; mereka disebut UI Bootstrap. Port ini menggunakan kembali beberapa markup Bootstrap ..

Gunakan


Untuk menggunakan Bootstrap dalam HTML halaman, pengembang mendownload Bootstrap CSS stylesheet dan termasuk link dalam HTML berkas.
(Pengembang juga dapat mengkompilasi CSS file dari download KURANG atau SASS stylesheet, dengan compiler khusus.)
Jika pengembang ingin menggunakan komponen JavaScript, mereka harus dirujuk bersama dengan jQuery perpustakaan dalam dokumen HTML.
Contoh berikut menggambarkan bagaimana ini bekerja. Kode HTML mendefinisikan bentuk pencarian sederhana dan daftar hasil dalam bentuk tabel. Halaman ini terdiri dari 5 elemen HTML dan CSS informasi sesuai dengan dokumentasi Bootstrap. Angka ini menunjukkan representasi dari dokumen dalam Mozilla Firefox 10 .

Latihanku.
  1.  Source code
  2. Tampilan




    Sumber : Wikipedia

0 komentar:

Posting Komentar

luvne.com ayeey.com cicicookies.com mbepp.com kumpulanrumusnya.com.com tipscantiknya.com