Pari viikkoa sitten kuuluisa Säätiön puitteet julkaisi neljännen version. Jos et ole koskaan kuullut säätiöstä, aiomme opastaa sinua käyttämään tätä reagoivaa kehystä.

Koska säätiön versio 3 perustettiin SASSin avulla - CSS-esiprosessori, joka helpottaa tehokkaampien CSS-kirjojen kirjoittamista - tämä uusi versio on myös mobiiliystävällinen ja tarjoaa paljon ominaisuuksia sen verkossa, päästä muista puitteista.

Anna sukellus säätiöön ja nähdä, miksi se on niin suosittu ...

Verkko

Säätiö käyttää 12 saraketta nestable grid, joka mukautuu mihin tahansa koko näyttöön, jos olet jo käyttänyt verkkoja, tämän pitäisi olla kaikki hyvin tuttuja sinulle. Kaikki divs-säätiö käyttää laatikkokohtia: raja-laatikko niin, että reunat ja pehmusteet eivät vaikuta elementin leveyteen ja korkeuteen, jolloin matematiikka on hieman helpompi meille. Mutta hämmästyttävä asia säätiön ruudukossa on, että saat itse 2 ruudukkoa, ison ruudukon, kun ruudulla on suurempi kuin 768px leveys ja pienempi ruudukko, jota voit hallita yhtä yksinkertaisesti. Tätä varten säätiö käyttää pieniä ja suuria luokkia, kuten:

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

Tässä koodissa luotiin rivi, jossa on 3 divia, jotka ovat täsmälleen samanlaisia, kun selain on laajempi kuin 768px mutta kun se on pienempi, kuten divs: n pienen luokan mukaan näet, viimeinen on puolet kun taas kaksi muuta miehittää 25%, tämä antaa sinulle valtavan hallinnan siitä, miten verkkosivustomme näkyy kaikissa näytöissä.

Säätiön avulla voit myös korvata sarakkeen, jolla tarkoitan, että voit saada rivin, jossa on 2 saraketta, jotka ovat vain 3 saraketta leveitä, mutta voit korvata toisen, että se kelluu oikealle ja tehdä se, offset-luokka tai pieni offset-luokka:

3, offset 6

Estä verkko

Lohkoverkko on vain hieno ylimääräinen lisäys, sillä voit jakaa luettelon sisällön verkkoon, sillä se on hyödyllinen, kun haluat, että tämä osa sivustosta pysyy tasaisesti, riippumatta siitä, mikä koko selain. Tämäntyyppinen verkko käyttää pientolohkareitettä ja suuren lohkoluokan luokkia, jos asetat vain ensimmäisen, verkko pitää halutun välimatkan riippumatta siitä, mikä näkymä on, mutta jos käytät vain suurta lohko- ristikkoluokka, kun katselukerros saavuttaa 768px: n katkeamispisteen, ristikkotarvikkeet pinoavat toistensa päälle, voit aina ottaa paremman hallinnan käyttämällä molempia luokkia, kuten:

Tämän avulla kuvat ovat tasaisesti erilleen kooltaan riippumatta. Kun näkymä on suurempi kuin 768px, ne käyttävät vain yhtä riviä ja kun ne ovat pienempiä, ne käyttävät kahta riviä, joissa on kaksi kuvaa.

Päänavigointi

Nyt, kun olemme suojelleet säätiöverkkoa ja miten se antaa sinulle runsaasti valvontaa kaikissa ympäristöissä, puhumme siitä, mitä käytämme lähes aina sivustoissamme: ylimmällä navigointipalkilla. Ja tietenkin tämä navigointi voi olla myös joustava ja vähän tai ei ollenkaan työtä tämän kehyksen avulla. Voit luoda yksinkertaisen reagoivan navigoinnin säätiön avulla seuraavasti:

Tämä bittinen HTML luo yksinkertaisen navigointipalkin, jonka sivun otsikko on vasemmalla ja oikealla puolella on neljä valikkokohtaa. Huomaa myös, että kun näkymä on pienempi kuin 768px, tämä valikko korvataan luettelokuvakkeella, joka tekee tämän valikon herkäksi. Jos haluat, että tämä verkko on asettunut paikalleen, kun vierität sivua alaspäin, sinun tarvitsee vain kääriä se joukoilla kiinteän luokan kanssa . Jos haluat lisätä pudotusvalikoita navigointiin, sinun on lisättävä jotain tällaiseen paikkaan, johon haluat pudotusvalikosta:

#">  Alivalikko Osa 1
Alivalikko Osa 1
Alivalikko kohta 3

On myös mahdollista lisätä jakaja omaan listaosiin lisäämällä pieni harmaa pystysuora viiva, jotta sinun tarvitsee vain asettaa listan kohde jakaja- luokalle kahden jakamasi listan välillä, jotka haluat jakaa.

painikkeet

Kehys ei ole täydellinen ilman joitakin ennalta määritettyjä painikkeita, ja säätiöllä on käytännössä enemmän kuin yksi painikkeilla ennalta määritetty tyyli, sillä on oletusarvo, joka käyttää sinistä väriä ja sitten se lisää menestys-, hälytys- ja toissijaiset tyylejä. Lisäämällä sädeluokka antaa tämän painikkeen hieman raja-säteellä ja antamalla sille pyöreän luokan voit napin lähes kokonaan. Voit myös lisätä luokan pois päältä painikkeella ja on 4 kokoluokkaa, jotta painike niin suuri kuin tarvitset.

OletusnäppäinTiny ButtonPieni painikeSuuri painikeToissijainen painikeMenestyspainikeAlert-painikeRadius-painikePyöreä painikePoissa-painike

Yksinkertaisen pudotuspainikkeen luominen tarvitsee vain lisätä pudotusluokan viimeisen luokan jälkeen, kuten:

  h1.subheader 
  H1.  pienemmät 
  Luettelo kohde 
  Luettelo kohde 
  Linkki 1
Linkki 2

Kuten näette typografian osalta, säätiö antaa meille joitain perusapua ja sitten joitain ylimääräisiä luokkia vastaamaan kaikkiin tarpeisiimme.

Muut osat

Jos tämä säätiön puitteiden osoittaminen on herättänyt toiveesi oppia lisää ja aloittaa säätiön rakentaminen, kannattaa tutustua asiakirjoihin, koska säätiö tarjoaa myös muita CSS-komponentteja, kuten:

• Hälytyslaatikot
• paneelit
• Hinnoittelutaulukot
• Progress-palkit
• taulukot
• pikkukuvat
• Flex-video

Ja myös joitain helper-JavaScript, kuten:

• clearing
• Pudota alas
• autohurjastelu
• magellan
• kiertorata
• Paljastaa
• jakso
• työkaluvinkit

Kuten näette, säätiö voi tutkia paljon ja suosittelen sinua tarkkaan tutustumaan kaikkiin sen CSS- ja JavaScript-ominaisuuksiin.

johtopäätös

Käsittelemme juuri tässä artikkelissa, miten säätiö voi auttaa rakentamaan nopeampia ja reagoivia verkkosivustoja. Verkkoasi käyttäessäsi voit hallita verkkosivustoasi rakennetta paljon enemmän kuin normaalin joustavan verkon käyttäminen. Säätiö tarjoaa myös paljon avustajia luoda sivustosi. Toivon, että tämä artikkeli on antanut sinulle mahdollisuuden oppia ja käyttää säätiötä seuraavalle hankkeelle.

Oletko käyttänyt säätiötä projektiin? Mitä ominaisuuksia löysitte parhaiten? Kerro meille kommentit.