Bootstrap

Bermula

Gambaran keseluruhan projek, kandungannya dan cara memulakan dengan templat mudah.

1. Muat turun

Sebelum memuat turun, pastikan anda mempunyai editor kod (kami mengesyorkan Sublime Text 2 ) dan sedikit pengetahuan tentang HTML dan CSS. Kami tidak akan melihat fail sumber di sini, tetapi ia tersedia untuk dimuat turun. Kami akan menumpukan pada memulakan dengan fail Bootstrap kami yang disusun.

Muat turun disusun

Cara terpantas untuk bermula: dapatkan versi CSS, JS dan imej kami yang disusun dan diperkecil. Tiada dokumen atau fail sumber asal.

Muat turun Bootstrap

Muat turun sumber

Dapatkan fail asal untuk semua CSS dan Javasript, bersama-sama dengan salinan tempatan dokumen dengan memuat turun versi terkini terus daripada GitHub.

Muat turun sumber Bootstrap

2. Struktur fail

Dalam muat turun anda akan menemui struktur dan kandungan fail berikut, secara logik mengumpulkan aset biasa dan menyediakan kedua-dua variasi yang disusun dan diminimumkan.

Setelah dimuat turun, nyahzip folder termampat untuk melihat struktur Bootstrap (yang disusun). Anda akan melihat sesuatu seperti ini:

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . js
   │ ├── bootstrap . min . js
   ├── img / │ ├── glyphicons - halflings . png
   │ ├── glyphicons - halflings - putih . png
  
  
        
        
        └── README . md

Ini ialah bentuk Bootstrap yang paling asas: fail yang disusun untuk penggunaan drop-in pantas dalam hampir mana-mana projek web. Kami menyediakan CSS dan JS yang disusun ( bootstrap.*), serta CSS dan JS yang disusun dan diperkecil ( bootstrap.min.*). Fail imej dimampatkan menggunakan ImageOptim , apl Mac untuk memampatkan PNG.

3. Apa yang disertakan

Bootstrap dilengkapi dengan HTML, CSS dan JS untuk semua jenis perkara, tetapi ia boleh diringkaskan dengan beberapa kategori yang boleh dilihat di bahagian atas dokumentasi Bootstrap .

Bahagian Dokumen

Perancah

Gaya global untuk badan menetapkan semula jenis dan latar belakang, gaya pautan, sistem grid dan dua reka letak mudah.

CSS asas

Gaya untuk elemen HTML biasa seperti tipografi, kod, jadual, borang dan butang. Juga termasuk Glyphicons , set ikon kecil yang hebat.

Komponen

Gaya asas untuk komponen antara muka biasa seperti tab dan pil, bar navigasi, makluman, pengepala halaman dan banyak lagi.

Pemalam Javascript

Sama seperti Komponen, pemalam Javascript ini ialah komponen interaktif untuk perkara seperti petua alat, popover, modal dan banyak lagi.

Senarai komponen

Bersama-sama, bahagian Komponen dan pemalam Javascript menyediakan elemen antara muka berikut:

  • Kumpulan butang
  • Butang lungsur turun
  • Tab navigasi, pil dan senarai
  • Navbar
  • Label
  • Lencana
  • Pengepala halaman dan unit wira
  • Gambar kecil
  • Makluman
  • Bar kemajuan
  • modal
  • Jatuh turun
  • Petua alat
  • Popovers
  • Akordion
  • karusel
  • Kepala taip

Dalam panduan masa hadapan, kita boleh menelusuri komponen ini secara individu dengan lebih terperinci. Sehingga itu, cari setiap satu daripada ini dalam dokumentasi untuk mendapatkan maklumat tentang cara menggunakan dan menyesuaikannya.

4. Templat HTML asas

Dengan pengenalan ringkas tentang kandungan di luar jalan, kita boleh memfokuskan penggunaan Bootstrap. Untuk berbuat demikian, kami akan menggunakan templat HTML asas yang merangkumi semua yang kami nyatakan dalam struktur Fail .

Sekarang, inilah pandangan pada fail HTML biasa :

  1. <html>
  2.   <kepala>
  3.     <title> Templat Bootstrap 101 </title>
  4.   </head>
  5.   <badan>
  6.     <h1> Helo, dunia! </h1>
  7.   </body>
  8. </html>

Untuk menjadikan ini templat Bootstrapped , masukkan sahaja fail CSS dan JS yang sesuai:

  1. <html>
  2.   <kepala>
  3.     <title> Templat Bootstrap 101 </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "css/bootstrap.min.css" rel = "stylesheet" >  
  6.   </head>
  7.   <badan>
  8.     <h1> Helo, dunia! </h1>
  9.     <script src = "js/bootstrap.min.js" ></script> 
  10.   </body>
  11. </html>

Dan anda sudah bersedia! Dengan dua fail tersebut ditambah, anda boleh mula membangunkan mana-mana tapak atau aplikasi dengan Bootstrap.

5. Contoh

Bergerak melangkaui templat asas dengan beberapa contoh susun atur. Kami menggalakkan orang ramai untuk mengulangi contoh ini dan bukan hanya menggunakannya sebagai hasil akhir.

  • Tapak pemasaran asas

    Menampilkan unit wira untuk mesej utama dan tiga elemen sokongan.

  • Susun atur cecair

    Menggunakan sistem grid cecair responsif baharu kami untuk mencipta reka letak cecair yang lancar.

  • Templat permulaan

    Dokumen HTML barebones dengan semua Bootstrap CSS dan javascript disertakan.

Apa selepas ini?

Pergi ke dokumen untuk mendapatkan maklumat, contoh dan coretan kod, atau lakukan lompatan seterusnya dan sesuaikan Bootstrap untuk sebarang projek yang akan datang.

Lawati dokumen Bootstrap Sesuaikan Bootstrap