Bootstrap

Skafaldo

Bootstrap estas konstruita sur respondema 12-kolumna krado. Ni ankaŭ inkludis fiksajn kaj fluidajn larĝajn aranĝojn bazitajn sur tiu sistemo.

Tutmondaj stiloj por CSS rekomencigita, tipografio kaj ligiloj

Postulas HTML5-dokumentotipo

Bootstrap uzas HTML-elementojn kaj CSS-ecojn, kiuj postulas la uzon de la HTML5-dokumentotipo. Nepre inkluzivu ĝin komence de ĉiu Bootstrapped paĝo en via projekto.

  1. <!DOCTYPE html>
  2. <html lang = "eo" > 
  3.   ...
  4. </html>

Tipografio kaj ligiloj

Ene de la dosiero scaffolding.less , ni starigas bazajn tutmondajn ekranajn, tipografiojn kaj ligajn stilojn. Specife, ni:

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

Restarigi per Normaligi

Ekde Bootstrap 2, la tradicia CSS-restarigo evoluis por uzi elementojn de Normalize.css , projekto de Nicolas Gallagher , kiu ankaŭ funkciigas la HTML5 Boilerplate .

La nova reset ankoraŭ troveblas en reset.less , sed kun multaj elementoj forigitaj por koncizeco kaj precizeco.

Defaŭlta kradsistemo 12 kolumnoj kun respondema tordaĵo

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

La defaŭlta kradsistemo provizita en Bootstrap utiligas 12 kolumnojn kiuj bildiĝas je larĝoj de 724px, 940px (defaŭlte sen respondema CSS inkluzivita), kaj 1170px. Sub 767px vidpunktoj, la kolonoj fariĝas fluidaj kaj stakiĝas vertikale.

  1. <div klaso = "vico" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Kiel montrite ĉi tie, baza aranĝo povas esti kreita kun du "kolumnoj", ĉiu ampleksanta kelkajn el la 12 fundamentaj kolumnoj, kiujn ni difinis kiel parto de nia kradsistemo.


Ofsecaj kolumnoj

4
4 ofseto 4
3 ofseto 3
3 ofseto 3
8 ofseto 4 
  1. <div klaso = "vico" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Nestokolumnoj

Kun la senmova (ne-fluida) kradsistemo en Bootstrap, nestado estas facila. Por nesti vian enhavon, simple aldonu novan .rowkaj aron da .span*kolumnoj en ekzistanta .span*kolumno.

Ekzemplo

Nestitaj vicoj devus inkluzivi aron da kolumnoj, kiuj sumiĝas al la nombro da kolumnoj de ĝia gepatro. Ekzemple, du nestitaj .span3kolumnoj devus esti metitaj ene de .span6.

Nivelo 1 de kolumno
Nivelo 2
Nivelo 2 
  1. <div klaso = "vico" > 
  2.   <div class = "span6" > 
  3.     Nivelo 1 kolumno
  4.     <div klaso = "vico" > 
  5.       <div class = "span3" > Nivelo 2 </div> 
  6.       <div class = "span3" > Nivelo 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Fluida kradsistemo 12 respondemaj, procent-bazitaj kolumnoj

Fluaj kolumnoj

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

Elcentoj, ne pikseloj

La fluida kradsistemo uzas procentojn por kolumnlarĝoj anstataŭe de fiksaj pikseloj. Ĝi ankaŭ havas la samajn respondemajn variojn kiel nia fiksa kradsistemo, certigante taŭgajn proporciojn por ŝlosilaj ekranrezolucioj kaj aparatoj.

Fluaj vicoj

Faru ajnan vicon fluida simple ŝanĝante .rowal .row-fluid. La kolumnoj restas ekzakte la samaj, igante ĝin tre simpla ŝanĝi inter fiksaj kaj fluidaj aranĝoj.

Markado

  1. <div class = "vic-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Fluida nestado

Nestumado kun fluidaj kradoj estas iom malsama: la nombro da nestitaj kolumnoj ne bezonas kongrui kun la gepatro. Anstataŭe, viaj kolumnoj estas rekomencigitaj ĉe ĉiu nivelo ĉar ĉiu vico okupas 100% de la gepatra kolumno.

Fluido 12
Fluido 6
Fluido 6 
  1. <div class = "vic-fluid" > 
  2.   <div class = "span12" > 
  3.     Nivelo 1 de kolumno
  4.     <div class = "vic-fluid" > 
  5.       <div class = "span6" > Nivelo 2 </div> 
  6.       <div class = "span6" > Nivelo 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Krado personigo

Variablo Defaŭlta valoro Priskribo
@gridColumns 12 Nombro da kolumnoj
@gridColumnWidth 60 px Larĝo de ĉiu kolumno
@gridGutterWidth 20px Negativa spaco inter kolumnoj

Variabloj en MLES

