Scafolding

Bootstrap ti wa ni itumọ ti lori idahun 12-iwe akoj. A tun ti ṣafikun-ti o wa titi ati awọn ipilẹ iwọn-omi ti o da lori eto yẹn.

Nilo HTML5 doctype

Bootstrap ṣe lilo awọn eroja HTML ati awọn ohun-ini CSS ti o nilo lilo HTML5 doctype. Rii daju lati ṣafikun rẹ ni ibẹrẹ ti gbogbo oju-iwe Bootstrapped ninu iṣẹ akanṣe rẹ.

<!DOCTYPE html>
<html lang = "en" > 
  ...
</html>

Typography ati awọn ọna asopọ

Laarin faili scaffolding.less , a ṣeto ifihan ipilẹ agbaye, iwe-kikọ, ati awọn ọna ọna asopọ. Ni pato, awa:

Yọ ala kuro lori ara
Ṣeto background-color: white;loribody
Lo @baseFontFamily, @baseFontSize, ati @baseLineHeightawọn abuda bi ipilẹ iwe-kikọ wa
Ṣeto awọ ọna asopọ agbaye nipasẹ @linkColorati lo awọn laini ọna asopọ nikan lori:hover

Tun nipasẹ Normalize

Bi ti Bootstrap 2, atunto CSS ti aṣa ti wa lati lo awọn eroja lati Normalize.css , iṣẹ akanṣe nipasẹ Nicolas Gallagher ti o tun ṣe agbara HTML5 Boilerplate .

Atunto tuntun tun le rii ni reset.less , ṣugbọn pẹlu ọpọlọpọ awọn eroja kuro fun kukuru ati deede.

Eto akoj aiyipada ti a pese gẹgẹbi apakan Bootstrap jẹ 940px jakejado, akoj 12-iwe .

O tun ni awọn iyatọ idahun mẹrin fun ọpọlọpọ awọn ẹrọ ati awọn ipinnu: foonu, aworan tabulẹti, ala-ilẹ tabili ati awọn tabili itẹwe kekere, ati awọn tabili itẹwe nla nla.

<div kilasi = "kana" > 
  <div class = "span4" > ... </div> 
  <div kilasi = "span8" > ... </div> 
</div>

Gẹgẹbi a ṣe han nibi, ipilẹ ipilẹ le ṣee ṣẹda pẹlu “awọn ọwọn” meji, ọkọọkan ti o ni nọmba kan ti awọn ọwọn ipilẹ 12 ti a ṣalaye gẹgẹ bi apakan ti eto akoj wa.

Awọn ọwọn aiṣedeede

4 aiṣedeede 4

3 aiṣedeede 3

8 aiṣedeede 4

<div kilasi = "kana" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

Awọn ọwọn itẹle

Pẹlu eto akoj aimi (ti kii-omi) ni Bootstrap, itẹ-ẹiyẹ rọrun. Lati ṣe itẹ-ẹiyẹ akoonu rẹ, kan ṣafikun tuntun .rowati ṣeto awọn .span*ọwọn laarin ọwọn to wa tẹlẹ .span*.

Apeere

Awọn ori ila ti o ni itẹ-ẹiyẹ yẹ ki o ni akojọpọ awọn ọwọn ti o fi kun si nọmba awọn ọwọn ti obi rẹ. Fun apẹẹrẹ, awọn .span3ọwọn itẹ-ẹiyẹ meji yẹ ki o gbe laarin .span6.

Ipele 1 ti ọwọn

Ipele 2

<div kilasi = "kana" > 
  <div kilasi = "span12" > 
    Ipele 1 ti ọwọn
    <div kilasi = "kana" > 
      <div class = "span6" > Ipele 2 </div> 
      <div class = "span6" > Ipele 2 </div> 
    </div>
  </div>
</div>

Awọn ọwọn omi

Awọn ogorun, kii ṣe awọn piksẹli

Eto akoj ito nlo awọn ipin ogorun fun awọn iwọn ọwọn dipo awọn piksẹli ti o wa titi. O tun ni awọn iyatọ idahun kanna bi eto akoj ti o wa titi wa, ni idaniloju awọn iwọn to dara fun awọn ipinnu iboju bọtini ati awọn ẹrọ.

Awọn ori ila omi

Ṣe omi ila nirọrun nipa yiyipada .rowsi .row-fluid. Awọn ọwọn naa duro deede kanna, ti o jẹ ki o taara taara lati yi pada laarin awọn ipilẹ ti o wa titi ati ito.

