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 . Aukeratu zabalera finkoko edukiontzi bat (esan nahi du max-widtheten puntu bakoitzean aldaketak) edo zabalera fluidoa (esan nahi 100%du denbora guztian zabala dela).

Edukiontziak habiaratu daitezkeen arren , diseinu gehienek ez dute habiaratutako edukiontzirik behar.

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

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

<div class="container-fluid">
  ...
</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 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:

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

// Example usage:
@include media-breakpoint-up(sm) {
  .some-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) { ... }

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.