Ikuspegi orokorra

Zure Bootstrap proiektua ezartzeko osagaiak eta aukerak, edukiontziak biltzeko, sareta-sistema indartsua, multimedia-objektu malgua eta erabilgarritasun-klase sentikorrak barne.

Ontziak

Edukiontziak Bootstrap-en diseinu-elementurik oinarrizkoena dira eta beharrezkoak dira gure sareta sistema lehenetsia erabiltzean . Edukiontziek edukia edukitzeko, betetzeko eta (batzuetan) zentratzeko erabiltzen dira. Edukiontziak habiaratu daitezkeen arren , diseinu gehienek ez dute habiaratutako edukiontzirik behar.

Bootstrap-ek hiru edukiontzi desberdin ditu:

• .containermax-width, etenaldi-puntu erantzuteko bakoitzean a ezartzen duena
• .container-fluid, hau da width: 100%, eten puntu guztietan
• .container-{breakpoint}, hau da width: 100%, zehaztutako eten puntura arte

Beheko taulak edukiontzi bakoitza max-widthjatorrizkoarekin .containereta .container-fluideten puntu bakoitzean nola alderatzen den erakusten du.

Ikus itzazu ekintzan eta konparatu gure Grid adibidean .

Bat-batean

Gure klase lehenetsia .containerzabalera finkoko edukiontzi sentikorra da, hau da, max-widtheten puntu bakoitzean aldaketak egiten ditu.

<div class="container">
  <!-- Content here -->
</div>

Fluidoa

Erabili .container-fluidzabalera osoko edukiontzi baterako, ikuspegiaren zabalera osoan zehar.

<div class="container-fluid">
  ...
</div>

Erantzunkorra

Edukiontzi erreaktiboak berriak dira Bootstrap v4.4-n. Zehaztutako eten-puntura iritsi arte % 100eko zabalera duen klase bat zehaztea ahalbidetzen dute, eta ondoren max-widths-ak aplikatzen ditugu eten-puntu altuagoetako bakoitzean. Adibidez, .container-sm% 100eko zabalera du eten-puntura iritsi arte hasteko sm, non handituko den md, lg, eta xl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

Eten-puntuak erantzungarriak

Bootstrap lehenik mugikorra izateko garatu denez, multimedia-kontsulta gutxi batzuk erabiltzen ditugu gure diseinu eta interfazeetarako eten-puntu zentzuzkoak sortzeko. Eten-puntu hauek, gehienbat, ikuspegi minimoen zabaleretan oinarritzen dira eta elementuak eskalatzeko aukera ematen digute bista aldatzen den heinean.

Bootstrap-ek batez ere multimedia kontsulta-barrutiak edo eten-puntuak erabiltzen ditu gure iturburuko Sass fitxategietan gure diseinurako, sareta-sistemarako eta osagaietarako.

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Gure iturri CSS Sass-en idazten dugunez, gure multimedia-kontsulta guztiak Sass mixinen bidez daude eskuragarri:

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

Noizbehinka beste norabidean doazen multimedia kontsultak erabiltzen ditugu (emandako pantailaren tamaina edo txikiagoa ):

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

Berriro ere, multimedia kontsulta hauek Sass mixin-en bidez ere eskuragarri daude:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

Pantaila-tamainen segmentu bakar batera bideratzeko multimedia-kontsultak eta nahasketak ere badaude eten-puntuaren zabalera minimoa eta maximoa erabiliz.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Multimedia-kontsulta hauek Sass mixin-en bidez ere eskuragarri daude:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

Era berean, multimedia-kontsultek eten-puntuaren zabalera ugari izan ditzakete:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Pantaila-tamaina-tarte bera bideratzeko Sass nahasketa hau izango litzateke:

@include media-breakpoint-between(md, xl) { ... }

Z-indizea

Bootstrap-eko hainbat osagaik z-indexCSS propietatea erabiltzen dute, diseinua kontrolatzen laguntzen duena, edukia antolatzeko hirugarren ardatz bat eskainiz. Bootstrap-en z-indizeko eskala lehenetsia erabiltzen dugu, nabigazioa, tresna-aholkuak eta popover-ak, modalak eta abar behar bezala geruzatzeko diseinatuta dagoena.

Balio altuago hauek kopuru arbitrario batean hasten dira, nahikoa altua eta zehatza, gatazkak saihesteko. Hauen multzo estandar bat behar dugu gure geruzatutako osagaietan (tresna-aholkuak, popover-ak, nabigazio-barrak, goitibeherako zerrendak, modalak), portaeretan nahiko koherenteak izan gaitezen. 100Ez dago arrazoirik + edo + erabili ezin izan 500genuenik.

Ez dugu balio indibidual horien pertsonalizazioa bultzatzen; bat aldatuko bazenu, ziurrenik denak aldatu beharko dituzu.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

Osagaien barruan gainjarritako ertzak kudeatzeko (adibidez, botoiak eta sarrera-taldeetako sarrerak), zifra bakarreko z-indexbalio baxuak erabiltzen ditugu 1, 2eta 3egoera lehenetsietarako, pasatzeko eta aktiboetarako. Pasatzean/fokuan/aktibatuta, elementu jakin bat lehen planora ekartzen dugu z-indexbalio handiagoa duena bere ertza anai-arreben elementuen gainean erakusteko.