Bootstrap

Perancah

Bootstrap dibangun ing kothak 12-kolom responsif. Kita uga wis klebu tetep- lan adi-jembar tata letak adhedhasar sistem sing.

Gaya global kanggo reset CSS, tipografi, lan pranala

Mbutuhake doctype HTML5

Bootstrap nggunakake unsur HTML lan properti CSS sing mbutuhake doctype HTML5. Priksa manawa sampeyan kalebu ing wiwitan saben kaca Bootstrapped ing proyek sampeyan.

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

Tipografi lan pranala

Ing file scaffolding.less , kita nyetel tampilan global dhasar, tipografi, lan gaya link. Khusus, kita:

  • Mbusak margin ing awak
  • Setel background-color: white;ingbody
  • Gunakake @baseFontFamily, @baseFontSize, lan @baseLineHeightatribut minangka basis tipografi kita
  • Setel werna link global liwat @linkColorlan aplikasi link underlines mung ing:hover

Reset liwat Normalize

Ing Bootstrap 2, reset CSS tradisional wis berkembang kanggo nggunakake unsur saka Normalize.css , proyek dening Nicolas Gallagher sing uga nguwasani HTML5 Boilerplate .

Reset anyar isih bisa ditemokaké ing reset.less , nanging karo akeh unsur dibusak kanggo brevity lan akurasi.

Sistem kothak standar 12 kolom kanthi corak responsif

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

Sistem kothak standar sing disedhiyakake minangka bagéan saka Bootstrap yaiku kothak 940px-wide, 12-kolom .

Uga nduweni papat variasi responsif kanggo macem-macem piranti lan resolusi: telpon, potret tablet, lanskap tablet lan desktop cilik, lan desktop layar lebar gedhe.

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

Kaya sing dituduhake ing kene, tata letak dhasar bisa digawe kanthi rong "kolom", saben-saben nyakup sawetara 12 kolom dhasar sing ditetepake minangka bagean saka sistem kothak.


Ngimbangi kolom

4
4 ngimbangi 4
3 ngimbangi 3
3 ngimbangi 3
8 uwal 4 
  1. <div class = "baris" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Nesting kolom

Kanthi sistem grid statis (non-cair) ing Bootstrap, nesting gampang. Kanggo nggawe konten sampeyan, tambahake kolom anyar .rowlan .span*kolom ing .span*kolom sing wis ana.

Tuladha

Baris sing disusun kudu kalebu sakumpulan kolom sing ditambahake nganti jumlah kolom induke. Contone, rong .span3kolom nested kudu diselehake ing a .span6.

Level 1 kolom
Tingkat 2
Tingkat 2 
  1. <div class = "baris" > 
  2.   <div class = "span12" > 
  3.     Level 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>

Sistem 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, dudu piksel

Sistem kothak cairan nggunakake persen kanggo jembar kolom tinimbang piksel tetep. Uga nduweni variasi responsif sing padha karo sistem kothak tetep kita, njamin proporsi sing tepat kanggo resolusi layar tombol lan piranti.

Cairan baris

Gawe cairan baris wae kanthi ngganti .rowdadi .row-fluid. Kolom tetep padha, nggawe gampang banget kanggo muter ing antarane tata letak tetep lan cairan.

Markup

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

Cairan nesting

Nyarang karo jaringan cairan rada beda: jumlah kolom sing disarang ora kudu cocog karo wong tuwa. Nanging, kolom sampeyan direset ing saben level amarga saben baris njupuk 100% saka kolom induk.

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

Kustomisasi kothak

Variabel Nilai standar Katrangan
@gridColumns 12 Jumlah kolom
@gridColumnWidth 60px Jembar saben kolom
@gridGutterWidth 20px Spasi negatif antarane kolom

Variabel ing KURANG

Dibangun ing Bootstrap minangka sawetara variabel kanggo ngatur sistem kothak standar 940px, sing didokumentasikake ing ndhuwur. Kabeh variabel kanggo kothak disimpen ing variabel.kurang.

Carane ngatur

Ngowahi kothak tegese ngganti telung @grid*variabel lan recompiling Bootstrap. Ngganti variabel kothak ing variables.less lan gunakake salah siji saka patang cara sing didokumentasikake kanggo ngumpulake maneh . Yen sampeyan nambahake kolom liyane, priksa manawa sampeyan nambahake CSS kanggo sing ana ing grid.less.

Tetep responsif

Kustomisasi kothak mung bisa digunakake ing tingkat standar, kothak 940px. Kanggo njaga aspèk responsif Bootstrap, sampeyan uga kudu ngatur kothak ing responsif.kurang.

Layouts Cithakan dhasar kanggo nggawe kaca web

Tata letak tetep

