Scaffolding · Bootstrap ing basa Jawa

Mbutuhake doctype HTML5

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

<!DOCTYPE html>
<html lang = "en" > 
  ...
</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.

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.

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

<div class = "baris" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</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 kabeh kolom. Contone, .offset4gerakane .span4liwat papat kolom.

3 ngimbangi 2

3 ngimbangi 1

3 ngimbangi 2

6 uwal 3

<div class = "baris" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</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

<div class = "baris" > 
  <div class = "span9" > 
    Level 1 kolom
    <div class = "baris" > 
      <div class = "span6" > Level 2 </div> 
      <div class = "span3" > Level 2 </div> 
    </div>
  </div>
</div>

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.

HTML grid cairan dhasar

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

<div class = "baris-fluida" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Cairan offsetting

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

4 ngimbangi 4

3 ngimbangi 3

6 uwal 6

<div class = "baris-fluida" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

Cairan nesting

Cairan grids nggunakake nesting beda: saben tingkat nested kolom kudu nambah nganti 12 kolom. Iki amarga kothak cairan nggunakake persentase, dudu piksel, kanggo nyetel lebar.

Cairan 12

Cairan 6

<div class = "baris-fluida" > 
  <div class = "span12" > 
    Cairan 12
    <div class = "baris-fluida" > 
      <div class = "span6" > 
        Cairan 6
        <div class = "baris-fluida" > 
          <div class = "span6" > Cairan 6 </div> 
          <div class = "span6" > Cairan 6 </div> 
        </div>
      </div>
      <div class = "span6" > Cairan 6 </div> 
    </div>
  </div>
</div>

Tata letak tetep

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

<awak>
  <div class = "wadhah" > 
    ...
  </div>
</awak>

Tata letak cairan

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

<div class = "wadah-cairan" > 
  <div class = "baris-fluida" > 
    <div class = "span2" > 
      <!--Konten sidebar-->
    </div>
    <div class = "span10" > 
      <!--Isi awak-->
    </div>
  </div>
</div>

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.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
<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

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

/* Desktop gedhe */
@media ( min - jembaré : 1200px ) { ... }     
 
/* Potret tablet menyang lanskap lan desktop */
@media ( min - jembaré : 768px ) lan ( maks - jembaré : 979px ) { ... }        
 
/* Telpon lanskap menyang tablet potret */
@media ( maks - jembaré : 767px ) { ... }     
 
/* Telpon lanskap lan mudhun */
@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	didhelikake	didhelikake
`.visible-tablet`	didhelikake	Katon	didhelikake
`.visible-desktop`	didhelikake	didhelikake	Katon
`.hidden-phone`	didhelikake	Katon	Katon
`.hidden-tablet`	Katon	didhelikake	Katon
`.hidden-desktop`	Katon	Katon	didhelikake

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

Ngowahi 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

Perancah

Setelan global