Bootstrap

Kiunzi

Bootstrap imejengwa kwenye gridi ya safu wima 12 inayojibu. Tumejumuisha pia mipangilio ya upana- dhabiti na upana wa maji kulingana na mfumo huo.

Mitindo ya kimataifa ya kuweka upya CSS, uchapaji na viungo

Inahitaji aina ya hati ya HTML5

Bootstrap hutumia vipengele vya HTML na sifa za CSS ambazo zinahitaji matumizi ya aina ya hati ya HTML5. Hakikisha umeijumuisha mwanzoni mwa kila ukurasa wa Bootstrapped katika mradi wako.

  1. <!DOCTTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </ html>

Uchapaji na viungo

Ndani ya faili ya scaffolding.less , tunaweka onyesho msingi la kimataifa, uchapaji, na mitindo ya viungo. Hasa, sisi:

  • Ondoa ukingo kwenye mwili
  • Weka background-color: white;kwenyebody
  • Tumia @baseFontFamily, @baseFontSize, na @baseLineHeightsifa kama msingi wetu wa uchapaji
  • Weka rangi ya kiungo cha kimataifa kupitia @linkColorna tumia mistari ya chini ya kiungo kwenye tu:hover

Weka upya kupitia Normalize

Kufikia Bootstrap 2, uwekaji upya wa jadi wa CSS umebadilika ili kutumia vipengee kutoka Normalize.css , mradi wa Nicolas Gallagher ambao pia unasimamia HTML5 Boilerplate .

Uwekaji upya mpya bado unaweza kupatikana katika reset.less , lakini kwa vipengele vingi vimeondolewa kwa ufupi na usahihi.

Mfumo chaguo-msingi wa gridi ya safu wima 12 na msokoto unaoitikia

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

Mfumo wa gridi chaguo-msingi uliotolewa kama sehemu ya Bootstrap ni gridi ya safu wima 12 kwa upana wa 940px .

Pia ina tofauti nne za kuitikia kwa vifaa na maazimio mbalimbali: simu, picha ya kompyuta ya mkononi, mandhari ya jedwali na kompyuta ndogo za mezani, na eneo-kazi kubwa la skrini pana.

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

Kama inavyoonyeshwa hapa, mpangilio msingi unaweza kuundwa kwa "safu wima" mbili, kila moja ikijumuisha idadi ya safu wima 12 tulizofafanua kama sehemu ya mfumo wetu wa gridi ya taifa.


Kuweka safu wima

4
4 kurekebisha 4
3 kurekebisha 3
3 kurekebisha 3
8 kurekebisha 4 
  1. <div class = "safu" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </ div>

Safu wima za kuota

Kwa mfumo wa gridi ya tuli (isiyo ya maji) katika Bootstrap, kuweka kiota ni rahisi. Ili kuweka maudhui yako, ongeza tu safu mpya .rowna seti ya .span*safu wima zilizopo .span*.

Mfano

Safu mlalo zilizowekwa zinapaswa kujumuisha seti ya safu wima zinazojumlisha hadi idadi ya safu wima za mzazi wake. Kwa mfano, .span3safu wima mbili zilizowekwa zinapaswa kuwekwa ndani ya .span6.

Kiwango cha 1 cha safu wima
Kiwango cha 2
Kiwango cha 2 
  1. <div class = "safu" > 
  2.   <div class = "span12" > 
  3.     Kiwango cha 1 cha safu wima
  4.     <div class = "safu" > 
  5.       <div class = "span6" > Kiwango cha 2 </div> 
  6.       <div class = "span6" > Kiwango cha 2 </div> 
  7.     </ div>
  8.   </ div>
  9. </ div>

Mfumo wa gridi ya maji 12 safu wima zinazojibu, kulingana na asilimia

Safu za maji

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

Asilimia, si pikseli

Mfumo wa gridi ya maji hutumia percents kwa upana wa safu badala ya pikseli zisizobadilika. Pia ina tofauti zinazofanana na mfumo wetu wa gridi isiyobadilika, inahakikisha uwiano unaofaa wa maazimio na vifaa muhimu vya skrini.

