Sekafo · Bootstrap ka puo ya Sesotho

E hloka HTML5 doctype

Bootstrap e sebelisa likarolo tse itseng tsa HTML le thepa ea CSS e hlokang ts'ebeliso ea HTML5 doctype. E kenyelletse qalong ea merero eohle ea hau.

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

Typography le lihokela

Bootstrap e beha ponts'o ea mantlha ea lefats'e, typography, le mekhoa ea lihokelo. Ka ho khetheha, re:

Tlosa marginmmeleng
Beha background-color: white;holim'abody
Sebelisa @baseFontFamily, @baseFontSize, le @baseLineHeightlitšoaneleho e le motheo oa rona oa typographic
Beha 'mala oa lihokelo tsa lefats'e ka @linkColorho sebelisa mehala ea likhokahano feela ho eona:hover

Mekhoa ena e ka fumanoa ka hare ho scaffolding.less .

Seta bocha ka Normalize

Ka Bootstrap 2, boloko ba khale ba ho seta botjha bo lahlilwe molemong wa Normalize.css , projeke ea Nicolas Gallagher le Jonathan Neal eo hape e matlafatsang HTML5 Boilerplate . Leha re sebelisa boholo ba Normalize ka hare ho reset.less , re tlositse likarolo tse ling ka ho khetheha bakeng sa Bootstrap.

Mohlala oa grid e phelang

Sistimi ea grid ea Bootstrap ea kamehla e sebelisa likholomo tse 12 , e etsa setshelo se sephara sa 940px ntle le likarolo tse arabelang . Ha faele ea CSS e arabelang e eketsoa, grid e fetoha 724px le 1170px ka bophara ho latela sebaka sa hau sa pono. Ka tlas'a 767px li-viewports, litšiea li fetoha metsi 'me li tsitsa ho ea holimo.

HTML ea mantlha ea grid

Bakeng sa moralo o bonolo oa likholomo tse peli, theha a .row'me u kenye palo e nepahetseng ea .span*likholomo. Kaha ena ke marang-rang a 12-kholomo, e 'ngoe le e' ngoe .span*e na le palo ea likholomo tseo tse 12, 'me e lokela ho lula e kopanya 12 bakeng sa mola o mong le o mong (kapa palo ea likholomo ho motsoali).

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</ div>

Ha re fuoa mohlala ona, re na .span4le .span8, re etsa likholomo tse 12 kaofela le mola o felletseng.

Litšiea tsa offsetting

Tsamaisa likholomo ka ho le letona u sebelisa .offset*lihlopha. Sehlopha se seng le se seng se eketsa karolo e ka ho le letšehali ea kholomo ka kholomo eohle. Ka mohlala, .offset4e tsamaea .span4ka holim'a likholomo tse 'nè.

3 ho tloha 2

3 ho tloha 1

3 ho tloha 2

6 tlhophiso 3

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</ div>

Litšiea tsa Nesting

Ho beha litaba tsa hau ka gridi ea kamehla, eketsa likholomo tse ncha .rowka .span*har'a .span*kholomo e teng. Mela e hlophiloeng e tlameha ho kenyelletsa sehlopha sa likholomo tse kopanyang palo ea likholomo tsa motsoali oa eona.

Karolo ea 1

Mohato oa 2

<div class = "row" > 
  <div class = "span9" > 
    Karolo ea 1
    <div class = "row" > 
      <div class = "span6" > Mohato 2 </div> 
      <div class = "span3" > Mohato 2 </div> 
    </ div>
  </ div>
</ div>

Mohlala oa grid ea mokelikeli o phelang

Sistimi ea grid ea mokelikeli e sebelisa liperesente ho fapana le lipikselse bakeng sa bophara ba likholomo. E na le matla a ho arabela a ts'oanang le sistimi ea rona ea grid e tsitsitseng, e netefatsa likarolo tse nepahetseng bakeng sa liqeto tsa bohlokoa tsa skrineng le lisebelisoa.

Mokelikeli oa motheo oa HTML

Etsa mola ofe kapa ofe "mokelikeli" ka ho fetola .rowho .row-fluid. Lihlopha tsa li-column li lula li tšoana hantle, li etsa hore ho be bonolo ho pota-pota pakeng tsa marang-rang a tsitsitseng le a metsi.

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</ div>

Ho fokotsa metsi

E sebetsa ka tsela e ts'oanang le e tsitsitseng ea grid system offsetting: eketsa kholomong .offset*efe kapa efe ho fokotsa likholomo tse ngata.

4 tlhophiso 4

3 ho tloha 3

6 ho tloha 6

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</ div>

Sehlaha sa metsi

Li-grid tsa metsi li sebelisa sehlaha ka tsela e fapaneng: boemo bo bong le bo bong ba litšiea bo lokela ho eketsa litšiea tse 12. Lebaka ke hobane grid ea mokelikeli e sebelisa liphesente, eseng lipikselse, bakeng sa ho beha bophara.

Mokelikeli 12

Mokelikeli 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    Mokelikeli 12
    <div class = "row-fluid" > 
      <div class = "span6" > 
        Mokelikeli 6
        <div class = "row-fluid" > 
          <div class = "span6" > Mokelikeli 6 </div> 
          <div class = "span6" > Mokelikeli 6 </div> 
        </ div>
      </ div>
      <div class = "span6" > Mokelikeli 6 </div> 
    </ div>
  </ div>
</ div>

Sebopeho se tsitsitseng

E fana ka sebopeho se tloaelehileng sa bophara bo tsitsitseng (le se arabelang ka boikhethelo) se <div class="container">hlokahalang feela.

<'mele>
  <div class = "setshelo" > 
    ...
  </ div>
