Bootstrap

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.

Awọn ara agbaye fun atunto CSS, iwe afọwọkọ, ati awọn ọna asopọ

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

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </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 12 awọn ọwọn pẹlu lilọ idahun

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

Eto akoj aiyipada ti a pese ni Bootstrap nlo awọn ọwọn 12 ti o ṣe jade ni awọn iwọn 724px, 940px (aiyipada laisi CSS idahun to wa), ati 1170px. Ni isalẹ awọn ibudo wiwo 767px, awọn ọwọn naa di ito ati akopọ ni inaro.

  1. <div kilasi = "kana" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div kilasi = "span8" > ... </div> 
  4. </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
4 aiṣedeede 4
3 aiṣedeede 3
3 aiṣedeede 3
8 aiṣedeede 4 
  1. <div kilasi = "kana" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </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
Ipele 2 
  1. <div kilasi = "kana" > 
  2.   <div kilasi = "span6" > 
  3.     Ipele 1 ọwọn
  4.     <div kilasi = "kana" > 
  5.       <div class = "span3" > Ipele 2 </div> 
  6.       <div class = "span3" > Ipele 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Eto akoj ito 12 idahun, awọn ọwọn ti o da lori ogorun

Awọn ọwọn omi

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

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

  1. <div kilasi = "kana-omi" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div kilasi = "span8" > ... </div> 
  4. </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
Omi 6 
  1. <div kilasi = "kana-omi" > 
  2.   <div kilasi = "span12" > 
  3.     Ipele 1 ti ọwọn
  4.     <div kilasi = "kana-omi" > 
  5.       <div class = "span6" > Ipele 2 </div> 
  6.       <div class = "span6" > Ipele 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Akoj isọdibilẹ

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

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.

Awọn apẹrẹ Awọn awoṣe ipilẹ lati ṣẹda awọn oju-iwe wẹẹbu

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

  1. <ara>
  2.   <div kilasi = "apoti" > 
  3.     ...
  4.   </div>
  5. </ 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.

  1. <div class = "container-fluid" > 
  2.   <div kilasi = "kana-omi" > 
  3.     <div kilasi = "span2" > 
  4.       <!--Akoonu ẹgbẹ-->
  5.     </div>
  6.     <div kilasi = "span10" > 
  7.       <!--Akoonu ti ara-->
  8.     </div>
  9.   </div>
  10. </div>

Apẹrẹ idahun Awọn ibeere Media fun ọpọlọpọ awọn ẹrọ ati awọn ipinnu

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.

  1. <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:

  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 ṣ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ṣẹ.

  1.   /* Awọn foonu ala-ilẹ ati isalẹ */
  2.   @media ( max - iwọn : 480px ) { ... }     
  3.  
  4.   /* Foonu ala-ilẹ si tabulẹti aworan */
  5.   @media ( max - iwọn : 767px ) { ... }     
  6.  
  7.   /* Tabulẹti aworan si ala-ilẹ ati tabili tabili */
  8.   @media ( min - iwọn : 768px ) ati ( max - iwọn : 979px ) { ... }        
  9.  
  10.   /* tabili nla */
  11.   @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
.visible-tablet han
.visible-desktop han
.hidden-phone han han
.hidden-tablet han han
.hidden-desktop han han

Ọran idanwo

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

O han loju...

Awọn ami ayẹwo alawọ ewe tọkasi pe kilaasi han ni iwoye lọwọlọwọ rẹ.

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

Ìpamọ́ lórí...

Nibi, awọn ami ayẹwo alawọ ewe fihan pe kilaasi ti wa ni pamọ si oju wiwo rẹ lọwọlọwọ.

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