Siṣamisi

<div kilasi = "kana-omi" > 
  <div class = "span4" > ... </div> 
  <div kilasi = "span8" > ... </div> 
</div>

Tiwon ito

Itẹle pẹlu awọn akoj ito jẹ iyatọ diẹ: nọmba awọn ọwọn itẹ-ẹiyẹ ko nilo lati baramu obi naa. Dipo, awọn ọwọn rẹ tun wa ni ipele kọọkan nitori ila kọọkan gba to 100% ti iwe obi.

Omi 12

Omi 6

<div kilasi = "kana-omi" > 
  <div kilasi = "span12" > 
    Ipele 1 ti ọwọn
    <div kilasi = "kana-omi" > 
      <div class = "span6" > Ipele 2 </div> 
      <div class = "span6" > Ipele 2 </div> 
    </div>
  </div>
</div>

Ayípadà	Iwọn aiyipada	Apejuwe
`@gridColumns`	12	Nọmba ti awọn ọwọn
`@gridColumnWidth`	60px	Iwọn ti ọwọn kọọkan
`@gridGutterWidth`	20px	Aaye odi laarin awọn ọwọn
`@siteWidth`	Iṣiro apao ti gbogbo awọn ọwọn ati awọn gutters	Ka nọmba awọn ọwọn ati awọn gota lati ṣeto iwọn ti `.container-fixed()`mixin

Awọn oniyipada ni KERE

Ti a ṣe sinu Bootstrap jẹ iwonba ti awọn oniyipada fun isọdi eto grid 940px aiyipada, ti o ni akọsilẹ loke. Gbogbo awọn oniyipada fun akoj ti wa ni ipamọ ni variables.less.

Bawo ni lati ṣe akanṣe

Iyipada akoj tumọ si iyipada awọn @grid*oniyipada mẹta ati iṣakojọpọ Bootstrap. Yi awọn oniyipada akoj pada ni variables.less ki o lo ọkan ninu awọn ọna mẹrin ti a ṣe akọsilẹ lati tun ṣajọ . Ti o ba n ṣafikun awọn ọwọn diẹ sii, rii daju lati ṣafikun CSS fun awọn ti o wa ni grid.less.

Duro idahun

Isọdi ti akoj nikan ṣiṣẹ ni ipele aiyipada, akoj 940px. Lati ṣetọju awọn abala idahun ti Bootstrap, iwọ yoo tun ni lati ṣe akanṣe awọn akoj ni idahun.less.

Ifilelẹ ti o wa titi

Aiyipada ati irọrun 940px jakejado, ifilelẹ aarin fun o kan nipa oju opo wẹẹbu eyikeyi tabi oju-iwe ti a pese nipasẹ ẹyọkan <div class="container">.

<ara>
  <div kilasi = "apoti" > 
    ...
  </div>
</ ara>

Ifilelẹ omi

<div class="container-fluid">yoo fun ni rọ iwe be, min- ati max-iwọn, ati ki o kan osi-ọwọ legbe. O jẹ nla fun awọn lw ati awọn docs.

<div class = "container-fluid" > 
  <div kilasi = "kana-omi" > 
    <div kilasi = "span2" > 
      <!--Akoonu ẹgbẹ-->
    </div>
    <div kilasi = "span10" > 
      <!--Akoonu ti ara-->
    </div>
  </div>
</div>

Awọn ẹrọ idahun

Ohun ti won se

Awọn ibeere media gba laaye fun CSS aṣa ti o da lori nọmba awọn ipo-ipin, awọn iwọn, iru ifihan, ati bẹbẹ lọ—ṣugbọn nigbagbogbo fojusi ni ayika min-widthati max-width.

Ṣe atunṣe iwọn ti ọwọn ninu akoj wa
Awọn eroja akopọ dipo ti leefofo nibikibi ti o jẹ dandan
Ṣe atunṣe awọn akọle ati ọrọ lati jẹ deede diẹ sii fun awọn ẹrọ

Lo awọn ibeere media ni ifojusọna ati ki o nikan bi ibẹrẹ si awọn olugbo alagbeka rẹ. Fun awọn iṣẹ akanṣe nla, ṣe akiyesi awọn ipilẹ koodu igbẹhin kii ṣe awọn ipele ti awọn ibeere media.

Awọn ẹrọ atilẹyin

