Bootstrap
(kerangka front-end)

Rilis stabil | 3.3.2 / 19 Januari 2015 |
---|---|
Ditulis dalam | HTML , CSS , KURANG , SASS dan JavaScript |
Peron | Mesin web |
Jenis | HTML dan CSS berbasis desain template |
Surat Izin | MIT License ( Apache License 2.0 sebelum 3.1.0) |
Situs web | getbootstrap .com |
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 lebih dari 73.000 bintang dan lebih dari 27.000 garpu, dan basis pengguna yang mencakup MSNBC dan NASA.
Asal
Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter sebagai kerangka kerja 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 sendiri membangun sesuatu yang jauh lebih besar daripada perangkat internal lain. Beberapa bulan kemudian, kami berakhir 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 yang paling membintangi GitHub proyek pembangunan, posisi masih memegang di Januari 2015.
Fitur
Bootstrap kompatibel dengan versi terbaru dari semua browser utama. Hal anggun menurunkan bila digunakan pada browser lama seperti Internet Explorer 8.
Sejak versi 2.0 juga mendukung desain web responsif .
Ini berarti tata letak halaman web dinamis menyesuaikan, dengan
mempertimbangkan karakteristik 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 Bootstrap file itu sendiri, memilih komponen yang ingin mereka gunakan dalam proyek mereka.
Penyesuaian yang mungkin sampai batas tertentu melalui stylesheet konfigurasi pusat. Perubahan yang lebih mendalam yang mungkin oleh 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 selanjutnya dihasilkan sudah termasuk style sheet CSS pre-built.
Sistem grid dan desain responsif datang standar dengan 1170 pixel lebar, tata letak jaringan. Atau, pengembang dapat menggunakan variabel-lebar tata letak.
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
Bootstrap menyediakan satu set stylesheet yang memberikan definisi gaya dasar untuk semua komponen HTML kunci. Ini memberikan seragam, penampilan modern untuk memformat teks, tabel dan elemen form.
Dapat digunakan kembali komponen
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. Komponen diimplementasikan sebagai kelas CSS, yang harus diterapkan untuk elemen HTML tertentu dalam halaman.
Komponen JavaScript
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 fungsi 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 pelaksanaan Twitter Bootstrap menggunakan Dojo Toolkit juga tersedia. Hal ini disebut Dojo Bootstrap dan merupakan bagian dari plugin Twitter Bootstrap. Menggunakan kode Dojo 100% dan memiliki dukungan untuk AMD ( Asynchronous Modul Definition ).
Gunakan
Pandangan dari contoh menggunakan Bootstrap, diberikan di Google Chrome
Untuk menggunakan Bootstrap dalam HTML halaman, pengembang download Bootstrap CSS stylesheet dan termasuk link dalam HTML berkas.
(Pengembang juga dapat mengkompilasi CSS file dari didownload 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 HTML 5 elemen dan informasi CSS sesuai dengan dokumentasi Bootstrap.
<! DOCTYPE html> <Html> <Head> <Title> Contoh Twitter Bootstrap </ title> <! - Sertakan stylesheet bootstrap -> <Link href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel = "stylesheet"> </ Head> <Body> <Div class = "container"> <H1> Cari </ h1> <Label> Contoh untuk bentuk pencarian sederhana. </ Label> <! - Formulir pencarian dengan field input dan tombol -> <Form class = "baik bentuk-search"> <Input type = "text" class = "input-menengah pencarian query"> <Jenis tombol = "submit" class = "btn btn-utama"> Cari </ button> </ Form> <H2> Hasil </ h2> <! - Tabel dengan bolak warna latar belakang sel dan bingkai luar -> <Class table = "meja meja bergaris table-berbatasan"> <Thead> <Tr> <Th> # </ th> <Th> Judul </ th> </ Tr> </ Thead> <Tbody> <Tr> <Td> 1 </ td> <Td> Lorem ipsum dolor ... </ td> </ Tr> <Tr> <Td> 2 </ td> <Td> Ut enim ad minim veniam, ... </ td> </ Tr> <Tr> <Td> 3 </ td> <Td> DUIs Aute Irure dolor ... </ td> </ Tr> </ Tbody> </ Table> </ Div> <! - JavaScript ditempatkan di akhir dokumen sehingga halaman memuat lebih cepat -> <! - Opsional: Sertakan perpustakaan jQuery -> <Script src = "http://code.jquery.com/jquery-1.11.1.min.js"> </ script> <! - Opsional: Memasukkan plugin Bootstrap JavaScript -> <Script src = "http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </ script> </ Body> </ Html>
Membuat tata letak grid sederhana (Fluid)
<Div class = "row"> <Div class = "col-md-5"> HI1 </ div> <Div class = "col-md-4"> hi2 </ div> <Div class = "col-md-4"> HI3 </ div> <Div class = "col-md-4"> hi4 </ div> <Div class = "col-md-4"> hi5 </ div> </ Div>
Lihat juga
Referensi
- "Bootstrap 3.3.2 dirilis (2015/01/19)" . 2015/01/19.
- "GitHub: Cari Bintang> 1" . Diperoleh 25 Juni 2014.
- "NASA - Spot The Station" . 2012/11/06.
- "MSNBC - Breaking News" . 2012/11/06.
- Mark Otto (2012/01/17). "Bootstrap A List Apart # 342" . Diperoleh 2012/03/05.
Pranala luar
![]() | Wikimedia Commons memiliki kategori mengenai Bootstrap (framework) . |
- Bootstrap - Situs resmi, berisi dokumentasi dan download
- Bootstrap Blog - Blog Bootstrap resmi dikelola oleh pengembang, Mark Otto
0 komentar:
Posting Komentar