Bootstrap

Parancah

Bootstrap diwangun dina grid 12-kolom responsif. Urang ogé geus kaasup dibereskeun- sarta perenah lebar cairan dumasar kana sistem éta.

Gaya global pikeun reset CSS, tipografi, sareng tautan

Merlukeun HTML5 doctype

Bootstrap ngagunakeun elemen HTML jeung sipat CSS anu merlukeun pamakéan doctype HTML5. Pastikeun pikeun ngalebetkeun éta dina awal unggal halaman Bootstrapped dina proyék anjeun.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

Tipografi sareng tautan

Dina file scaffolding.less , kami nyetél tampilan global dasar, tipografi, sareng gaya tautan. Sacara husus, urang:

  • Leupaskeun margin dina awak
  • Disetél background-color: white;dinabody
  • Anggo @baseFontFamily, @baseFontSize, sareng @baseLineHeightatribut salaku dasar tipografi urang
  • Setel warna link global via @linkColorjeung nerapkeun link underlines ngan dina:hover

Reset via Normalize

Salaku Bootstrap 2, reset CSS tradisional geus mekar pikeun ngamangpaatkeun elemen ti Normalize.css , proyék ku Nicolas Gallagher nu ogé kakuatan HTML5 Boilerplate .

The reset anyar masih bisa kapanggih dina reset.less , tapi kalawan loba elemen dihapus pikeun brevity sarta akurasi.

Sistem grid standar 12 kolom sareng pulas responsif

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Sistem grid standar anu disayogikeun salaku bagian tina Bootstrap nyaéta grid 940px-lega, 12-kolom .

Éta ogé ngagaduhan opat variasi responsif pikeun sababaraha alat sareng résolusi: telepon, potret tablet, bentang méja sareng desktop leutik, sareng desktop layar lebar ageung.

  1. <div class = "baris" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Sapertos anu dipidangkeun di dieu, tata perenah dasar tiasa didamel ku dua "kolom," masing-masing ngalangkungan sajumlah 12 kolom dasar anu kami definisikeun salaku bagian tina sistem grid kami.


Ngimbangkeun kolom

4
4 nyelap 4
3 ngébréhkeun 3
3 ngébréhkeun 3
8 udag 4 
  1. <div class = "baris" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Kolom nyarang

Kalayan sistem grid statik (non-cair) dina Bootstrap, nyarang gampang. Pikeun nyarang eusi anjeun, cukup tambahkeun kolom anyar .rowsareng set dina .span*kolom anu tos aya .span*.

Contona

Baris sarang kedah kalebet sakumpulan kolom anu nambihan kana jumlah kolom indungna. Contona, dua .span3kolom nested kudu ditempatkeun dina hiji .span6.

Tingkat 1 kolom
Tingkat 2
Tingkat 2 
  1. <div class = "baris" > 
  2.   <div class = "span12" > 
  3.     Tingkat 1 kolom
  4.     <div class = "baris" > 
  5.       <div class = "span6" > Level 2 </div> 
  6.       <div class = "span6" > Level 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sistim grid cairan 12 responsif, kolom basis persen

Kolom fluida

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Persen, sanés piksel

Sistem grid cairan ngagunakeun persen pikeun rubak kolom tinimbang piksel tetep. Éta ogé gaduh variasi responsif anu sami sareng sistem grid tetep kami, mastikeun proporsi anu pas pikeun résolusi layar konci sareng alat.

Jajaran cairan

Jieun cairan baris sagala saukur ku ngarobah .rowkana .row-fluid. Kolom tetep sami, janten gampang pisan pikeun flip antara perenah tetep sareng cairan.

Markup

  1. <div class = "baris-cairan" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Cairan nyarang

Nyarang sareng jaringan cairan rada béda: jumlah kolom anu disarangkeun henteu kedah cocog sareng indungna. Sabalikna, kolom anjeun direset dina unggal tingkat sabab unggal baris nyandak 100% tina kolom indungna.

Cairan 12
Cairan 6
Cairan 6 
  1. <div class = "baris-cairan" > 
  2.   <div class = "span12" > 
  3.     Tingkat 1 kolom
  4.     <div class = "baris-cairan" > 
  5.       <div class = "span6" > Level 2 </div> 
  6.       <div class = "span6" > Level 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Kustomisasi grid

Variabel Nilai standar Katerangan
@gridColumns 12 Jumlah kolom
@gridColumnWidth 60px Lebar unggal kolom
@gridGutterWidth 20px spasi négatip antara kolom
@siteWidth Jumlah diitung sadaya kolom sareng talang Ngitung jumlah kolom sareng talang pikeun nyetél lebar .container-fixed()mixin

Variabel dina KURANG

Diwangun kana Bootstrap mangrupakeun sakeupeul variabel pikeun ngaropéa sistem standar grid 940px, documented luhur. Sadaya variabel pikeun grid disimpen dina variables.less.

Kumaha carana ngaropea

Ngarobah grid hartina ngarobah tilu @grid*variabel jeung recompiling Bootstrap. Robah variabel grid dina variables.less sareng nganggo salah sahiji tina opat cara anu didokumentasikeun pikeun nyusun ulang . Upami anjeun nambihan langkung seueur kolom, pastikeun pikeun nambihan CSS pikeun anu aya dina grid.less.

Tetep responsif