Bootstrap ṣe atilẹyin iwonba ti awọn ibeere media ni faili kan lati ṣe iranlọwọ lati jẹ ki awọn iṣẹ akanṣe rẹ yẹ diẹ sii lori awọn ẹrọ oriṣiriṣi ati awọn ipinnu iboju. Eyi ni ohun ti o wa ninu:

Aami	Ìfibú ìfilélẹ̀	Iwọn ọwọn	Ibú gota
Awọn fonutologbolori	480px ati isalẹ	Awọn ọwọn omi, ko si awọn iwọn ti o wa titi
Awọn fonutologbolori si awọn tabulẹti	767px ati isalẹ	Awọn ọwọn omi, ko si awọn iwọn ti o wa titi
Awọn tabulẹti aworan	768px ati loke	42px	20px
Aiyipada	980px ati si oke	60px	20px
Ifihan nla	1200px ati si oke	70px	30px

Nbeere tag meta

Lati rii daju pe awọn ẹrọ ṣe afihan awọn oju-iwe idahun daradara, pẹlu tag meta wiwo wiwo.

<meta name = "viewport" akoonu = "iwọn=iwọn-ẹrọ, ibẹrẹ-scale=1.0" >

Lilo awọn ibeere media

Bootstrap ko pẹlu awọn ibeere media wọnyi laifọwọyi, ṣugbọn agbọye ati fifi wọn kun rọrun pupọ ati pe o nilo iṣeto kekere. O ni awọn aṣayan diẹ fun pẹlu awọn ẹya idahun ti Bootstrap:

Lo ẹyà idahun ti a ṣe akojọpọ, bootstrap-responsive.css
Ṣafikun @import “responsive.less” ki o tun ṣajọ Bootstrap
Ṣatunṣe ati ṣajọ responsive.less bi faili lọtọ

Kilode ti o ko kan ṣafikun rẹ? Ni otitọ, kii ṣe ohun gbogbo nilo lati ṣe idahun. Dipo ki o gba awọn olupilẹṣẹ niyanju lati yọ ẹya yii kuro, a ro pe o dara julọ lati muu ṣiṣẹ.

  // Awọn foonu ala-ilẹ ati isalẹ
  @media ( max - iwọn : 480px ) { ... }     
 
  // Foonu ala-ilẹ si tabulẹti aworan
  @media ( max - iwọn : 768px ) { ... }     
 
  // Tabulẹti aworan si ala-ilẹ ati tabili tabili
  @media ( min - iwọn : 768px ) ati ( max - iwọn : 980px ) { ... }        
 
  // tabili nla
  @media ( min - iwọn : 1200px ) { .. }

Awọn kilasi ohun elo idahun

Kini wọn

Fun idagbasoke ore-alagbeka yiyara, lo awọn kilasi IwUlO ipilẹ wọnyi fun iṣafihan ati fifipamọ akoonu nipasẹ ẹrọ.

Nigbati lati lo

Lo lori ipilẹ to lopin ati yago fun ṣiṣẹda awọn ẹya ti o yatọ patapata ti aaye kanna. Dipo, lo wọn lati ṣe iranlowo igbejade ẹrọ kọọkan.

Fun apẹẹrẹ, o le fihan a <select>ano fun nav lori mobile ipalemo, sugbon ko lori wàláà tabi tabili.

Awọn kilasi atilẹyin

Ti o han nibi ni tabili awọn kilasi ti a ṣe atilẹyin ati ipa wọn lori ipilẹ ibeere media ti a fun (ti aami nipasẹ ẹrọ). Wọn le wa ninu responsive.less.

Kilasi	Awọn foonu480px ati isalẹ	Awọn tabulẹti767px ati isalẹ	Awọn tabili itẹwe768px ati loke
`.visible-phone`	han	Farasin	Farasin
`.visible-tablet`	Farasin	han	Farasin
`.visible-desktop`	Farasin	Farasin	han
`.hidden-phone`	Farasin	han	han
`.hidden-tablet`	han	Farasin	han
`.hidden-desktop`	han	han	Farasin

Ọran idanwo

Ṣe atunṣe aṣawakiri rẹ tabi fifuye lori awọn ẹrọ oriṣiriṣi lati ṣe idanwo awọn kilasi ti o wa loke.

O han loju...

Foonu✔ Foonu
Tabulẹti✔ Tabulẹti
Ojú-iṣẹ✔ Tabili

Ìpamọ́ lórí...

Foonu✔ Foonu
Tabulẹti✔ Tabulẹti
Ojú-iṣẹ✔ Tabili