Safu za maji

Tengeneza safu mlalo iwe kioevu kwa kubadilisha .rowhadi .row-fluid. Safu wima hukaa sawa, na kuifanya iwe rahisi sana kugeuza kati ya mipangilio isiyobadilika na ya kioevu.

Alama

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

Kuota kwa maji

Kuweka viota kwa gridi za maji ni tofauti kidogo: idadi ya safu wima zilizowekwa haihitaji kulingana na mzazi. Badala yake, safu wima zako huwekwa upya katika kila kiwango kwa sababu kila safu huchukua 100% ya safu wima kuu.

Majimaji 12
Majimaji 6
Majimaji 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Kiwango cha 1 cha safu wima
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Kiwango cha 2 </div> 
  6.       <div class = "span6" > Kiwango cha 2 </div> 
  7.     </ div>
  8.   </ div>
  9. </ div>

Kubinafsisha gridi

Inaweza kubadilika Thamani chaguomsingi Maelezo
@gridColumns 12 Idadi ya safu wima
@gridColumnWidth 60px Upana wa kila safu
@gridGutterWidth 20px Nafasi hasi kati ya safu wima
@siteWidth Jumla iliyokokotwa ya safu wima zote na mifereji ya maji Huhesabu idadi ya nguzo na mifereji ya maji ili kuweka upana wa .container-fixed()mchanganyiko

Vigezo katika LESS

Imejengwa ndani ya Bootstrap ni vijisehemu vichache vya kubinafsisha mfumo chaguomsingi wa gridi ya 940px, ulioandikwa hapo juu. Vigezo vyote vya gridi ya taifa vinahifadhiwa katika vigezo.less.

Jinsi ya kubinafsisha

Kurekebisha gridi ya taifa kunamaanisha kubadilisha @grid*vigezo vitatu na kurejesha Bootstrap. Badilisha vigeu vya gridi katika variables.less na utumie mojawapo ya njia nne zilizorekodiwa kurejesha . Ikiwa unaongeza safu wima zaidi, hakikisha umeongeza CSS kwa zile zilizo kwenye grid.less.

Kukaa msikivu

Ubinafsishaji wa gridi ya taifa hufanya kazi tu katika kiwango chaguo-msingi, gridi ya 940px. Ili kudumisha vipengele vya kuitikia vya Bootstrap, itabidi pia ubadilishe gridi kukufaa katika responsive.less.

Mipangilio Violezo vya Msingi vya kuunda kurasa za wavuti

Mpangilio usiohamishika

Mpangilio chaguomsingi na rahisi wa upana wa 940px, unaozingatia katikati kwa takriban tovuti au ukurasa wowote uliotolewa na <div class="container">.

  1. <mwili>
  2.   <div class = "chombo" > 
  3.     ...
  4.   </ div>
  5. </ mwili>

Mpangilio wa maji

<div class="container-fluid">inatoa muundo wa ukurasa unaonyumbulika, upana wa chini na wa juu zaidi, na utepe wa upande wa kushoto. Ni nzuri kwa programu na hati.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Maudhui ya Upau wa kando-->
  5.     </ div>
  6.     <div class = "span10" > 
  7.       <!--Maudhui ya mwili-->
  8.     </ div>
  9.   </ div>
  10. </ div>

Usanifu sikivu Maswali ya media kwa vifaa na maazimio mbalimbali

Vifaa vinavyoitikia

Wanachofanya

Hoja za midia huruhusu CSS maalum kulingana na idadi ya masharti—uwiano, upana, aina ya onyesho, n.k—lakini kwa kawaida hulenga min-widthna max-width.

  • Rekebisha upana wa safu kwenye gridi yetu
  • Vipengee vya mrundikano badala ya kuelea inapobidi
  • Badilisha ukubwa wa vichwa na maandishi ili yafae zaidi vifaa

Tumia maswali ya media kwa kuwajibika na kama mwanzo tu kwa hadhira yako ya rununu. Kwa miradi mikubwa, zingatia misingi maalum ya misimbo na si safu za hoja za midia.

