Eŝafodo · Bootstrap en Esperanto

Postulas HTML5-dokumentotipo

Bootstrap uzas iujn HTML-elementojn kaj CSS-ecojn, kiuj postulas la uzon de la HTML5-dokumentotipo. Enmetu ĝin komence de ĉiuj viaj projektoj.

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

Tipografio kaj ligiloj

Bootstrap starigas bazajn tutmondajn ekranajn, tipografiojn kaj ligajn stilojn. Specife, ni:

Forigu marginsur la korpo
Fiksita background-color: white;sur labody
Uzu la @baseFontFamily, @baseFontSize, kaj @baseLineHeightatributojn kiel nian tipografian bazon
Agordu la tutmondan ligilon koloron per @linkColorkaj apliku ligajn substrekojn nur sur:hover

Tiuj ĉi stiloj troveblas ene de scaffolding.less .

Restarigi per Normaligi

Kun Bootstrap 2, la malnova rekomencigita bloko estis forigita en favoro de Normalize.css , projekto de Nicolas Gallagher kaj Jonathan Neal kiu ankaŭ funkciigas la HTML5 Boilerplate . Dum ni uzas multon de Normaligi ene de nia reset.less , ni forigis kelkajn elementojn specife por Bootstrap.

Ekzemplo de viva krado

La defaŭlta Bootstrap kradsistemo utiligas 12 kolumnojn , farante 940px larĝan ujon sen respondemaj funkcioj ebligitaj. Kun la respondema CSS-dosiero aldonita, la krado adaptiĝas por esti 724px kaj 1170px larĝa depende de via vidfenestro. Sub 767px vidpunktoj, la kolonoj fariĝas fluidaj kaj stakiĝas vertikale.

Baza krado HTML

Por simpla dukolumna aranĝo, kreu a .rowkaj aldonu la taŭgan nombron da .span*kolumnoj. Ĉar ĉi tio estas 12-kolumna krado, ĉiu .span*ampleksas kelkajn el tiuj 12 kolumnoj, kaj ĉiam devus aldoni ĝis 12 por ĉiu vico (aŭ la nombro da kolumnoj en la gepatro).

<div klaso = "vico" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Donita ĉi tiun ekzemplon, ni havas .span4kaj .span8, farante 12 totalajn kolumnojn kaj kompletan vicon.

Ofsecaj kolumnoj

Movu kolumnojn dekstren uzante .offset*klasojn. Ĉiu klaso pliigas la maldekstran marĝenon de kolumno je tuta kolumno. Ekzemple, .offset4moviĝas .span4super kvar kolumnoj.

3 ofseto 2

3 ofseto 1

3 ofseto 2

6 ofseto 3

<div klaso = "vico" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

Nestokolumnoj

Por nesti vian enhavon kun la defaŭlta krado, aldonu novan .rowkaj aron da .span*kolumnoj en ekzistanta .span*kolumno. Nestitaj vicoj devus inkluzivi aron da kolumnoj, kiuj sumiĝas al la nombro da kolumnoj de ĝia gepatro.

Nivelo 1 kolumno

Nivelo 2

<div klaso = "vico" > 
  <div klaso = "span9" > 
    Nivelo 1 kolumno
    <div klaso = "vico" > 
      <div class = "span6" > Nivelo 2 </div> 
      <div class = "span3" > Nivelo 2 </div> 
    </div>
  </div>
</div>

Ekzemplo de viva fluida krado

La fluida kradsistemo uzas procentojn anstataŭ pikselojn por kolonlarĝoj. Ĝi havas la samajn respondemajn kapablojn kiel nia fiksa kradsistemo, certigante taŭgajn proporciojn por ŝlosilaj ekranrezolucioj kaj aparatoj.

Baza fluida krado HTML

Faru ajnan vicon "fluida" ŝanĝante .rowal .row-fluid. La kolumnaj klasoj restas ekzakte la samaj, faciligante ŝanĝi inter fiksaj kaj fluidaj kradoj.

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

Fluida kompenso

Funkcias same kiel la fiksa kradsistemo kompenso: aldonu .offset*al iu ajn kolumno por kompensi per tiom da kolumnoj.

4 ofseto 4

3 ofseto 3

6 ofseto 6

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

Fluida nestado

Fluaj kradoj utiligas nestadon alimaniere: ĉiu nestita nivelo de kolonoj devus aldoni ĝis 12 kolumnojn. Ĉi tio estas ĉar la fluida krado uzas procentojn, ne pikselojn, por fiksi larĝojn.

Fluido 12

Fluido 6

<div class = "vic-fluid" > 
  <div class = "span12" > 
    Fluido 12
    <div class = "vic-fluid" > 
      <div class = "span6" > 
        Fluido 6
        <div class = "vic-fluid" > 
          <div class = "span6" > Fluido 6 </div> 
          <div class = "span6" > Fluido 6 </div> 
        </div>
      </div>
      <div class = "span6" > Fluido 6 </div> 
    </div>
  </div>
</div>

Fiksa aranĝo

Provizas komunan fikslarĝan (kaj laŭvole respondeman) aranĝon kun nur <div class="container">bezonata.

