Bootstrap 4: zer dugu berri?

2018/07/13

Bootstrap aurkeztu zenean 2011an, haize berritua ekarri zuen Edukiak Kudeatzeko Sistemarik ez duten webguneentzat (ingelesezko CMS inizialez ezaguna) . Geroztik Bootstrap 2 eta Bootstrap 3 bertsioak nahiko segidan atera ziren. Baina 2014an Boobstrap 4 garapen fasean sartu zenetik 4 urte pasa behar izan dira bertsio hau argitaratu den arte. Baina itxaronaldiak merezi izan duela esan dezakegu.

Float vs Flex

Hobekuntza nabarmenak dakartza Bootstrap 4 framework-ak. Nabarmenena, flotatzen duten elementuen amaiera.

Bootstrap 4 garapen fasean zegoela, CSS3 maketazio sistema egonkortu egin zen guztiz, nabigatzaileek babesa ematen joan diren heinean. CSS2-k gabezia handiak zituen puntu honetan, eta partxe modukoa izan zen flotatzen duten elementuen erabilera. Bilakaera guzti horrek, Bootstrap 4 elementuak kokatzeko sistema berritzaile eta egonkor honetan oinarritzea ekarri du, maketazioa asko erraztuz.

Honek, noski, eragina izan du nabigatzaile zaharrenetan. Flex maketazio sistema ezartzeak Internet Explorer 8, 9, eta iOS 6 baztertzea ekarri du. Edonola ere, galera onargarria dela esan daiteke.

XL pantailak

Bootstrap 3 argitaratu zenean, pantaila handienak 1024 eta 1400 pixel artekoak ziren, nahiz eta 1920 pixeleko Full HD pantailak geroz eta gehiago izan. Orain, pantaila handienak nabarmen igo dira, 1920 pixelekoa normalizatuz. Honek, Bootstrap-en parrilla sisteman, XL tamainarako media queries berria gehitzea ekarri du, 1200 pixeletik gorako pantailentzat eragina duena.

Honekin batera, aipatzekoa da tamaina txikienak (XS: col-xs-XX) ez duela zertan espezifikatuta joan beharrik. Nahikoa da zutabe kopurua zehaztea.

Jarraian adibide bat:

<div class="container">
  <div class="row">
    <div class="col-12 col-xl-8"></div>
    <div class="col-12 col-xl-4"></div>
  </div>
</div>

Zutabe zabalera automatikoak eta edukira moldatzen direnak

Esan bezala, Bootstrap sistemak asko erraztu zuen maketazioa, baina aldi berean, dena oso laukituta sortzea ekarri zuen. Bootstrap 4-k aldiz, bi ezaugarri berri dakartza, oso laukitua izanaren idena baztertuz.

Zabalera automatikodun zutabeak

Orain posible da <div> etiketa bat zutabea dela zehaztea, zabalera konkreturik ezarri gabe. Nola? Besterik gabe <div class=”col”> jarriaz.

Nola eragiten duen honek maketazioan? Mota hauetako zutabeek zabaleraren %100a (12 zutabe) osatu nahiko dute, lerro berean dauden beste zutabeak kontuan harturik:

  • 2 “col” dituen lerroa sortzen badugu, konportamendua 2 “col-6” erabiltzen ariko bagina bezalakoa izango da.
  • 3 “col” dituen lerroa sortzen badugu, konportamendua 3 “col-4” erabiltzen ariko bagina bezalakoa izango da.
<div class="container">
  <div class="row">
    <div class="col">1 / 2 (auto 6)</div>
    <div class="col">2 / 2 (auto 6)</div>
  </div>
  <div class="row">
    <div class="col">1 / 3 (auto 4)</div>
    <div class="col">2 / 3 (auto 4)</div>
    <div class="col">3 / 3 (auto 4)</div>
  </div>
</div>

Baina zutabe hauen alde praktikoena tamaina finkoko zutabeak eta zutabe automatikoen konbinazioa da. Kasu hauetan beste modu batetara lortu ezingo genituzkeen konbinazioak lor ditzakegu.

<div class="container">
  <div class="row">
    <div class="col">1 / 3 (auto 1,5)</div>
    <div class="col-9">2 / 3 (9)</div>
    <div class="col">3 / 3 (auto 1,5)</div>
  </div>
  <div class="row">
    <div class="col-5">1 / 3 (5)</div>
    <div class="col">2 / 3 (auto 3,5)</div>
    <div class="col">3 / 3 (auto 3,5)</div>
  </div>
</div>

Edukira moldatzen diren zutabeak

Aurrekoen antzekoak dirudite, zabalera automatikoa baita, baina kasu honetan, zabalera <div> hauen edukiak markatuko du. Oso praktikoa izan daiteke irudiekin lan egiteko, irudien zabalera moldatzen diren zutabeak sortuz.

<div class="container">
  <div class="row">
    <div class="col">1 / 3 (auto)</div>
    <div class="col-auto">2 / 3 (auto, edukira moldatutakoa)</div>
    <div class="col">3 / 3 (auto)</div>
  </div>
</div>

Maketazioa errazten duten class ezberdinak

Bootstrap zutabeka egituratzeko erraminta baina askoz gehiago dela badakigu. Kasu honetan, berrikuntza dezente dakartza maketazioa errazteko class ezberdinak barneratuz. Adibide batzuk jarraian:

".w-100" - width: 100%; /* lerroak puskatzeko */
".order-1" - order: 1 /* zutabeak ordenez aldatzeko, 1 eta 12 artean */
".align-items-center" - /* Edukia bertikalki lerrokatzeko */
".border-0" - border: 0; /* Ertzak ez ikusteko */
".border-lg-0" - border: 0; /* lg tamainatik aurrera ertzak kentzeko */
".d-none" - display: none; /* pantailatik kentzeko */
".d-md-none" - display: none; /* md tamainatik aurrera */
".d-block" - display: block; /* bloke bezala agertzeko */
".d-md-block" - display: block; /* md tamainatik aurrera bloke bezala agertzeko */
".mt-2" - margin-top: 2rem /* Goiko margina 2rem  */

Hauek eta beste hamaika gauza interesgarri. Saltseatzera gonbidatzen zaitugu. Merezi izan du itxaronaldi luzeak!

Partekatu: