Bootstrap

Mulai

Ikhtisar proyek, isinya, dan cara memulai dengan template sederhana.

Perhatian! Dokumen ini untuk v2.3.2, yang tidak lagi didukung secara resmi. Lihat versi terbaru dari Bootstrap!

1. Unduh

Sebelum mengunduh, pastikan untuk memiliki editor kode (kami merekomendasikan Sublime Text 2 ) dan beberapa pengetahuan tentang HTML dan CSS. Kami tidak akan menelusuri file sumber di sini, tetapi tersedia untuk diunduh. Kami akan fokus untuk memulai dengan file Bootstrap yang dikompilasi.

Unduh dikompilasi

Cara tercepat untuk memulai: dapatkan versi CSS, JS, dan gambar kami yang telah dikompilasi dan diperkecil. Tidak ada dokumen atau file sumber asli.

Unduh Bootstrap

Unduh sumber

Dapatkan file asli untuk semua CSS dan JavaScript, bersama dengan salinan lokal dokumen dengan mengunduh versi terbaru langsung dari GitHub.

Unduh sumber Bootstrap

2. Struktur file

Dalam unduhan, Anda akan menemukan struktur dan konten file berikut, yang secara logis mengelompokkan aset umum dan menyediakan variasi yang dikompilasi dan diperkecil.

Setelah diunduh, unzip folder terkompresi untuk melihat struktur (yang dikompilasi) Bootstrap. Anda akan melihat sesuatu seperti ini:

  bootstrap / css / bootstrap . _ _ _ css
   bootstrap . _ _ menit _ css
   js / bootstrap . _ _ _ js
   bootstrap . _ _ menit _ js
   img / glyphicons - halflings . _ _ png
       glyphicons - halflings - putih . _ png

Ini adalah bentuk paling dasar dari Bootstrap: file yang dikompilasi untuk penggunaan drop-in cepat di hampir semua proyek web. Kami menyediakan CSS dan JS yang dikompilasi ( bootstrap.*), serta CSS dan JS yang dikompilasi dan diperkecil ( bootstrap.min.*). File gambar dikompres menggunakan ImageOptim , aplikasi Mac untuk mengompresi PNG.

Harap dicatat bahwa semua plugin JavaScript memerlukan jQuery untuk disertakan.

3. Apa yang termasuk?

Bootstrap dilengkapi dengan HTML, CSS, dan JS untuk segala macam hal, tetapi mereka dapat diringkas dengan beberapa kategori yang terlihat di bagian atas dokumentasi Bootstrap .

bagian Dokumen

Perancah

Gaya global untuk tubuh untuk mengatur ulang jenis dan latar belakang, gaya tautan, sistem kisi, dan dua tata letak sederhana.

CSS dasar

Gaya untuk elemen HTML umum seperti tipografi, kode, tabel, formulir, dan tombol. Juga termasuk Glyphicons , set ikon kecil yang hebat.

Komponen

Gaya dasar untuk komponen antarmuka umum seperti tab dan pills, navbar, alerts, page headers, dan banyak lagi.

plugin JavaScript

Mirip dengan Komponen, plugin JavaScript ini adalah komponen interaktif untuk hal-hal seperti tooltips, popovers, modals, dan banyak lagi.

Daftar komponen

Bersama-sama, bagian Komponen dan plugin JavaScript menyediakan elemen antarmuka berikut:

  • Grup tombol
  • Dropdown tombol
  • Tab navigasi, pil, dan daftar
  • navigasi
  • Label
  • Lencana
  • Header halaman dan unit pahlawan
  • Gambar kecil
  • Peringatan
  • Bilah kemajuan
  • Modal
  • Dropdown
  • Keterangan alat
  • Popover
  • Akordeon
  • Korsel
  • Ketik

Dalam panduan mendatang, kami dapat menelusuri komponen-komponen ini satu per satu secara lebih rinci. Sampai saat itu, cari masing-masing dalam dokumentasi untuk informasi tentang cara menggunakan dan menyesuaikannya.

4. Template HTML dasar

Dengan pengenalan singkat tentang konten, kita dapat fokus untuk menggunakan Bootstrap. Untuk melakukan itu, kami akan menggunakan template HTML dasar yang mencakup semua yang kami sebutkan dalam struktur File .

Sekarang, inilah tampilan file HTML biasa :

  1. <!DOCTYPE html>
  2. <html>
  3.   <kepala>
  4.     <title> Template Bootstrap 101 </title>
  5.     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  6.   </head>
  7.   <tubuh>
  8.     <h1> Halo, dunia! </h1>
  9.     <script src = "https://code.jquery.com/jquery.js" ></script> 
  10.   </tubuh>
  11. </html>

Untuk menjadikannya template Bootstrapped , cukup sertakan file CSS dan JS yang sesuai:

  1. <!DOCTYPE html>
  2. <html>
  3.   <kepala>
  4.     <title> Template Bootstrap 101 </title>
  5.     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  6.     <!-- Bootstrap -->
  7.     <link href = "css/bootstrap.min.css" rel = "stylesheet" media = "layar" >   
  8.   </head>
  9.   <tubuh>
  10.     <h1> Halo, dunia! </h1>
  11.     <script src = "https://code.jquery.com/jquery.js" ></script> 
  12.     <script src = "js/bootstrap.min.js" ></script> 
  13.   </tubuh>
  14. </html>

Dan Anda siap! Dengan menambahkan kedua file tersebut, Anda dapat mulai mengembangkan situs atau aplikasi apa pun dengan Bootstrap.

5. Contoh

Bergerak di luar template dasar dengan beberapa contoh tata letak. Kami mendorong orang-orang untuk mengulangi contoh-contoh ini dan tidak hanya menggunakannya sebagai hasil akhir.

  • Template pemula

    Dokumen HTML barebone dengan semua Bootstrap CSS dan JavaScript disertakan.

  • Situs pemasaran dasar

    Menampilkan unit pahlawan untuk pesan utama dan tiga elemen pendukung.

  • Tata letak cairan

    Menggunakan sistem grid cairan responsif baru kami untuk menciptakan tata letak cairan yang mulus.

  • Pemasaran sempit

    Template pemasaran yang ramping dan ringan untuk proyek atau tim kecil.

  • Navigasi yang dibenarkan

    Halaman pemasaran dengan tautan navigasi dengan lebar yang sama di bilah navigasi yang dimodifikasi.

  • Masuk

    Barebones masuk formulir dengan kustom, kontrol formulir yang lebih besar dan tata letak yang fleksibel.

  • Catatan kaki lengket

    Sematkan footer dengan ketinggian tetap ke bagian bawah area pandang pengguna.

  • Jumbotron korsel

    Riff yang lebih interaktif di situs pemasaran dasar yang menampilkan korsel terkemuka.

Apa selanjutnya?

Buka dokumen untuk informasi, contoh, dan cuplikan kode, atau lakukan lompatan berikutnya dan sesuaikan Bootstrap untuk proyek apa pun yang akan datang.

Kunjungi dokumen Bootstrap Sesuaikan Bootstrap