Փայտամած

Պահանջվում է HTML5 doctype

Bootstrap-ն օգտագործում է որոշակի HTML տարրեր և CSS հատկություններ, որոնք պահանջում են օգտագործել HTML5 doctype: Ներառեք այն ձեր բոլոր նախագծերի սկզբում:

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

Տպագրություն և հղումներ

Bootstrap-ը սահմանում է հիմնական գլոբալ ցուցադրման, տպագրության և կապի ոճերը: Մասնավորապես, մենք.

Հեռացնել marginմարմնի վրա
Սահմանել background-color: white;վրաbody
Օգտագործեք @baseFontFamily, @baseFontSize, և @baseLineHeightատրիբուտները որպես մեր տպագրական հիմք
Սահմանեք գլոբալ հղման գույնը միջոցով @linkColorև կիրառեք միայն հղումի ընդգծումները:hover

Այս ոճերը կարելի է գտնել scaffolding.less- ում :

Վերականգնել նորմալացման միջոցով

Bootstrap 2-ի հետ վերակայման հին բլոկը հանվել է հօգուտ Normalize.css- ի՝ Նիկոլաս Գալագերի նախագծի, որը նաև ապահովում է HTML5 Boilerplate- ը : Թեև մենք օգտագործում ենք Normalize-ի մեծ մասը մեր reset.less-ում , մենք հանել ենք որոշ տարրեր հատուկ Bootstrap-ի համար:

Կենդանի ցանցի օրինակ

Լռելյայն Bootstrap grid համակարգը օգտագործում է 12 սյունակ ՝ ստեղծելով 940px լայնությամբ կոնտեյներ, առանց միացված պատասխանող հատկանիշների : Արձագանքող CSS ֆայլի ավելացմամբ, ցանցը հարմարվում է 724px և 1170px լայնությամբ՝ կախված ձեր տեսադաշտից: 767px տեսադաշտից ցածր սյունակները դառնում են հեղուկ և շարվում ուղղահայաց:

Հիմնական HTML ցանց

Պարզ երկու սյունակների դասավորության համար ստեղծեք a .rowև ավելացրեք համապատասխան քանակությամբ .span*սյունակներ: Քանի որ սա 12 սյունանոց ցանց է, յուրաքանչյուրն .span*ընդգրկում է այդ 12 սյունակներից մի քանիսը, և յուրաքանչյուր տողի համար միշտ պետք է գումարվի մինչև 12 (կամ մայրական սյունակների թիվը):

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

Հաշվի առնելով այս օրինակը՝ մենք ունենք .span4և .span8, կազմելով 12 ընդհանուր սյունակ և ամբողջական տող:

Փոխհատուցման սյունակներ

Տեղափոխեք սյունակները դեպի աջ՝ օգտագործելով .offset*դասերը: Յուրաքանչյուր դաս մեծացնում է սյունակի ձախ լուսանցքը ամբողջ սյունակով: Օրինակ՝ .offset4շարժվում .span4է չորս սյունակի վրայով:

3 օֆսեթ 2

3 օֆսեթ 1

3 օֆսեթ 2

6 օֆսեթ 3

<div class="row">
  <div class="span4">...</div>
  <div class="span3 offset2">...</div>
</div>

Բնադրող սյուներ

Ձեր բովանդակությունը լռելյայն ցանցի հետ տեղադրելու համար ավելացրեք նոր .rowև մի շարք .span*սյունակներ գոյություն ունեցող .span*սյունակում: Ներդրված տողերը պետք է ներառեն սյունակների մի շարք, որոնք գումարվում են դրա մայրի սյունակների քանակին:

Մակարդակ 1 սյունակ

Մակարդակ 2

<div class="row">
  <div class="span9">
    Մակարդակ 1 սյունակ
    <div class="row">
      <div class="span6">Մակարդակ 2</div>
      <div class="span3">Մակարդակ 2</div>
    </div>
  </div>
</div>

Կենդանի հեղուկ ցանցի օրինակ

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

Հիմնական հեղուկ ցանցի HTML

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

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

Հեղուկի փոխհատուցում

Գործում է նույն կերպ, ինչ ֆիքսված ցանցային համակարգի փոխհատուցումը. ավելացրեք .offset*ցանկացած սյունակում, որպեսզի փոխհատուցվի այդքան սյունակներով:

4 օֆսեթ 4

3 օֆսեթ 3

6 օֆսեթ 6

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

Հեղուկ բնադրում

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

Հեղուկ 12

Հեղուկ 6

<div class="row-fluid">
  <div class="span12">
    Հեղուկ 12
    <div class="row-fluid">
      <div class="span6">Հեղուկ 6</div>
      <div class="span6">Հեղուկ 6</div>
    </div>
  </div>