Kustomisasi grid ngan tiasa dianggo dina tingkat standar, grid 940px. Pikeun ngajaga aspék responsif tina Bootstrap, Anjeun ogé bakal kudu ngaluyukeun grids di responsive.less.

Layouts Témplat dasar pikeun nyieun halaman wéb

perenah maneuh

Tata letak standar sareng saderhana 940px-lega, dipuseurkeun pikeun situs wéb atanapi halaman anu disayogikeun ku hiji <div class="container">.

  1. <awak>
  2.   <div class = "wadah" > 
  3.     ...
  4.   </div>
  5. </awak>

Susunan cairan

<div class="container-fluid">méré struktur kaca fléksibel, min- jeung max-lebar, sarta sidebar kénca-leungeun. Éta saé pikeun aplikasi sareng dokumén.

  1. <div class = "wadah-cairan" > 
  2.   <div class = "baris-cairan" > 
  3.     <div class = "span2" > 
  4.       <!--Eusi sidebar-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Eusi awak-->
  8.     </div>
  9.   </div>
  10. </div>

Desain responsif Media queries pikeun sagala rupa alat jeung resolusi

Paranti responsif

Naon maranehna ngalakukeun

Média queries ngidinan pikeun custom CSS dumasar kana sababaraha kaayaan-babandingan, rubak, tipe tampilan, jsb-tapi biasana museurkeun sabudeureun min-widthtur max-width.

  • Robah lebar kolom dina grid urang
  • Tumpukan elemen tinimbang ngambang dimana wae diperlukeun
  • Robah ukuran judul sareng téks janten langkung pas pikeun alat

Anggo patarosan média sacara tanggung jawab sareng ngan ukur pikeun ngamimitian pamirsa sélulér anjeun. Pikeun proyék-proyék anu langkung ageung, pertimbangkeun dasar kode khusus sareng sanés lapisan patarosan média.

Alat anu dirojong

Bootstrap ngadukung sababaraha patarosan média dina hiji file pikeun ngabantosan proyék anjeun langkung pas dina alat sareng résolusi layar anu béda. Ieu naon anu kalebet:

Label Lebar perenah rubak kolom Lebar talang
Smartphone 480px sareng handap Kolom cairan, henteu lebar tetep
Smartphone ka tablet 767px sareng handap Kolom cairan, henteu lebar tetep
Tablet Potrét 768px ka luhur 42px 20px
Default 980px sareng ka luhur 60px 20px
tampilan badag 1200px sareng ka luhur 70px 30px

Merlukeun meta tag

Pikeun mastikeun alat nembongkeun kaca responsif leres, kaasup viewport meta tag.

  1. <meta name = "viewport" eusi = "lebar = lebar alat, skala awal = 1.0" >

Ngagunakeun queries média

Bootstrap henteu otomatis ngalebetkeun patarosan média ieu, tapi ngartos sareng nambihanana gampang pisan sareng peryogi pangaturan minimal. Anjeun gaduh sababaraha pilihan pikeun kalebet fitur responsif Bootstrap:

  1. Paké versi responsif disusun, bootstrap-responsive.css
  2. Tambahkeun @import "responsive.less" na recompile Bootstrap
  3. Ngarobah sarta recompile responsive.less salaku file misah

Naha henteu kalebet waé? Kaleresan nyarios, henteu sadayana kedah responsif. Gantina nyorong pamekar pikeun ngahapus fitur ieu, kami panginten langkung saé pikeun ngaktifkeunana.

  1.   // telepon Lansekap jeung handap
  2.   @media ( max - rubak : 480px ) { ... }     
  3.  
  4.   // telepon bentang ka tablet potret
  5.   @media ( max - rubak : 768px ) { ... }     
  6.  
  7.   // Potrét tablet ka lanskap sareng desktop
  8.   @media ( mnt - rubak : 768px ) jeung ( max - rubak : 980px ) { ... }        
  9.  
  10.   // Desktop badag
  11.   @media ( mnt - rubak : 1200px ) { .. }

kelas utiliti responsif

Naon éta aranjeunna

Pikeun pangwangunan anu ramah-seluler anu langkung gancang, paké kelas utilitas dasar ieu pikeun nunjukkeun sareng nyumputkeun eusi ku alat.

Nalika ngagunakeun

Paké dina dasar kawates sarta ulah nyieun versi sagemblengna béda tina situs sarua. Gantina, make eta pikeun ngalengkepan presentasi unggal alat urang.

Contona, Anjeun bisa némbongkeun <select>unsur pikeun nav on layouts mobile, tapi teu dina tablet atanapi desktops.

kelas rojongan

Ditémbongkeun di dieu nyaéta tabel kelas anu kami dukung sareng pangaruhna kana perenah pamundut média anu dipasihkeun (dilabélan ku alat). Éta bisa kapanggih dina responsive.less.

Kelas Telepon480px sareng handap Tablet767px sareng handap Desktops768px ka luhur
.visible-phone Katingali
.visible-tablet Katingali
.visible-desktop Katingali
.hidden-phone Katingali Katingali
.hidden-tablet Katingali Katingali
.hidden-desktop Katingali Katingali

Kasus tés

Ganti ukuran browser anjeun atanapi muatkeun dina alat anu béda pikeun nguji kelas di luhur.

Katingali dina...

  • Telepon✔ Telepon
  • Tablét✔ Tablet
  • Desktop✔ Desktop

Disumputkeun dina...

  • Telepon✔ Telepon
  • Tablét✔ Tablet
  • Desktop✔ Desktop