Լռելյայն ցանցային համակարգը, որը տրամադրվում է որպես Bootstrap-ի մաս, 940px լայնությամբ, 12 սյունակ ցանց է :

Այն նաև ունի չորս արձագանքող տատանումներ տարբեր սարքերի և լուծումների համար՝ հեռախոս, պլանշետային դիմանկար, սեղանի լանդշաֆտ և փոքր աշխատասեղաններ և լայն էկրանով աշխատասեղաններ:

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

Ինչպես ցույց է տրված այստեղ, հիմնական դասավորությունը կարող է ստեղծվել երկու «սյունակներով», որոնցից յուրաքանչյուրն ընդգրկում է 12 հիմնային սյուներից, որոնք մենք սահմանել ենք որպես մեր ցանցային համակարգի մաս:

Bootstrap-ի ստատիկ (ոչ հեղուկ) ցանցային համակարգի միջոցով հեշտ է բույն դնել: Ձեր բովանդակությունը տեղադրելու համար պարզապես ավելացրեք նոր .rowև մի շարք .span*սյունակներ գոյություն ունեցող .span*սյունակում:

Օրինակ

Ներդրված տողերը պետք է ներառեն սյունակների մի շարք, որոնք գումարվում են դրա մայրի սյունակների քանակին: Օրինակ, երկու ներդիր .span3սյունակները պետք է տեղադրվեն .span6.

<div class="row">
  <div class="span12">
    Սյունակի 1-ին մակարդակ
    <div class="row">
      <div class="span6">Մակարդակ 2</div>
      <div class="span6">Մակարդակ 2</div>
    </div>
  </div>
</div>

Տոկոսներ, ոչ թե պիքսելներ

Հեղուկ ցանցային համակարգը ֆիքսված պիքսելների փոխարեն օգտագործում է տոկոսներ սյունակների լայնության համար: Այն նաև ունի նույն արձագանքող տատանումները, ինչ մեր ֆիքսված ցանցային համակարգը՝ ապահովելով համապատասխան համամասնություններ էկրանի հիմնական լուծումների և սարքերի համար:

Հեղուկ շարքեր

Դարձրեք ցանկացած տող հեղուկ ՝ պարզապես փոխելով .row. .row-fluidՍյունակները մնում են նույնը, ինչը շատ պարզ է դարձնում ֆիքսված և հեղուկ դասավորությունների միջև շրջելը:

Նշում

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

Հեղուկ ցանցերով բույն դնելը մի փոքր այլ է. անհրաժեշտ չէ, որ տեղադրվող սյունակների թիվը համապատասխանի մայրին: Փոխարենը, ձեր սյունակները վերակայվում են յուրաքանչյուր մակարդակում, քանի որ յուրաքանչյուր տող զբաղեցնում է մայր սյունակի 100%-ը:

<div class="row-fluid">
  <div class="span12">
    Սյունակի 1-ին մակարդակ
    <div class="row-fluid">
      <div class="span6">Մակարդակ 2</div>
      <div class="span6">Մակարդակ 2</div>
    </div>
  </div>
</div>

Փոփոխականներ LESS-ում

Bootstrap-ում ներկառուցված են մի քանի փոփոխականներ՝ լռելյայն 940px ցանցային համակարգը հարմարեցնելու համար, որը փաստագրված է վերևում: Ցանցի բոլոր փոփոխականները պահվում են variables.less-ում:

Ինչպես հարմարեցնել

Ցանցի փոփոխությունը նշանակում է փոխել երեք @grid*փոփոխականները և վերակազմավորել Bootstrap-ը: Փոխեք grid փոփոխականները variables.less-ում և օգտագործեք վերակազմավորման համար փաստաթղթավորված չորս եղանակներից մեկը : Եթե ​​դուք ավելի շատ սյունակներ եք ավելացնում, համոզվեք, որ ավելացնեք CSS-ը grid.less-ում գտնվողների համար:

Պատասխանատու մնալը

Ցանցի անհատականացումն աշխատում է միայն լռելյայն մակարդակում՝ 940px ցանցում: Bootstrap-ի պատասխանող կողմերը պահպանելու համար դուք նաև պետք է հարմարեցնեք ցանցերը responsive.less-ում:

Ֆիքսված դասավորություն

Լռելյայն և պարզ 940px լայնությամբ, կենտրոնացված դասավորությունը գրեթե ցանկացած վեբկայքի կամ էջի համար, որը տրամադրվում է մեկ <div class="container">.

<մարմին>
  <div class="container">
    ...
  </div>
</body>

Հեղուկ դասավորություն

<div class="container-fluid">տալիս է էջի ճկուն կառուցվածք, նվազագույն և առավելագույն լայնություններ և ձախ կողմի կողագոտ: Այն հիանալի է հավելվածների և փաստաթղթերի համար:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Կողային գոտու բովանդակություն-->
    </div>
    <div class="span10">
      <!--Մարմնի բովանդակություն-->
    </div>
  </div>
</div>

Աջակցվող սարքեր

Bootstrap-ն աջակցում է մի քանի մեդիա հարցումների մեկ ֆայլում, որոնք օգնում են ձեր նախագծերն ավելի համապատասխան դարձնել տարբեր սարքերի և էկրանի լուծումների վրա: Ահա թե ինչ է ներառված.

Պահանջվում է մետա պիտակ

Ապահովելու համար, որ սարքերը պատշաճ կերպով ցուցադրեն արձագանքող էջերը, ներառեք տեսադաշտի մետա պիտակը:

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

Ինչ են անում

Մեդիա հարցումները թույլ են տալիս հատուկ CSS՝ հիմնվելով մի շարք պայմանների վրա՝ հարաբերակցություններ, լայնություններ, ցուցադրման տեսակ և այլն, բայց սովորաբար կենտրոնանում են min-widthև max-width.

• Փոփոխեք սյունակի լայնությունը մեր ցանցում
• Տեղադրեք տարրերը լողալու փոխարեն, որտեղ անհրաժեշտ է
• Չափափոխեք վերնագրերը և տեքստը՝ սարքերի համար ավելի հարմար լինելու համար

Bootstrap-ը ավտոմատ կերպով չի ներառում այս մեդիա հարցումները, բայց դրանք հասկանալն ու ավելացնելը շատ հեշտ է և պահանջում է նվազագույն կարգավորում: Դուք ունեք մի քանի տարբերակ Bootstrap-ի պատասխանող հատկանիշները ներառելու համար.

1. Օգտագործեք կազմված ռեսպոնսիվ տարբերակը՝ bootstrap-responsive.css
2. Ավելացրեք @import «responsive.less» և նորից կազմեք Bootstrap-ը
3. Փոփոխեք և վերակոմպիլացրեք responsive.less որպես առանձին ֆայլ

Ինչու՞ պարզապես չներառել այն: Ճիշտն ասած, ամեն ինչ չէ, որ պետք է արձագանքել: Փոխանակ խրախուսելու ծրագրավորողներին հեռացնել այս գործառույթը, մենք գտնում ենք, որ լավագույնն այն միացնելն է:

  // Լանդշաֆտային հեռախոսներ և ներքև
  @media (առավելագույն լայնությունը՝ 480px) { ... }

  // Լանդշաֆտային հեռախոս դեպի դիմանկարային պլանշետ
  @media (առավելագույն լայնությունը՝ 768px) { ... }

  // Դիմանկար պլանշետ դեպի լանդշաֆտ և աշխատասեղան
  @media (min-լայնություն՝ 768px) և (առավելագույն լայնությունը՝ 980px) { ... }

  // Մեծ աշխատասեղան
  @media (min-լայնություն՝ 1200px) { .. }