Kiunzi

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

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.

<!DOCTTYPE html>
<html lang = "en" > 
  ...
</ 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 wa gridi chaguo-msingi unaotolewa katika Bootstrap hutumia safu wima 12 zinazotoa kwa upana wa 724px, 940px (chaguo-msingi bila kujumuishwa kwa CSS), na 1170px. Chini ya lango la kutazama la 767px, safu wima huwa maji na kutundikwa wima.

<div class = "safu" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</ 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 kurekebisha 4

3 kurekebisha 3

8 kurekebisha 4

<div class = "safu" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</ 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

<div class = "safu" > 
  <div class = "span6" > 
    Safu wima ya kiwango cha 1
    <div class = "safu" > 
      <div class = "span3" > Kiwango cha 2 </div> 
      <div class = "span3" > Kiwango cha 2 </div> 
    </ div>
  </ div>
</ div>

Safu za maji

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

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</ 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

<div class = "row-fluid" > 
  <div class = "span12" > 
    Kiwango cha 1 cha safu wima
    <div class = "row-fluid" > 
      <div class = "span6" > Kiwango cha 2 </div> 
      <div class = "span6" > Kiwango cha 2 </div> 
    </ div>
  </ div>
</ div>

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

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.

Mpangilio usiohamishika

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

<mwili>
  <div class = "chombo" > 
    ...
  </ div>
</ 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.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Maudhui ya Upau wa kando-->
    </ div>
    <div class = "span10" > 
      <!--Maudhui ya mwili-->
    </ div>
  </ div>
</ div>

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.

<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:

Tumia toleo la msikivu lililokusanywa, bootstrap-responsive.css
Ongeza @import "responsive.less" na urudishe Bootstrap
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.

  /* Simu za mazingira na chini */
  @media ( max - width : 480px ) { ... }     
 
  /* Simu ya mlalo ili kupiga picha ya kompyuta kibao */
  @media ( max - width : 767px ) { ... }     
 
  /* Picha kibao kwa mazingira na eneo-kazi */
  @media ( min - width : 768px ) na ( max - width : 979px ) { ... }        
 
  /* Desktop kubwa */
  @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	Imefichwa	Imefichwa
`.visible-tablet`	Imefichwa	Inaonekana	Imefichwa
`.visible-desktop`	Imefichwa	Imefichwa	Inaonekana
`.hidden-phone`	Imefichwa	Inaonekana	Inaonekana
`.hidden-tablet`	Inaonekana	Imefichwa	Inaonekana
`.hidden-desktop`	Inaonekana	Inaonekana	Imefichwa

Kesi ya mtihani

Badilisha ukubwa wa kivinjari chako au upakie kwenye vifaa tofauti ili kujaribu aina zilizo hapo juu.

Inaonekana kwenye...

Alama za tiki za kijani zinaonyesha kuwa darasa linaonekana katika kituo chako cha kutazama cha sasa.

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

Imefichwa kwenye...

Hapa, alama za tiki za kijani zinaonyesha kuwa darasa limefichwa kwenye kituo chako cha kutazama cha sasa.

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

Kiunzi

Mitindo ya kimataifa ya kuweka upya CSS, uchapaji na viungo

Inahitaji aina ya hati ya HTML5

Uchapaji na viungo

Weka upya kupitia Normalize

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

Kuweka safu wima

Safu wima za kuota

Mfano

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

Safu za maji

Asilimia, si pikseli

Safu za maji

Alama

Kuota kwa maji

Kubinafsisha gridi

Vigezo katika LESS

Jinsi ya kubinafsisha

Kukaa msikivu

Mipangilio Violezo vya Msingi vya kuunda kurasa za wavuti

Mpangilio usiohamishika

Mpangilio wa maji

Usanifu sikivu Maswali ya media kwa vifaa na maazimio mbalimbali

Wanachofanya

Vifaa vinavyotumika

Inahitaji meta tag

Kwa kutumia maswali ya vyombo vya habari

Madarasa ya matumizi ya msikivu

Wao ni kina nani

Wakati wa kutumia

Madarasa ya usaidizi

Kesi ya mtihani

Inaonekana kwenye...

Imefichwa kwenye...