Տարածություն

Bootstrap-ը ներառում է սղագրության արձագանքող լուսանցքի և լիցքավորման օգտակար դասերի լայն շրջանակ՝ տարրի տեսքը փոփոխելու համար:

Ինչպես է դա աշխատում

Սղագրության դասերով տարրին կամ նրա կողմերի ենթաբազմությանը վերագրեք արձագանքող marginկամ արժեքներ: paddingՆերառում է անհատական հատկությունների, բոլոր հատկությունների և ուղղահայաց և հորիզոնական հատկությունների աջակցություն: Դասերը կառուցված են լռելյայն Sass քարտեզից՝ սկսած .25remմինչև 3rem.

Նշում

Spacing կոմունալ ծառայությունները, որոնք կիրառվում են բոլոր ընդհատումների համար, սկսած xsմինչև xl, չունեն ընդմիջման կետի հապավում: Դա պայմանավորված է նրանով, որ այդ դասերը կիրառվում են սկսած min-width: 0և վերև, և, հետևաբար, կապված չեն մեդիա հարցումով: Մնացած ընդմիջման կետերը, այնուամենայնիվ, ներառում են ընդմիջման կետի հապավումը:

Դասերը անվանվում են՝ օգտագործելով ձևաչափը և համար {property}{sides}-{size}, , , և :xs{property}{sides}-{breakpoint}-{size}smmdlgxl

Որտեղ գույքը մեկն է.

m- դասերի համար, որոնք սահմանված ենmargin
p- դասերի համար, որոնք սահմանված ենpadding

Որտեղ կողմերից մեկն է.

t- դասերի համար, որոնք սահմանում են margin-topկամpadding-top
b- դասերի համար, որոնք սահմանում են margin-bottomկամpadding-bottom
l- դասերի համար, որոնք սահմանում են margin-leftկամpadding-left
r- դասերի համար, որոնք սահմանում են margin-rightկամpadding-right
x- դասերի համար, որոնք սահմանում են *-leftև՛ և՛*-right
y- դասերի համար, որոնք սահմանում են *-topև՛ և՛*-bottom
դատարկ - դասերի համար, որոնք սահմանում են տարրի a marginկամ paddingբոլոր 4 կողմերում

Որտեղ չափը մեկն է.

0- դասերի համար, որոնք վերացնում են marginկամ paddingսահմանելով այն0
1- (ըստ լռելյայն) դասերի համար, որոնք սահմանում են marginկամpadding$spacer * .25
2- (ըստ լռելյայն) դասերի համար, որոնք սահմանում են marginկամpadding$spacer * .5
3- (ըստ լռելյայն) դասերի համար, որոնք սահմանում են marginկամpadding$spacer
4- (ըստ լռելյայն) դասերի համար, որոնք սահմանում են marginկամpadding$spacer * 1.5
5- (ըստ լռելյայն) դասերի համար, որոնք սահմանում են marginկամpadding$spacer * 3
auto- դասերի համար, որոնք սահմանել marginեն ավտոմատ

(Դուք կարող եք ավելացնել ավելի շատ չափեր՝ ավելացնելով գրառումներ $spacersSass քարտեզի փոփոխականին):

Օրինակներ

Ահա այս դասերի մի քանի ներկայացուցչական օրինակներ.

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

Հորիզոնական կենտրոնացում

Բացի այդ, Bootstrap-ը ներառում է նաև .mx-autoֆիքսված լայնությամբ բլոկի մակարդակի բովանդակության հորիզոնական կենտրոնացման դաս, այսինքն՝ բովանդակություն, որն ունի display: blockև մի widthշարք՝ հորիզոնական լուսանցքները դնելով auto.

Կենտրոնացված տարր

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

Բացասական մարժա

CSS-ում marginհատկությունները կարող են օգտագործել բացասական արժեքներ ( paddingկարող): 4.2-ի դրությամբ մենք ավելացրել ենք բացասական մարժայի օգտակար ծառայություններ վերը թվարկված յուրաքանչյուր ոչ զրոյական ամբողջ չափի համար (օրինակ՝ 1, 2, , 3, 4, 5): Այս կոմունալ ծառայություններն իդեալական են ցանցի սյունակային ջրհորները ճեղքման կետերում հարմարեցնելու համար:

Շարահյուսությունը գրեթե նույնն է, ինչ լռելյայն, դրական լուսանցքի կոմունալ ծրագրերը, բայց nնախքան պահանջվող չափի ավելացումով: Ահա մի դասի օրինակ, որը հակառակն է .mt-1.

.mt-n1 {
  margin-top: -0.25rem !important;
}

Ահա Bootstrap ցանցը հարմարեցնելու օրինակ միջին ( md) ընդմիջման կետում և ավելի բարձր: Մենք ավելացրել ենք .colլիցքավորումը .px-md-5և այնուհետև հակադարձել ենք .mx-md-n5ծնողի վրա .row:

Պատվերով սյունակի լցոնում

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>