Enkonstruita en Bootstrap estas manpleno da variabloj por agordi la defaŭltan 940px kradsistemon, dokumentita supre. Ĉiuj variabloj por la krado estas stokitaj en variabloj.malpli.

Kiel personecigi

Modifi la kradon signifas ŝanĝi la tri @grid*variablojn kaj rekompili Bootstrap. Ŝanĝu la kradajn variablojn en variables.less kaj uzu unu el la kvar manieroj dokumentitaj por rekompili . Se vi aldonas pliajn kolumnojn, nepre aldonu la CSS por tiuj en grid.less.

Restante respondema

Personigo de la krado funkcias nur ĉe la defaŭlta nivelo, la 940px krado. Por konservi la respondemajn aspektojn de Bootstrap, vi ankaŭ devos personecigi la kradojn en responsive.less.

Aranĝoj Bazaj ŝablonoj por krei retpaĝojn

Fiksa aranĝo

La defaŭlta kaj simpla 940px-larĝa, centrita aranĝo por preskaŭ ajna retejo aŭ paĝo provizita de ununura <div class="container">.

  1. <korpo>
  2.   <div class = "ujo" > 
  3.     ...
  4.   </div>
  5. </korpo>

Fluida aranĝo

<div class="container-fluid">donas flekseblan paĝstrukturon, min- kaj max-larĝojn, kaj maldekstran flankbreton. Ĝi estas bonega por programoj kaj dokumentoj.

  1. <div class = "ujo-fluido" > 
  2.   <div class = "vic-fluid" > 
  3.     <div klaso = "span2" > 
  4.       <!--Flankmenuo enhavo-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Korpa enhavo-->
  8.     </div>
  9.   </div>
  10. </div>

Respondema dezajno Amaskomunikilaraj demandoj por diversaj aparatoj kaj rezolucioj

Respondema aparatoj

Kion ili faras

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
Smartphones 480px kaj malsupre Fluaj kolumnoj, sen fiksaj larĝoj
Smartphones al tablojdoj 767 px kaj malsupre Fluaj kolumnoj, sen fiksaj larĝoj
Portretaj tabuletoj 768px kaj pli 42 px 20px
Defaŭlte 980 px kaj pli 60 px 20px
Granda ekrano 1200px kaj pli 70 px 30 px

Postulas meta-etikedon

Por certigi, ke aparatoj montras respondajn paĝojn ĝuste, inkluzivu la meta-etikedon de vidpunkto.

  1. <meta name = "vidportujo" content = "width=device-width, initial-scale=1.0" >

Uzante la amaskomunikilajn demandojn

Bootstrap ne aŭtomate inkluzivas ĉi tiujn amaskomunikilajn demandojn, sed kompreni kaj aldoni ilin estas tre facila kaj postulas minimuman agordon. Vi havas kelkajn eblojn por inkluzivi la respondemajn funkciojn de Bootstrap:

  1. Uzu la kompilitan respondeman version, bootstrap-responsive.css
  2. Aldonu @import "responsive.less" kaj rekompilu Bootstrap
  3. Modifi kaj rekompili responsive.less kiel apartan dosieron

Kial ne simple inkluzivi ĝin? Verdire, ne ĉio devas esti respondema. Anstataŭ instigi programistojn forigi ĉi tiun funkcion, ni pensas, ke plej bone ebligu ĝin.

  1.   /* Pejzaĝaj telefonoj kaj malsupren */
  2.   @media ( maks - larĝo : 480 px ) { ... }     
  3.  
  4.   /* Pejzaĝa telefono al portreta tablojdo */
  5.   @media ( maks - larĝo : 767 px ) { ... }     
  6.  
  7.   /* Portreta tablojdo al pejzaĝo kaj labortablo */
  8.   @media ( min - larĝo : 768 px ) kaj ( max - width : 979 px ) { ... }        
  9.  
  10.   /* Granda labortablo */
  11.   @media ( min - larĝo : 1200 px ) { ... }

Respondema utileco klasoj

Kio ili estas

Por pli rapida evoluado por poŝtelefono, uzu ĉi tiujn bazajn utilajn klasojn por montri kaj kaŝi enhavon per aparato.

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.

Ekzemple, vi povus montri <select>elementon por navigado en moveblaj aranĝoj, sed ne sur tabulkomputiloj aŭ labortabloj.

Subtenaj klasoj

Montrita ĉi tie estas tabelo de la klasoj kiujn ni subtenas kaj ilia efiko al donita amaskomunikilara enpaĝigo (etikedita per aparato). Ili troveblas en responsive.less.

Klaso Telefonoj480px kaj malsupre Tablojdoj767 px kaj malsupre Labortabloj768px kaj pli
.visible-phone Videbla
.visible-tablet Videbla
.visible-desktop Videbla
.hidden-phone Videbla Videbla
.hidden-tablet Videbla Videbla
.hidden-desktop Videbla Videbla

Testkazo

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