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 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

Nesting karo jaringan cairan rada beda: jumlah kolom sing disarang kudu ora cocog karo jumlah kolom induk. Nanging, saben level kolom bersarang direset amarga saben baris njupuk 100% 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>

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 minangka 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 and below Fluid columns, no fixed widths
Phones 480px and below Fluid columns, no fixed widths 
  1. /* Large desktop */
  2. @media (min-width: 1200px) { ... }
  3.  
  4. /* Portrait tablet to landscape and desktop */
  5. @media (min-width: 768px) and (max-width: 979px) { ... }
  6.  
  7. /* Landscape phone to portrait tablet */
  8. @media (max-width: 767px) { ... }
  9.  
  10. /* Landscape phones and down */
  11. @media (max-width: 480px) { ... }

Responsive utility classes

For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

Class Phones 767px and below Tablets 979px to 768px Desktops Default
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

Responsive utilities test case

Resize your browser or load on different devices to test the above classes.

Visible on...

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