Default lan prasaja 940px-wide, tata letak tengah kanggo meh wae situs web utawa kaca sing diwenehake dening siji <div class="container">.

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

Tata letak cairan

<div class="container-fluid">menehi struktur kaca fleksibel, min- lan max-widths, lan sidebar sisih kiwa. Iku apik kanggo app lan docs.

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

Desain responsif Pitakonan media kanggo macem-macem piranti lan resolusi

Piranti responsif

Apa sing ditindakake

Pitakonan media ngidini CSS khusus adhedhasar sawetara kondisi-rasio, jembar, jinis tampilan, etc-nanging biasane fokus watara min-widthlan max-width.

  • Ngowahi jembaré kolom ing kothak kita
  • Tumpukan unsur tinimbang ngambang ing ngendi wae perlu
  • Owahi ukuran judhul lan teks dadi luwih cocog kanggo piranti

Gunakake pitakon media kanthi tanggung jawab lan mung minangka wiwitan pamirsa seluler. Kanggo proyek sing luwih gedhe, nimbang basis kode khusus lan dudu lapisan pitakon media.

Piranti sing didhukung

Bootstrap ndhukung sawetara pitakon media ing file siji kanggo mbantu nggawe proyek sampeyan luwih cocog ing macem-macem piranti lan resolusi layar. Punika ingkang kalebet:

Label jembaré tata letak Jembaré kolom Jembaré talang
Smartphone 480px lan ngisor Cairan kolom, ora jembaré tetep
Smartphone kanggo tablet 767px lan ngisor Cairan kolom, ora jembaré tetep
Tablet potret 768px lan ndhuwur 42 px 20px
Default 980px lan munggah 60px 20px
Tampilan gedhe 1200px lan munggah 70px 30px

Mbutuhake tag meta

Kanggo mesthekake piranti nampilake kaca responsif kanthi bener, lebokake tag meta viewport.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

Nggunakake pitakon media

Bootstrap ora kanthi otomatis nyakup pitakon media kasebut, nanging ngerti lan nambahake iku gampang banget lan mbutuhake persiyapan minimal. Sampeyan duwe sawetara opsi kanggo kalebu fitur responsif Bootstrap:

  1. Gunakake versi responsif kompilasi, bootstrap-responsive.css
  2. Tambah @import "responsive.less" lan recompile Bootstrap
  3. Ngowahi lan recompile responsive.less minangka file kapisah

Apa ora mung kalebu? Bener, ora kabeh kudu responsif. Tinimbang nyengkuyung pangembang kanggo mbusak fitur iki, luwih becik ngaktifake.

  1.   // telpon Landskap lan mudhun
  2.   @media ( maks - jembaré : 480px ) { ... }     
  3.  
  4.   // Telpon malang menyang tablet mujur
  5.   @media ( maks - jembaré : 767px ) { ... }     
  6.  
  7.   // Potret tablet menyang malang lan desktop
  8.   @media ( min - jembaré : 768px ) lan ( max - jembaré : 979px ) { ... }        
  9.  
  10.   // Desktop gedhe
  11.   @media ( min - jembaré : 1200px ) { ... }

Kelas utilitas responsif

Apa padha

Kanggo pangembangan seluler sing luwih cepet, gunakake kelas sarana dhasar iki kanggo nuduhake lan ndhelikake konten miturut piranti.

Nalika nggunakake

Gunakake kanthi winates lan aja nggawe versi sing beda-beda saka situs sing padha. Nanging, gunakake kanggo nglengkapi presentasi saben piranti.

Contone, sampeyan bisa nuduhake <select>unsur kanggo nav ing noto seluler, nanging ora ing tablet utawa desktop.

Dhukungan kelas

Ditampilake ing kene yaiku tabel kelas sing didhukung lan pengaruhe ing tata letak pitakon media tartamtu (dilabeli miturut piranti). Padha bisa ditemokaké ing responsive.less.

kelas Telpon480px lan ngisor Tablet767px lan ngisor Desktop768px lan ndhuwur
.visible-phone Katon
.visible-tablet Katon
.visible-desktop Katon
.hidden-phone Katon Katon
.hidden-tablet Katon Katon
.hidden-desktop Katon Katon

Kasus tes

Ganti ukuran browser utawa mbukak ing piranti beda kanggo nyoba kelas ndhuwur.

Katon ing...

Centhang ijo nuduhake yen kelas katon ing viewport sampeyan saiki.

  • Telpon✔ Telpon
  • Tablet✔ Tablet
  • Desktop✔ Desktop

Didhelikake ing ...

Ing kene, centhang ijo nuduhake yen kelas didhelikake ing viewport sampeyan saiki.

  • Telpon✔ Telpon
  • Tablet✔ Tablet
  • Desktop✔ Desktop