Փայտամած

Bootstrap-ը կառուցված է արձագանքող 12 սյունակ ցանցի վրա: Մենք նաև ներառել ենք ֆիքսված և հեղուկ լայնության դասավորություններ՝ հիմնված այդ համակարգի վրա:

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

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

  1. <!DOCTYPE html>
  2. <html lang = "en" >
  3. ...
  4. </html>

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

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

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

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

Bootstrap 2-ի դրությամբ, ավանդական CSS-ի վերակայումը զարգացել է՝ օգտագործելու տարրեր Normalize.css- ից՝ Նիկոլաս Գալագերի նախագիծը, որը նաև ապահովում է HTML5 Boilerplate- ը :

Նոր վերակայումը դեռ կարելի է գտնել reset.less-ում , բայց շատ տարրեր հանված են հակիրճության և ճշգրտության համար:

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

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

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

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


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

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

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

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

Օրինակ

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

Սյունակի 1-ին մակարդակ
Մակարդակ 2
Մակարդակ 2
  1. <div class = «շարք» >
  2. <div class = "span6" >
  3. Մակարդակ 1 սյունակ
  4. <div class = «շարք» >
  5. <div class = "span3" > Մակարդակ 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

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

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

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

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

Նշում

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

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

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

Հեղուկ 12
Հեղուկ 6
Հեղուկ 6
  1. <div class = «շարք-հեղուկ» >
  2. <div class = "span12" >
  3. Սյունակի 1-ին մակարդակ
  4. <div class = «շարք-հեղուկ» >
  5. <div class = "span6" > Մակարդակ 2 </div>
  6. <div class = "span6" > Մակարդակ 2 </div>
  7. </div>
  8. </div>
  9. </div>
Փոփոխական Կանխադրված արժեք Նկարագրություն
@gridColumns 12 Սյունակների քանակը
@gridColumnWidth 60px Յուրաքանչյուր սյունակի լայնությունը
@gridGutterWidth 20px Բացասական տարածություն սյուների միջև

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

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

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

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

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

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

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

Լռելյայն և պարզ 940px լայնությամբ, կենտրոնացված դասավորությունը գրեթե ցանկացած վեբկայքի կամ էջի համար, որը տրամադրվում է մեկ <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՝ հիմնվելով մի շարք պայմանների վրա՝ հարաբերակցություններ, լայնություններ, ցուցադրման տեսակ և այլն, բայց սովորաբար կենտրոնանում են min-widthև max-width.

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

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

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

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

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

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

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

  1. <meta name = "viewport" content = "width=device-width, fillestar-scale=1.0" >

Օգտագործելով լրատվամիջոցների հարցումները

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

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

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

  1. /* Լանդշաֆտային հեռախոսներ և ներքև */
  2. @media ( առավելագույն լայնությունը ՝ 480px ) { ... } _
  3.  
  4. /* Լանդշաֆտային հեռախոս դեպի դիմանկարային պլանշետ */
  5. @media ( առավելագույն լայնությունը ՝ 767px ) { ... } _
  6.  
  7. /* Դիմանկարային պլանշետ դեպի լանդշաֆտ և աշխատասեղան */
  8. @media ( նվազագույն լայնությունը ՝ 768px ) և ( առավելագույն լայնությունը ՝ 979px ) { ... } _ _
  9.  
  10. /* Մեծ աշխատասեղան */
  11. @media ( նվազագույն լայնությունը ՝ 1200px ) { ... } _

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

Ինչ են նրանք

Շարժական սարքերի համար ավելի արագ զարգացման համար օգտագործեք այս հիմնական օգտակար դասերը՝ ըստ սարքի բովանդակությունը ցուցադրելու և թաքցնելու համար:

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

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

Օրինակ, դուք կարող եք <select>նավարկության տարր ցույց տալ շարժական դասավորություններում, բայց ոչ պլանշետների կամ աշխատասեղանների վրա:

Աջակցության դասեր

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

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

Փորձարկման դեպք

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

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

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

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

Թաքնված է...

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

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