Ṣiṣapẹrẹ · Twitter Bootstrap ni Yorùbá

Nilo HTML5 doctype

Bootstrap ṣe lilo awọn eroja HTML kan ati awọn ohun-ini CSS ti o nilo lilo HTML5 doctype. Fi sii ni ibẹrẹ ti gbogbo awọn iṣẹ akanṣe rẹ.

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

Typography ati awọn ọna asopọ

Bootstrap ṣeto ifihan ipilẹ agbaye, iwe kikọ, ati awọn ọna ọna asopọ. Ni pato, awa:

Yọ kuro marginlori 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

Awọn aṣa wọnyi le wa laarin scaffolding.less .

Tun nipasẹ Normalize

Pẹlu Bootstrap 2, bulọọki atunṣe atijọ ti lọ silẹ ni ojurere ti Normalize.css , iṣẹ akanṣe nipasẹ Nicolas Gallagher ti o tun ṣe agbara HTML5 Boilerplate . Lakoko ti a lo pupọ ti Normalize laarin wa reset.less , a ti yọ diẹ ninu awọn eroja pataki fun Bootstrap.

Live akoj apẹẹrẹ

Eto akoj Bootstrap aiyipada lo awọn ọwọn 12 , ṣiṣe fun eiyan jakejado 940px laisi awọn ẹya idahun ṣiṣẹ. Pẹlu faili CSS idahun ti a ṣafikun, akoj ṣe adaṣe lati jẹ 724px ati 1170px fife da lori oju wiwo rẹ. Ni isalẹ awọn ibudo wiwo 767px, awọn ọwọn naa di ito ati akopọ ni inaro.

HTML akoj ipilẹ

Fun ipilẹ iwe meji ti o rọrun, ṣẹda kan .rowki o ṣafikun nọmba awọn .span*ọwọn ti o yẹ. Bi yi ni a 12-iwe akoj, kọọkan .span*pan nọmba kan ti awon 12 ọwọn, ati ki o yẹ nigbagbogbo fi soke 12 fun kọọkan kana (tabi awọn nọmba ti ọwọn ninu awọn obi).

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

Fun apẹẹrẹ yii, a ni .span4ati .span8, ṣiṣe fun 12 lapapọ awọn ọwọn ati laini pipe.

Awọn ọwọn aiṣedeede

Gbe awọn ọwọn si apa osi nipa lilo .offset*awọn kilasi. Kọọkan kilasi mu ki awọn osi ala ti a iwe nipa kan gbogbo iwe. Fun apẹẹrẹ, .offset4gbigbe .span4lori awọn ọwọn mẹrin.

3 aiṣedeede 2

3 aiṣedeede 1

3 aiṣedeede 2

6 asan 3

<div kilasi = "kana" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

Awọn ọwọn itẹle

Lati ṣe itẹ-ẹiyẹ akoonu rẹ pẹlu akoj aiyipada, ṣafikun tuntun .rowati ṣeto awọn .span*ọwọn laarin iwe to wa tẹlẹ .span*. 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ẹ.

Apeere

Nibi awọn .span4ọwọn itẹ-ẹiyẹ meji ti wa ni gbe laarin kan .span8.

Ipele 1 ti ọwọn

Ipele 2

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

Live ito akoj apẹẹrẹ

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

Ipilẹ ito akoj HTML

Ṣe eyikeyi kana "omi" nipa yiyipada .rowsi .row-fluid. Awọn kilasi ọwọn duro deede kanna, ti o jẹ ki o rọrun lati yi pada laarin awọn grids ti o wa titi ati omi.

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

Aiṣedeede omi

Ṣiṣẹ ni ọna kanna bi aiṣedeede eto akoj ti o wa titi: ṣafikun .offset*si eyikeyi iwe lati aiṣedeede nipasẹ ọpọlọpọ awọn ọwọn yẹn.

4 aiṣedeede 4

3 aiṣedeede 3

6 ifesewonse 6

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

Tiwon ito

Itẹle pẹlu awọn akoj ito jẹ iyatọ diẹ: nọmba awọn ọwọn itẹ-ẹiyẹ ko yẹ ki o baamu nọmba awọn ọwọn ti obi. Dipo, kọọkan ipele ti iteeye ọwọn ti wa ni tun nitori kọọkan kana gba soke 100% ti awọn obi iwe.

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>

Ifilelẹ ti o wa titi

Pese ifilelẹ-iwọn ti o wa titi ti o wọpọ (ati idahun iyan) pẹlu <div class="container">ibeere nikan.

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

Ifilelẹ omi

Ṣẹda ito kan, oju-iwe ọwọn meji pẹlu — o <div class="container-fluid">dara fun awọn ohun elo ati awọn iwe aṣẹ.

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

Muu awọn ẹya idahun ṣiṣẹ

Tan CSS ti o ṣe idahun ninu iṣẹ akanṣe rẹ nipa pẹlu pẹlu tag meta to dara ati iwe aṣa afikun laarin iwe <head>rẹ. Ti o ba ti ṣajọ Bootstrap lati oju-iwe Ṣe akanṣe, o nilo nikan pẹlu aami meta.

<meta name = "viewport" akoonu = "iwọn=iwọn-ẹrọ, ibẹrẹ-scale=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Efeti sile! Bootstrap ko pẹlu awọn ẹya idahun nipasẹ aiyipada ni akoko yii nitori 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 mu ṣiṣẹ bi o ti nilo.

Nipa Bootstrap idahun

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 foonu	480px ati isalẹ	Awọn ọwọn omi, ko si awọn iwọn ti o wa titi
Awọn foonu 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

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

Awọn kilasi ohun elo idahun

Fun idagbasoke ore-alagbeka yiyara, lo awọn kilasi iwulo wọnyi fun iṣafihan ati fifipamo akoonu nipasẹ ẹrọ. Ni isalẹ ni tabili ti awọn kilasi ti o wa 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 foonu767px ati isalẹ	Awọn tabulẹti979px si 768px	Awọn tabili itẹweAiyipada
`.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

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.

Idahun awọn ohun elo idanwo ọran

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

Scafolding

Eto agbaye