Vifaa vinavyotumika

Bootstrap inaauni hoja chache za midia katika faili moja ili kusaidia kufanya miradi yako iwe sahihi zaidi kwenye vifaa tofauti na masuluhisho ya skrini. Hivi ndivyo vilivyojumuishwa:

Lebo Upana wa mpangilio Upana wa safu wima Upana wa gutter
Simu mahiri 480px na chini Safu wima za maji, hakuna upana usiobadilika
Simu mahiri kwa kompyuta kibao 767px na chini Safu wima za maji, hakuna upana usiobadilika
Vidonge vya picha 768px na zaidi 42px 20px
Chaguomsingi 980px na juu 60px 20px
Onyesho kubwa 1200px na juu 70px 30px

Inahitaji meta tag

Ili kuhakikisha kuwa vifaa vinaonyesha kurasa zinazojibu vizuri, jumuisha meta tagi ya kituo cha kutazama.

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

Kwa kutumia maswali ya vyombo vya habari

Bootstrap haijumuishi maswali haya ya media kiotomatiki, lakini kuelewa na kuyaongeza ni rahisi sana na kunahitaji usanidi mdogo. Una chaguo chache za kujumuisha vipengele vya kuitikia vya Bootstrap:

  1. Tumia toleo la msikivu lililokusanywa, bootstrap-responsive.css
  2. Ongeza @import "responsive.less" na urudishe Bootstrap
  3. Kurekebisha na kukusanya responsive.less kama faili tofauti

Kwa nini usiijumuishe tu? Ukweli usemwe, sio kila kitu kinahitaji kuitikia. Badala ya kuhimiza watengenezaji kuondoa kipengele hiki, tunaona ni vyema kukiwezesha.

  1.   // Simu za mazingira na chini
  2.   @media ( max - width : 480px ) { ... }     
  3.  
  4.   // Simu ya mazingira kwa kompyuta kibao ya picha
  5.   @media ( max - width : 768px ) { ... }     
  6.  
  7.   // Picha kibao kwa mazingira na eneo-kazi
  8.   @media ( min - width : 768px ) na ( max - width : 980px ) { ... }        
  9.  
  10.   // Desktop kubwa
  11.   @media ( min - upana : 1200px ) { .. }

Madarasa ya matumizi ya msikivu

Wao ni kina nani

Kwa maendeleo ya haraka ya kutumia simu ya mkononi, tumia madarasa haya ya msingi ya matumizi kwa kuonyesha na kuficha maudhui kwa kifaa.

Wakati wa kutumia

Tumia kwa ukomo na uepuke kuunda matoleo tofauti kabisa ya tovuti moja. Badala yake, zitumie ili kukamilisha wasilisho la kila kifaa.

Kwa mfano, unaweza kuonyesha <select>kipengele cha nav kwenye mipangilio ya simu, lakini si kwenye kompyuta za mkononi au kompyuta za mezani.

Madarasa ya usaidizi

Inayoonyeshwa hapa ni jedwali la madarasa tunayotumia na athari zake kwenye mpangilio wa hoja ya media fulani (iliyowekwa lebo na kifaa). Wanaweza kupatikana katika responsive.less.

Darasa Simu480px na chini Vidonge767px na chini Kompyuta za mezani768px na zaidi
.visible-phone Inaonekana
.visible-tablet Inaonekana
.visible-desktop Inaonekana
.hidden-phone Inaonekana Inaonekana
.hidden-tablet Inaonekana Inaonekana
.hidden-desktop Inaonekana Inaonekana

Kesi ya mtihani

Badilisha ukubwa wa kivinjari chako au upakie kwenye vifaa tofauti ili kujaribu viwango vilivyo hapo juu.

Inaonekana kwenye...

  • Simu✔ Simu
  • Kompyuta kibao✔ Kompyuta kibao
  • Eneo-kazi✔ Kompyuta ya mezani

Imefichwa kwenye...

  • Simu✔ Simu
  • Kompyuta kibao✔ Kompyuta kibao
  • Eneo-kazi✔ Kompyuta ya mezani