Pages

Jumat, 30 Januari 2015

Bootstrap 

(kerangka front-end)


Metode bootrap logo.svg
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

Contoh halaman web menggunakan framework Bootstrap
Contoh halaman web menggunakan framework Bootstrap diberikan di Mozilla Firefox
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

Icon Portal Portal perangkat lunak bebas

Referensi

  1. "Bootstrap 3.3.2 dirilis (2015/01/19)" . 2015/01/19.
  2. "GitHub: Cari Bintang> 1" . Diperoleh 25 Juni 2014.
  3. "NASA - Spot The Station" . 2012/11/06.
  4. "MSNBC - Breaking News" . 2012/11/06.
  5. 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
Diposting oleh di

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
 

Blog Archive

Blogroll

About