Source

Ikuspegi orokorra

Zure Bootstrap proiektua ezartzeko osagaiak eta aukerak, edukiontziak biltzeko, sare-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).

Ontziak 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 erantzuleak

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

Kontuan izan arakatzaileek gaur egun barruti-testuinguruko kontsultak onartzen ez dituztenez, zatiki-zabalera duten aurrizki eta bistaratzeen mugak min-eta max-aurrizkiak (baldintza jakin batzuetan gerta daitezkeela, adibidez, ppp handiko gailuetan) konparazio hauetarako zehaztasun handiagoko balioak erabiliz. .

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-puntuen 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, popovers, 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 aldatuz gero, 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 gainjartzen diren ertzak kudeatzeko (adibidez, botoiak eta sarrera-taldeetako sarrerak), , , eta lehenetsitako, pasatzeko eta aktiboko egoerarako zifra bakarreko z-indexbalio baxuak erabiltzen ditugu. Pasatzean/fokuan/aktibatuta, elementu jakin bat lehen planora ekartzen dugu balio handiagoa duena bere ertza anai-arreben elementuen gainean erakusteko.123z-index