Johdanto Bootstrap-asetteluun
Elämme maailmassa, jossa Internetistä on tullut tärkeä osa elämäämme. Digitalisaatio ympäri maailmaa muuttaa yrityksiä hämmästyttävällä tavalla. Tässä digitaalisesti toisiinsa kytketyssä maailmassa tarve luoda vahva ja reagoiva web-läsnäolo on ensiarvoisen tärkeää. Olipa kyse älypuhelimesta, iPadista, kannettavasta tietokoneesta tai työpöydästä, on tärkeää, että kaikilla alustoilla on sama katselukokemus.
Bootstrap on käyttöliittymä, avoimen lähdekoodin kehys, jossa on CSS: n, HTML: n ja JavaScriptin yhdistelmä. Yleisesti; Bootstrap-ohjelmaa käytetään reagoivien, mobiiliystävällisten verkkosivujen luomiseen. Bootstrap-ohjelmiston uusimmalla versiolla on mahdollista järjestää tai muuttaa joidenkin komponenttien kokoa. Tämän avulla käyttäjä voi saada sopivan koon lukemista varten. Käynnistyslokeron asettelu koostuu säilöistä, tehokkaasta verkkojärjestelmästä, reagoivista apuohjeluluokista ja mediaobjektista.
Bootstrap-asettelun tyypit
Käynnistysastioiden asettelutyypit riippuvat käytetystä säilytyypistä. Asettelua on 2 tyyppiä -
.Säiliöneste ( nesteasettelu )
.Kontti (kiinteä asettelu)
Luodessasi reagoivan asettelun voit valita yhden kahdesta säilöstä. Voidaan luoda reagoiva verkkosivusto molemmilla säilöillä. Nämä säiliöt ovat erilaisia tietyistä näkökohdista. Nesteasettelun enimmäisleveys taas on, kun kiinteällä asettelulla on tietyt pikselileveyden arvot leveyden muuttamiseksi. Nesteasettelun koko muuttuu jatkuvasti, kun ikkunan tai selaimen leveyttä muutetaan.
Kuinka käyttää Bootstrap-asettelua tehokkaasti
- Kuten jo tiedämme, tämä kehys koostuu lukuisista elementeistä - säilöistä, tehokkaasta verkkojärjestelmästä, reagoivista apuohjeluluokista ja mediaobjekteista. Tämä Bootstrap-kehyksen ruudukkojärjestelmä koostuu kolmesta osasta, nimittäin: Kontti - Rivi - Pylväät.
- Kontti on elementti, joka pitää tehokkaasti rivejä ja sarakkeita ja jolla on tärkeä tehtävä tarjota oikea leveys tietylle asettelulle. Rivit-nuoli on luokkakomponentti, joka purkaa padding-valikon ja toimii käärenä kaikissa sarakkeissa. Bootstrapissa käytetään erilaisia sarakkeen luokan etuliitteitä erilaisille laitteille.
- Tämä säilö-, rivi- ja sarakerakenne vastaa verkkosivun saattamisesta reagoivaksi. Kaikki yhdessä muodostavat tehokkaan sisältölohkon sivulle. Kuten esineet tai tuotteen ominaisuudet ja niin edelleen.
- Mitä sivulla luetellaan, pidetään sisältölohkona. Ensimmäinen askel kohti reagoivan verkkosivuston luomista on kääri koko sisältö .containeriin. Se ei ole muuta kuin minikangas, jossa säilytämme sisältömme. Se rajoittaa paikan leveyttä. Niitä käytetään tietyn leveyden antamiseksi näkymän mukaan. .Container-nesteellä voit antaa enimmäisleveyden tietylle näkymäportille. Tämän avulla se voi luoda täysleveyden sivun asettelun.
- Sen jälkeen asetamme .row-elementin .containeriin. Tämä vaihe on tärkeä sisälle sijoitetun sisältöelementin täydellisen kohdistamisen kannalta. Bootstrap-kehyksen uusimmassa versiossa käytetään muotoilutapaa-flexbox rivielementeillä. On mahdollista saavuttaa kaiken tyyppiset mitoitukset, jakelu, tilaaminen ja kohdistaminen lisäämällä vain luokka
- Lopulta sijoitamme .col-elementit rivin sisäpuolelle. .col-elementit ovat vain todellinen sarake, joka sisältää sisältöä. Jos tarkastellaan esimerkkiä ominaisuusluettelosta, jokainen ominaisuus sijoitetaan vastaavaan sarakkeeseen. Pylväät toimivat yhdessä säilytysastioiden ja rivien kanssa tarjotakseen reagoivan käytön verkkosivulle.
- Sarakkeen tehtävänä on näyttää suoraviivainen alas tietyn leveyden näyttöportista. Pylväät ottavat määritellyn osan siitä ja pinoutuvat toistensa päälle, kun näyttökenttä pienenee ja täyttää koko käytettävissä olevan leveyden. Voimme nähdä muutaman sarakkeen, jos näyttö on leveämpi tai muuten, näemme sarakkeet yksi kerrallaan, tällä tavalla saadaan reagoiva, helppo lukea verkkosivusto tehokkaalla asettelulla.
Bootstrap-asettelun konfigurointi
1) Kontti
Tämä on Bootstrap-sovelluksen tärkein asetuselementti. Kontteja käytetään sisäistä verkkojärjestelmää käytettäessä. Kuten jo keskustelimme, meillä on kaksi vaihtoehtoa astiasta kiinteänä asetussäiliönä ja nesteasetussäiliönä. Käynnistyslokerossa tämä voidaan upottaa, mutta suurimmassa osassa asettelua ei tarvita sisäkkäistä säilöä. Säiliöneste ei ole mitään, mutta täysleveä säiliö, jota käytetään tarkastelemaan koko näkymää, kun taas .säiliössä on erityiset pikseliarvot leveyden muuttamiseksi.
2) Responsiiviset raja-arvot
Bootstrap-sovelluksessa on tarpeen luoda järkeviä raja-arvoja asetteluille ja rajapinnoille, koska sitä käytetään pääasiassa mobiiliystävällisten verkkosivustojen kehittämiseen. Nämä rajapisteet toimivat vähimmäisikkuna-ikkunan periaatteen mukaisesti. Näkymäportin muutosten mukaan välipisteet mahdollistavat elementtien skaalaamisen.
3) Z-indeksi
Harvat komponentit käyttävät z-indeksiä sisällön järjestelyyn. Z-hakemisto tarjoaa kolmannen akselin sisällön oikealle järjestämiselle ja asettelun hallinnan. Tätä Z-indeksiä käytetään erityisesti kerrostamaan navigointia, malleja, työkaluvihjeitä ja ponnahdusikkunoita jne. Nämä korkeammat arvot alkavat mielivaltaiselta numerolta vaikeuksien välttämiseksi. Kerrostettujen komponenttien, kuten ponnahdusikkunoiden, työkaluvihjeiden, navigointipalkin ja pudotusvalikoiden välillä, tarvitaan vakiojoukko Z-indeksiä johdonmukaiseksi käyttäytymiseksi.
Näitä arvoja ei tarvitse muuttaa. Jos muutat yhtä arvoa, sinun on muutettava Z-indeksin koko arvo. Yksinumeroisia z-indeksiarvoja käytetään komponenttien rajojen päällekkäisyyksien käsittelemiseen. Korkeampia indeksiarvoja käytetään tietyn elementin tuomiseen eteen. Tämän kehyksen avulla voidaan asettaa viiden sarakkeen esiintymiset. Mutta enintään kolmen sarakkeen esiintymiset voivat antaa sinulle parhaan katselukokemuksen
johtopäätös
Tämän viestin yllä olevat osat ovat korostaneet Bootstrap-asettelun olennaista seikkaa. Tämä viesti antaa tietoa erityyppisistä asetteluista ja käynnistysastioiden asetteluelementeistä - sen perusteista ja toiminnasta. Tämän oppaan avulla saat perusidean reagoivasta web-suunnittelusta ja -kehyksestä. Bootstrapin avulla on mahdollista näyttää paras sisältö millä tahansa näytöllä ja kehittää helposti mobiililaitteisiin valmisteltava, reagoiva verkkosivusto. Aloittelijoille ja IT-harrastajille tämä tieto voi auttaa heitä tutkimaan Bootstrap-tekniikan maailmaa.
Suositellut artikkelit
Tämä on opas Bootstrap-asetteluun. Tässä keskustelimme johdannosta, Bootstrapin käytöstä, asettelutyypeistä ja konfiguroinnista. Voit myös käydä läpi muiden ehdotettujen artikkeleidemme saadaksesi lisätietoja -
- Kulma vs Bootstrap
- Kuinka asentaa Bootstrap
- Bootstrap-komennot
- Bootstrap vs jQuery UI