</ mmele>

Sebopeho sa mokelikeli

Theha leqephe le nang le mokelikeli, le nang le <div class="container-fluid">likholomo tse peli ka -e ntle bakeng sa lits'ebetso le litokomane.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Likahare tsa Sidebar-->
    </ div>
    <div class = "span10" > 
      <!--Dikahare tsa mmele-->
    </ div>
  </ div>
</ div>

E nolofalletsa likarolo tse arabelang

Bulela CSS e arabelang morerong oa hau ka ho kenyelletsa meta tag e nepahetseng le leqephe le eketsehileng la litaele ka har'a <head>tokomane ea hau. Haeba u hlophisitse Bootstrap ho tsoa leqepheng la Customize, u hloka feela ho kenyelletsa meta tag.

<meta name = "viewport" content = "width=sesebediswa-bophara, sekala sa ho qala=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Hlokomela!Bootstrap ha e kenyelle likarolo tse arabelang ka mokhoa o ikhethileng ka nako ena kaha ha se ntho e 'ngoe le e' ngoe e hlokang ho arabela. Sebakeng sa ho khothaletsa bahlahisi ho tlosa tšobotsi ena, re bona ho le molemo ho e nolofalletsa ha ho hlokahala.

Mabapi le Bootstrap e arabelang

Lipotso tsa mecha ea litaba li lumella CSS e tloaelehileng ho latela maemo a 'maloa-karolelano, bophara, mofuta oa pontšo, joalo-joalo-empa hangata e lebisa tlhokomelo ho pota-pota min-widthle max-width.

Fetola bophara ba kholomo ho grid ea rona
Likarolo tsa lintho tse bokellaneng ho e-na le ho phaphamala hohle moo ho hlokahalang
Fetola boholo ba lihlooho le mongolo hore o tšoanele lisebelisoa

Sebelisa lipotso tsa media ka mokhoa o nang le boikarabelo ebile e le qalo feela ho bamameli ba hau ba mehala. Bakeng sa merero e meholoanyane, nahana ka li-code tse inehetseng eseng likarolo tsa lipotso tsa media.

Lisebelisoa tse tšehetsoeng

Bootstrap e ts'ehetsa lipotso tse 'maloa tsa media faeleng e le' ngoe ho thusa ho etsa hore merero ea hau e be e loketseng lisebelisoa tse fapaneng le liqeto tsa skrineng. Mona ke tse kenyellelitsoeng:

Label	Bophara ba sebopeho	Bophara ba kholomo	Bophara ba sekoti
Pontšo e kholo	1200px ho ea holimo	70px	30px
Ea kamehla	980px ho ea holimo	60px	20px
Matlapa a setšoantšo	768px le holimo	42px	20px
Mehala ho matlapa	767px le ka tlase	Litšiea tsa metsi, ha ho bophara bo tsitsitseng
Mehala	480px le ka tlase	Litšiea tsa metsi, ha ho bophara bo tsitsitseng

/* desktop e kholo */
@media ( min - width : 1200px ) { ... }     
 
/* Letlapa la litšoantšo ho sebopeho sa naha le komporo */
@media ( min - width : 768px ) le ( max - width : 979px ) { ... }        
 
/* Fono ea sebopeho sa naha ho ea ho letlapa la litšoantšo */
@media ( max - wide : 767px ) { ... }     
 
/* Mehala ea naha le tlase */
@media ( max - wide : 480px ) { ... }

Lihlopha tsa lisebelisoa tse arabelang

Bakeng sa nts'etsopele e potlakileng ea ho sebelisa mehala, sebelisa litlelase tsena tsa lisebelisoa ho bonts'a le ho pata litaba ka sesebelisoa. Ka tlase ke tafole ea lihlopha tse fumanehang le phello ea tsona ho sebopeho sa potso ea media (e ngotsoeng ke sesebelisoa). Li ka fumanoa ho responsive.less.

Sehlopha	Mehala767px le ka tlase	Matlapa979px ho isa ho 768px	Lisebelisoa tsa desktopEa kamehla
`.visible-phone`	Tse bonahalang	E patiloe	E patiloe
`.visible-tablet`	E patiloe	Tse bonahalang	E patiloe
`.visible-desktop`	E patiloe	E patiloe	Tse bonahalang
`.hidden-phone`	E patiloe	Tse bonahalang	Tse bonahalang
`.hidden-tablet`	Tse bonahalang	E patiloe	Tse bonahalang
`.hidden-desktop`	Tse bonahalang	Tse bonahalang	E patiloe

Nako ea ho sebelisoa

Sebelisa ka mokhoa o fokolang 'me u qobe ho theha mefuta e fapaneng ka ho felletseng ea sebaka se le seng. Ho e-na le hoo, li sebelise ho tlatselletsa tlhahiso ea sesebelisoa ka seng. Lisebelisoa tse arabelang ha lia lokela ho sebelisoa le litafole, 'me ka hona ha li tšehetsoe.

Teko ea tlhahlobo ea lisebelisoa tse arabelang

Fetola boholo ba sebatli sa hau kapa kenya lisebelisoa tse fapaneng ho leka lihlopha tse kaholimo.

E bonahala ho...

Matšoao a matala a bontša hore sehlopha sea bonahala sebakeng sa hau sa pono sa hajoale.

Mohala✔ Fono
Letlapa✔ Letlapa
Desktop✔ Desktop

E patiloe ho...

Mona, matšoao a matala a bonts'a hore sehlopha se patiloe sebakeng sa hau sa pono sa hajoale.

Mohala✔ Fono
Letlapa✔ Letlapa
Desktop✔ Desktop

Sekafola

Litlhophiso tsa lefats'e