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.

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

<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 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ọ atilẹyin

Bootstrap ṣe atilẹyin iwonba awọn ibeere media 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:

Ohun ti wọn ṣe

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ọ

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:

1. Lo ẹyà idahun ti a ṣe akojọpọ, bootstrap-responsive.css
2. Ṣafikun @import “responsive.less” ki o tun ṣajọ Bootstrap
3. Ṣatunṣe ati tun ṣe idahun.less bi 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 : 940px ) { ... }        
 
  // tabili nla
  @media ( min - iwọn : 1200px ) { .. }