<korpo>
  <div class = "ujo" > 
    ...
  </div>
</korpo>

Fluida aranĝo

Kreu fluidan, dukolumnan paĝon kun <div class="container-fluid">—bonege por aplikoj kaj dokumentoj.

<div class = "ujo-fluido" > 
  <div class = "vic-fluid" > 
    <div klaso = "span2" > 
      <!--Flankmenuo enhavo-->
    </div>
    <div class = "span10" > 
      <!--Korpa enhavo-->
    </div>
  </div>
</div>

Ebligante respondemajn funkciojn

Ŝaltu respondema CSS en via projekto inkludante la taŭgan meta-etikedon kaj plian stilfolion ene <head>de via dokumento. Se vi kompilis Bootstrap el la paĝo Agordu, vi devas nur inkluzivi la meta-etikedon.

<meta name = "vidportujo" content = "width=device-width, initial-scale=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stilfolio" >

Atentu!Bootstrap ne inkluzivas respondemajn funkciojn defaŭlte nuntempe ĉar ne ĉio devas esti respondema. Anstataŭ instigi programistojn forigi ĉi tiun funkcion, ni pensas, ke plej bone ebligu ĝin laŭbezone.

Pri respondema Bootstrap

Amaskomunikilaraj demandoj ebligas kutiman CSS bazitan sur kelkaj kondiĉoj - proporcioj, larĝoj, ekrantipo, ktp - sed kutime fokusiĝas ĉirkaŭ min-widthkaj max-width.

Modifi la larĝon de kolumno en nia krado
Staku elementojn anstataŭ flosi kie ajn necese
Regrandigu titolojn kaj tekston por esti pli taŭga por aparatoj

Uzu amaskomunikilajn demandojn respondece kaj nur kiel komencon al viaj moveblaj spektantaroj. Por pli grandaj projektoj, konsideru dediĉitajn kodbazojn kaj ne tavolojn de amaskomunikilaj demandoj.

Subtenataj aparatoj

Bootstrap subtenas kelkajn amaskomunikilajn demandojn en ununura dosiero por helpi fari viajn projektojn pli taŭgaj en malsamaj aparatoj kaj ekranrezolucioj. Jen kio estas inkluzivita:

Etikedo	Larĝeco de aranĝo	Larĝo de kolumno	Larĝo de kanaleto
Granda ekrano	1200px kaj pli	70 px	30 px
Defaŭlte	980 px kaj pli	60 px	20px
Portretaj tabuletoj	768px kaj pli	42 px	20px
Telefonoj al tablojdoj	767 px kaj malsupre	Fluaj kolumnoj, sen fiksaj larĝoj
Telefonoj	480px kaj malsupre	Fluaj kolumnoj, sen fiksaj larĝoj

/* Granda labortablo */
@media ( min - larĝo : 1200 px ) { ... }     
 
/* Portreta tablojdo al pejzaĝo kaj labortablo */
@media ( min - larĝo : 768 px ) kaj ( maksimuma - larĝo : 979 px ) { ... }        
 
/* Pejzaĝa telefono al portreta tablojdo */
@media ( maks - larĝo : 767 px ) { ... }     
 
/* Pejzaĝaj telefonoj kaj malsupren */
@media ( maks - larĝo : 480 px ) { ... }

Respondema utileco klasoj

Por pli rapida evoluado por poŝtelefono, uzu ĉi tiujn utilajn klasojn por montri kaj kaŝi enhavon per aparato. Malsupre estas tabelo de la disponeblaj klasoj kaj ilia efiko al donita amaskomunikilara demanda aranĝo (etikedita per aparato). Ili troveblas en responsive.less.

Klaso	Telefonoj767 px kaj malsupre	Tablojdoj979 px ĝis 768 px	LabortablojDefaŭlte
`.visible-phone`	Videbla	Kaŝita	Kaŝita
`.visible-tablet`	Kaŝita	Videbla	Kaŝita
`.visible-desktop`	Kaŝita	Kaŝita	Videbla
`.hidden-phone`	Kaŝita	Videbla	Videbla
`.hidden-tablet`	Videbla	Kaŝita	Videbla
`.hidden-desktop`	Videbla	Videbla	Kaŝita

Kiam uzi

Uzu sur limigita bazo kaj evitu krei tute malsamajn versiojn de la sama retejo. Anstataŭe, uzu ilin por kompletigi la prezenton de ĉiu aparato. Respondema iloj ne devus esti uzataj kun tabeloj, kaj kiel tiaj ne estas subtenataj.

Respondema utileco testo kazo

Regrandigu vian retumilon aŭ ŝarĝu sur malsamaj aparatoj por testi la suprajn klasojn.

Videbla sur...

Verdaj markmarkoj indikas, ke klaso estas videbla en via nuna vidfenestro.

Telefono✔ Telefono
Tablojdo✔ Tablojdo
Surtabla✔ Labortablo

Kaŝita sur...

Ĉi tie, verdaj markmarkoj indikas, ke tiu klaso estas kaŝita en via nuna vidfenestro.

Telefono✔ Telefono
Tablojdo✔ Tablojdo
Surtabla✔ Labortablo

Skafaldo

Tutmondaj agordoj