Փայտամած

Bootstrap-ը կառուցված է արձագանքող 12 սյունակ ցանցերի, դասավորությունների և բաղադրիչների վրա:

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

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

  1. <!DOCTYPE html>
  2. <html lang = "en" >
  3. ...
  4. </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 տեսադաշտից ցածր սյունակները դառնում են հեղուկ և շարվում ուղղահայաց:

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

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

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

  1. <div class = «շարք» >
  2. <div class = "span4" > ... </div>
  3. <div class = "span8" > ... </div>
  4. </div>

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

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

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

4
3 օֆսեթ 2
3 օֆսեթ 1
3 օֆսեթ 2
6 օֆսեթ 3
  1. <div class = «շարք» >
  2. <div class = "span4" > ... </div>
  3. <div class = "span3 offset2" > ... </div>
  4. </div>

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

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

Մակարդակ 1 սյունակ
Մակարդակ 2
Մակարդակ 2
  1. <div class = «շարք» >
  2. <div class = "span9" >
  3. Մակարդակ 1 սյունակ
  4. <div class = «շարք» >
  5. <div class = "span6" > Մակարդակ 2 </div>
  6. <div class = "span3" > Մակարդակ 2 </div>
  7. </div>
  8. </div>
  9. </div>

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

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

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

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

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

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

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

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

4
4 օֆսեթ 4
3 օֆսեթ 3
3 օֆսեթ 3
6 օֆսեթ 6
  1. <div class = «շարք-հեղուկ» >
  2. <div class = "span4" > ... </div>
  3. <div class = "span4 offset2" > ... </div>
  4. </div>

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

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

Հեղուկ 12
Հեղուկ 6
Հեղուկ 6
Հեղուկ 6
Հեղուկ 6
  1. <div class = «շարք-հեղուկ» >
  2. <div class = "span12" >
  3. Հեղուկ 12
  4. <div class = «շարք-հեղուկ» >
  5. <div class = "span6" >
  6. Հեղուկ 6
  7. <div class = «շարք-հեղուկ» >
  8. <div class = "span6" > Հեղուկ 6 </div>
  9. <div class = "span6" > Հեղուկ 6 </div>
  10. </div>
  11. </div>
  12. <div class = "span6" > Հեղուկ 6 </div>
  13. </div>
  14. </div>
  15. </div>

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

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

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

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

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

  1. <div class = «կոնտեյներ-հեղուկ» >
  2. <div class = «շարք-հեղուկ» >
  3. <div class = "span2" >
  4. <!--Կողային գոտու բովանդակություն-->
  5. </div>
  6. <div class = "span10" >
  7. <!--Մարմնի բովանդակություն-->
  8. </div>
  9. </div>
  10. </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

Թաքնված է...

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

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