Bootstrap

Perancah

Bootstrap dibangun ing kothak, tata letak, lan komponen responsif 12 kolom.

Setelan global

Mbutuhake doctype HTML5

Bootstrap nggunakake unsur HTML lan properti CSS tartamtu sing mbutuhake doctype HTML5. Kalebu ing wiwitan kabeh proyek sampeyan.

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

Tipografi lan pranala

Bootstrap nyetel tampilan global dhasar, tipografi, lan gaya link. Khusus, kita:

  • Copot margining 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

Gaya iki bisa ditemokake ing scaffolding.less .

Reset liwat Normalize

Kanthi Bootstrap 2, blok reset lawas wis dibuwang kanggo Normalize.css , proyek dening Nicolas Gallagher lan Jonathan Neal sing uga nguwasani HTML5 Boilerplate . Nalika kita nggunakake akeh Normalize ing reset.less kita , kita wis dibusak sawetara unsur khusus kanggo Bootstrap.

Sistem grid standar

Tuladha kothak urip

Sistem kothak Bootstrap standar nggunakake 12 kolom , nggawe wadhah sing amba 940px tanpa fitur responsif . Kanthi file CSS responsif sing ditambahake, kothak kasebut cocog dadi 724px lan 1170px lebar gumantung saka viewport sampeyan. Ing ngisor viewports 767px, kolom dadi cairan lan tumpukan vertikal.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

HTML grid dhasar

Kanggo tata rong kolom prasaja, nggawe .rowlan nambah nomer cocok saka .span*kolom. Amarga iki kothak 12-kolom, saben .span*mbentang sawetara sing 12 kolom, lan kudu tansah nambah nganti 12 kanggo saben baris (utawa nomer kolom ing induk).

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

Diwenehi conto iki, kita duwe .span4lan .span8, nggawe kanggo 12 total kolom lan baris lengkap.

Ngimbangi kolom

Pindhah kolom menyang tengen nggunakake .offset*kelas. Saben kelas nambah wates kiwa kolom kanthi kolom kabeh. Contone, .offset4gerakane .span4liwat papat kolom.

4
3 ngimbangi 2
3 ngimbangi 1
3 ngimbangi 2
6 uwal 3 
  1. <div class = "baris" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Nesting kolom

Kanggo nyelehake konten sampeyan nganggo kothak gawan, tambahake kolom anyar .rowlan set .span*ing .span*kolom sing wis ana. Baris bersarang kudu kalebu sakumpulan kolom sing ditambahake nganti jumlah kolom induke.

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

Sistem jaringan fluida

Tuladha kothak cairan urip

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

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

HTML grid cairan dhasar

Nggawe baris "cairan" kanthi ngganti .rowdadi .row-fluid. Kelas kolom tetep padha, dadi gampang kanggo flip antarane kothak tetep lan cairan.

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

Cairan offsetting

Makaryakke kanthi cara sing padha karo ngimbangi sistem kothak tetep: tambahake .offset*menyang kolom apa wae kanggo ngimbangi pirang-pirang kolom kasebut.

4
4 ngimbangi 4
3 ngimbangi 3
3 ngimbangi 3
6 uwal 6 
  1. <div class = "baris-fluida" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Cairan nesting

Grid fluida nggunakake nesting kanthi cara sing beda: saben level kolom nested kudu ditambah nganti 12 kolom. Iki amarga kothak cairan nggunakake persentase, dudu piksel, kanggo nyetel lebar.

Cairan 12
Cairan 6
Cairan 6
Cairan 6
Cairan 6 
  1. <div class = "baris-fluida" > 
  2.   <div class = "span12" > 
  3.     Cairan 12
  4.     <div class = "baris-fluida" > 
  5.       <div class = "span6" > 
  6.         Cairan 6
  7.         <div class = "baris-fluida" > 
  8.           <div class = "span6" > Cairan 6 </div> 
  9.           <div class = "span6" > Cairan 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Cairan 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Tata letak

Tata letak tetep

Nyedhiyakake tata letak umum (lan opsional responsif) kanthi mung <div class="container">dibutuhake.

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

Tata letak cairan

Gawe kaca rong kolom kanthi cairan - <div class="container-fluid">apik kanggo aplikasi lan dokumen.

  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

Ngaktifake fitur responsif

Aktifake CSS responsif ing proyek sampeyan kanthi nyakup tag meta sing tepat lan stylesheet tambahan ing <head>dokumen sampeyan. Yen sampeyan wis nyusun Bootstrap saka kaca Kustomisasi, sampeyan mung kudu nyakup tag meta.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <link href = "aset/css/bootstrap-responsive.css" rel = "stylesheet" >

Kepala munggah!Bootstrap ora kalebu fitur responsif kanthi standar ing wektu iki amarga ora kabeh kudu responsif. Tinimbang nyemangati pangembang kanggo mbusak fitur iki, kita mikir sing paling apik kanggo ngaktifake yen perlu.

Babagan Bootstrap responsif

Piranti responsif

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
Tampilan gedhe 1200px lan munggah 70px 30px
Default 980px lan munggah 60px 20px
Tablet potret 768px lan ndhuwur 42 px 20px
Telpon kanggo tablet 767px lan ngisor Cairan kolom, ora jembaré tetep
Telpon 480px lan ngisor Cairan kolom, ora jembaré tetep 
  1. /* Desktop gedhe */
  2. @media ( min - jembaré : 1200px ) { ... }     
  3.  
  4. /* Potret tablet menyang lanskap lan desktop */
  5. @media ( min - jembaré : 768px ) lan ( max - jembaré : 979px ) { ... }        
  6.  
  7. /* Telpon lanskap menyang tablet potret */
  8. @media ( maks - jembaré : 767px ) { ... }     
  9.  
  10. /* Telpon lanskap lan mudhun */
  11. @media ( maks - jembaré : 480px ) { ... }

Kelas utilitas responsif

Kanggo pangembangan seluler sing luwih cepet, gunakake kelas sarana iki kanggo nuduhake lan ndhelikake konten miturut piranti. Ing ngisor iki ana tabel kelas sing kasedhiya lan pengaruhe ing tata letak query media tartamtu (dilabeli miturut piranti). Padha bisa ditemokaké ing responsive.less.

kelas Telpon767px lan ngisor Tablet979px kanggo 768px DesktopDefault
.visible-phone Katon
.visible-tablet Katon
.visible-desktop Katon
.hidden-phone Katon Katon
.hidden-tablet Katon Katon
.hidden-desktop Katon Katon

Nalika nggunakake

Gunakake kanthi winates lan aja nggawe versi sing beda-beda saka situs sing padha. Nanging, gunakake kanggo nglengkapi presentasi saben piranti. Utilitas responsif ora kudu digunakake karo tabel, lan ora didhukung.

Utilitas responsif test case

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