</div>

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

Ապահովում է ընդհանուր ֆիքսված լայնությամբ (և ըստ ցանկության արձագանքող) դասավորություն, որը միայն <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>

Պատասխանատու գործառույթների ակտիվացում

Միացրեք արձագանքող CSS-ը ձեր նախագծում՝ ներառելով համապատասխան մետա թեգը և լրացուցիչ ոճաթերթը <head>ձեր փաստաթղթում: Եթե դուք Bootstrap-ը կազմել եք Անհատականացնել էջից, ապա պետք է ներառեք միայն մետա թեգը:

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

Գլուխը վեր Այս պահին Bootstrap-ը լռելյայնորեն չի ներառում արձագանքող գործառույթներ, քանի որ ամեն ինչ չէ, որ պետք է արձագանքող լինի: Փոխանակ խրախուսելու ծրագրավորողներին հեռացնել այս հատկությունը, մենք կարծում ենք, որ լավագույնս հնարավոր է միացնել այն անհրաժեշտության դեպքում:

Պատասխանատու Bootstrap-ի մասին

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

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

Օգտագործեք լրատվամիջոցների հարցումները պատասխանատու կերպով և միայն որպես սկիզբ ձեր բջջային լսարանի համար: Ավելի մեծ նախագծերի համար հաշվի առեք հատուկ կոդերի հիմքերը և ոչ թե լրատվամիջոցների հարցումների շերտերը:

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

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

Պիտակ	Դասավորության լայնությունը	Սյունակի լայնությունը	Հեղեղաջրերի լայնությունը
Մեծ էկրան	1200px և ավելի	70px	30px
Կանխադրված	980px և ավելի	60px	20px
Դիմանկարային պլանշետներ	768px և ավելի բարձր	42px	20px
Հեռախոսներ դեպի պլանշետներ	767px և ավելի ցածր	Հեղուկ սյուներ, առանց ֆիքսված լայնությունների
Հեռախոսներ	480px և ավելի ցածր	Հեղուկ սյուներ, առանց ֆիքսված լայնությունների

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

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

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

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

Պատասխանատու կոմունալ դասեր

Շարժական սարքերի համար ավելի արագ զարգացման համար օգտագործեք այս օգտակար դասերը՝ ըստ սարքի բովանդակությունը ցուցադրելու և թաքցնելու համար: Ստորև ներկայացված է հասանելի դասերի աղյուսակը և դրանց ազդեցությունը տվյալ մեդիա հարցման դասավորության վրա (պիտակավորված ըստ սարքի): Դրանք կարելի է գտնել responsive.less.

Դասարան	Հեռախոսներ 767px և ավելի ցածր	Պլանշետներ 979px-ից 768px	Աշխատասեղանների լռելյայն
`.visible-phone`	Տեսանելի	Թաքնված	Թաքնված
`.visible-tablet`	Թաքնված	Տեսանելի	Թաքնված
`.visible-desktop`	Թաքնված	Թաքնված	Տեսանելի
`.hidden-phone`	Թաքնված	Տեսանելի	Տեսանելի
`.hidden-tablet`	Տեսանելի	Թաքնված	Տեսանելի
`.hidden-desktop`	Տեսանելի	Տեսանելի	Թաքնված

Երբ օգտագործել

Օգտագործեք սահմանափակ հիմունքներով և խուսափեք նույն կայքի բոլորովին այլ տարբերակներ ստեղծելուց: Փոխարենը, օգտագործեք դրանք յուրաքանչյուր սարքի ներկայացումը լրացնելու համար: Պատասխանատու կոմունալ ծառայությունները չպետք է օգտագործվեն աղյուսակների հետ և որպես այդպիսին չեն աջակցվում:

Պատասխանատու կոմունալ ծառայությունների փորձարկման դեպք

Չափափոխեք ձեր դիտարկիչը կամ բեռնեք տարբեր սարքերում՝ վերը նշված դասերը փորձարկելու համար:

Տեսանելի է...

Կանաչ վանդակները ցույց են տալիս, որ դասը տեսանելի է ձեր ընթացիկ տեսադաշտում:

Հեռախոս ✔ Հեռ
Պլանշետ ✔ Պլանշետ
Սեղան ✔ Սեղան

Թաքնված է...

Այստեղ կանաչ վանդակները ցույց են տալիս, որ դասը թաքնված է ձեր ընթացիկ տեսադաշտում:

Հեռախոս ✔ Հեռ
Պլանշետ ✔ Պլանշետ
Սեղան ✔ Սեղան

Համաշխարհային կարգավորումներ