Փայտամած

Պահանջվում է 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 = «շարք» > 
  <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 = «շարք» > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

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

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

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

Մակարդակ 2

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

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

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

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

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

<div class = «շարք-հեղուկ» > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

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

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

4 օֆսեթ 4

3 օֆսեթ 3

6 օֆսեթ 6

<div class = «շարք-հեղուկ» > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

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

Հեղուկ ցանցերը տարբեր կերպ են օգտագործում բնադրումը. սյունակների յուրաքանչյուր ներդիր մակարդակ պետք է գումարի մինչև 12 սյունակ: Դա պայմանավորված է նրանով, որ հեղուկի ցանցը լայնություններ սահմանելու համար օգտագործում է տոկոսներ, ոչ թե պիքսելներ:

Հեղուկ 12

Հեղուկ 6

<div class = «շարք-հեղուկ» > 
  <div class = "span12" > 
    Հեղուկ 12
    <div class = «շարք-հեղուկ» > 
      <div class = "span6" > 
        Հեղուկ 6
        <div class = «շարք-հեղուկ» > 
          <div class = "span6" > Հեղուկ 6 </div> 
          <div class = "span6" > Հեղուկ 6 </div> 
        </div>
      </div>
      <div class = "span6" > Հեղուկ 6 </div> 
    </div>
  </div>
</div>

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

Ապահովում է ընդհանուր ֆիքսված լայնությամբ (և ըստ ցանկության արձագանքող) դասավորություն, որը միայն <div class="container">պահանջվում է:

<մարմին>
  <div class = «կոնտեյներ» > 
    ...
  </div>
</body>

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

Ստեղծեք հեղուկ, <div class="container-fluid">երկսյունակ էջ — հիանալի հավելվածների և փաստաթղթերի համար:

<div class = «կոնտեյներ-հեղուկ» > 
  <div class = «շարք-հեղուկ» > 
    <div class = "span2" > 
      <!--Կողային գոտու բովանդակություն-->
    </div>
    <div class = "span10" > 
      <!--Մարմնի բովանդակություն-->
    </div>
  </div>
</div>

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

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

<meta name = "viewport" content = "width=device-width, fillestar-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 ( նվազագույն լայնությունը ՝ 1200px ) { ... } _     
 
/* Դիմանկարային պլանշետ դեպի լանդշաֆտ և աշխատասեղան */
@media ( նվազագույն լայնությունը ՝ 768px ) և ( առավելագույն լայնությունը ՝ 979px ) { ... } _ _        
 
/* Լանդշաֆտային հեռախոս դեպի դիմանկարային պլանշետ */
@media ( առավելագույն լայնությունը ՝ 767px ) { ... } _     
 
/* Լանդշաֆտային հեռախոսներ և ներքև */
@media ( առավելագույն լայնությունը ՝ 480px ) { ... } _

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

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

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

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

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

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

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

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

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

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

Թաքնված է...

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

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

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