Vuonna 2011 Twitter esitteli Bootstrap-kehyksen. Sittemmin tämä CSS-kehys on nähnyt kaksi suurta uudelleenkirjoitusta, joista viimeisin (Bootstrap 3) julkaistiin vuonna 2013. Bootstrap 3 muutti CSS-kirjastoa ottamalla käyttöön mobiililähtöisen lähestymistavan, joka jätti kehyksen täysin reagoivaksi.
Vuodesta 2022 lähtien Bootstrap on versiossa viisi ja on yksi suosituimmista käyttöliittymäkehyksistä. Siinä on laaja luettelo valmiista komponenteista ja vaikuttava kokoelma JavaScript-laajennuksia. Tässä artikkelissa opit käyttämään Bootstrapia ja hyödyntämään sen ominaisuuksia parhaalla mahdollisella tavalla.
Bootstrapin asentaminen projektiisi
On kolme tapaa käytä Bootstrapia projektissasi. Voit ladata ja isännöidä CSS- ja JavaScript-tiedostoja, asentaa ne projektiisi npm: n avulla tai kopioida ja liittää asianmukaiset cdn-linkit projektiisi.
cdn-lähestymistapaa käytettäessä sinun on muistettava sijoittaa Bootstrap-linkki ennen muita CSS-linkkiä HTML-tiedostosi head-tunnisteeseen.
Joillakin Bootstrap-komponenteilla on toiminnallisia toimintoja, kuten painikkeiden vaihto ja paikannus, jotka edellyttävät JavaScriptin ja Popper-komentosarjan tuontia. Joten jos aiot käyttää toiminnallisia komponentteja, sinun on lisättävä myös komentosarjatunniste HTML-tiedostoosi.
Viimeinen asia, jonka sinun on aloitettava Bootstrapin käytön aloittamisessa, on näkymä tag.
Koska Bootstrap on mobiilien ensisijainen tekniikka, näkymä tag auttaa responsiivisessa suunnittelussa. Yksinkertainen tapa käyttää bootstrapia projektissasi on vain kopioida Bootstrapin aloitusmalli.
Verkkosivuston luominen Bootstrapilla
Kun luot uutta verkkosivustoa, yksi ensimmäisistä asioista, jotka sinun on otettava huomioon, on ulkoasu. Sen jälkeen voit siirtyä muihin osiin, kuten painikkeisiin ja typografiaan.
Bootstrapissa on kokoelma rakenneosia, joiden avulla voit järjestää web-sivun elementtejä. Nämä asettelurakenteet sisältävät:
- Säiliöt
- Ruudukko
- Sarakkeet
- Vesikourut
- Katkopisteet
Käyttämällä Bootstrap-aloitusmallin hieman muokattua versiota voit alkaa hahmotella verkkosivusi rakennetta ja lisätä uusia komponentteja.
index.html-tiedosto
Pakolliset sisällönkuvauskentätBootstrap CSS
Bootstrap
Erillinen Popper ja Bootstrap JS
Bootstrap-konttiluokka
Bootstrap kontti luokka täyttää, sisältää ja tasaa verkkosivusi elementit. Jos aiot käyttää Bootstrapia oletusruudukko, sinun on käytettävä myös Bootstrapia kontti luokkaa. Niitä on kolmenlaisia kontti luokat; kontti, säiliö-neste, ja kontti-{breakpoint}. Säiliöluokka on oletussäiliö; se on herkkä ja sillä on kiinteä leveys jokaisessa Bootstrapin kuudessa keskeytyspisteessä.
Bootstrapin kuusi oletusarvoista keskeytyspistettä sisältää:
- Erittäin pieni: Alle 576 pikseliä.
- Pieni: Suurempi tai yhtä suuri kuin 576 kuvapistettä.
- Keskikokoinen: Suurempi tai yhtä suuri kuin 768 kuvapistettä.
- Suuri: Suurempi tai yhtä suuri kuin 992 kuvapistettä.
- X-suuri: Suurempi tai yhtä suuri kuin 1200 kuvapistettä.
- XX-suuri: Suurempi tai yhtä suuri kuin 1400 kuvapistettä.
Bootstrapin käyttämiseen kontti projektissasi voit yksinkertaisesti lisätä halutun konttiluokan ulkoiseen div verkkosivullasi.
Bootstrapin säilön käyttäminen
sijoittaa sivuston elementit tähän Yllä olevan koodin lisääminen olemassa olevan HTML-tiedostosi tekstiosaan tekee verkkosivustasi responsiivisen, ja se myös luo täyteen verkkosivusi kummallekin puolelle.
Bootstrap Grid System
Bootstrapin ruudukko käyttää kahdentoista sarakkeen järjestelmää, joka perustuu rivi ja kol grid-luokat sekä konttiluokka. Jokaisella rivillä on kaksitoista saraketta, ja mikä tahansa elementti voi ulottua yhden tai useamman näistä sarakkeista. Sarakeluokka osoittaa, kuinka monta saraketta elementin tulee varata. Esimerkiksi elementti, joka käyttää sarake-2 luokka kattaa kaksi saraketta, elementti käyttää sarake-3 luokka kattaa kolme saraketta ja niin edelleen.
Bootstrap-grid-järjestelmä perustuu flexbox-moduuliin. Jos yhdellä rivillä on vain kaksi saraketta, ne jakavat tilan tasaisesti keskenään. The kouru luokka on yksi Bootstrapin rakenneelementeistä, ja se ohjaa jokaisen sarakkeen välistä etäisyyttä verkkojärjestelmä. Jokainen ruudukko sarakkeessa on 12 pikseliä pehmuste molemmilla puolilla.
Bootstrapin grid-järjestelmän käyttäminen
verkkosivun pääsisältö
Artikla
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae
obcaecati illo laboriosam a, voluptate molestias eum velit, differentio impedit
ratione facere numquam, optio eligendi delectus cumque quos.
Yllä olevan koodin lisääminen säilön div luo Bootstrap-ruudukkojärjestelmän, jossa on kolme riviä ja kaksi saraketta. Yläosan ensimmäisellä rivillä on navigointipalkki, alareunan kolmannella rivillä verkkosivuston alatunniste ja toisella rivillä keskellä verkkosivun sisältö. Toisella rivillä on kaksi saraketta – pääartikkeli ja sivu.
Luomalla paikallisen CSS-tiedoston ja lisäämällä reunuksen jokaiseen ruudukon osaan näet sen selkeämmin.
Style.css-tiedosto
.rivi{
reuna: 2px sininen kiinteä;
}
.col, .col-sm-4{
reuna: 2px punainen kiinteä;
}
Yllä olevaan CSS-tiedostoon linkittäminen luo selaimeesi seuraavan tulosteen:
Ilmeinen ero yllä olevassa kuvassa on sarakkeiden koko. Yleensä kaksi (tai useampi) saraketta rivissä vie saman verran tilaa, ellet nimenomaisesti ilmoita toisin. The col-sm-4 luokka yllä olevassa HTML-koodissa varmistaa, että toinen sarake kattaa vain neljä rivin kahdestatoista sarakkeesta. The sm in col-sm-4 luokka edustaa pientä keskeytyspistettä, joten sivuosio vie vain neljä saraketta pienestä keskeytyskohdasta ja sen yläpuolelta.
Bootstrap-komponentit
Kun olet päättänyt verkkosivusi asettelun, seuraava vaihe on lisätä verkkosivuston rakennuselementtejä, joita Bootstrap kutsuu komponenteiksi. Bootstrapin komponenttiluettelo sisältää:
- Navbar
- Painikkeet
- Painikeryhmä
- Listaa ryhmä
- Kortit
- Romahdus
- Pudotusvalikosta
Bootstrap Navbar -luokka
Jokainen Bootstrap-navigointipalkki vaatii navigointipalkki luokkaa. Ne edellyttävät myös tai "navigointi"-avainsanan määrittäminen Bootstrapiin rooli attribuutti navigointipalkin ylätasossa div. Jotta navigointipalkista tulee reagoiva, sinun on käytettävä tiivistä JavaScript-laajennus.
Bootstrap navigointipalkki luokka käyttää an aria-virta attribuutti, joka käyttää sivu-arvon osoittamaan nykyistä sivua tai "true" osoittamaan verkkosivun nykyistä osaa. Määrittämäsi arvo riippuu verkkosivustosi rakenteesta (yksi sivu tai useita sivuja). Sinun tulee myös käyttää aktiivinen luokka osoittamaan nykyisen sivun tai osion.
Bootstrapin navigointipalkin käyttäminen
Navigoinnin vaihto rivi Bootstrapista ruudukko yllä olevan koodin kanssa luo seuraavan tulosteen selaimeesi:
Yllä olevassa koodissa on useita muita tärkeitä luokkia ja Bootstrap-attribuutteja, kuten navbar-brändi luokka, joka kohdistaa logoosi navigointipalkki. The navigointipalkki on myös täysin reagoiva kiitos tiivistä JavaScript-laajennus.
Responsiivinen Navbar
Saatat muistaa, että Bootstrapissa on kuusi oletusarvoa keskeytyspisteitä ja yksi näistä murtopisteistä on suuri (lg). The navbar-expand-lg luokassa yllä oleva laajenee vaakasuuntaiseksi luetteloksi navigointikohteista suuressa keskeytyskohdassa ja sen yläpuolella, ja luettelo palaa painikkeeksi missä tahansa suuren keskeytyskohdassa.
Jos haluat oppia lisää responsiivisten verkkosivustojen luomisesta, olemme koonneet yhteenvedon miten tämä tehdään HTML- ja CSS-mediakyselyillä.
Bootstrap-painikekomponentti
Bootstrap -painiketta komponentti käyttää ja vaatii, että asetat tyyppi määrite "painikkeelle".
Bootstrapissa on useita painikkeita. Luodaksesi tavanomaisemman painikkeen käytät btn luokkaa, mutta luodaksesi hampurilaispainikkeen, kuten yllä olevassa koodissa, käytä Navbar-toggle luokkaa.
Milloin sinun pitäisi käyttää Bootstrapia?
Bootstrap tunnetaan yhtenä suosituimmista CSS-kehyksistä, koska se on edelläkävijä. Kauan ennen kuin responsiivinen suunnittelu oli niin yleistä ohjelmistokehityksessä, Bootstrap muutti itsensä täysin reagoivaksi viitekehykseksi.
Vuosien varrella Bootstrap on jatkanut edistymistä ja parantamista tehden siitä ykkösvaihtoehdon huippuyrityksille, kuten Twitterille ja Spotifylle. Se ei kuitenkaan aina ole paras vaihtoehto ohjelmistokehitystarpeisiisi. Jos esimerkiksi luot React-sovellusta, siellä on MUI-niminen suunnittelujärjestelmä, joka on mukautettu React-sovelluksiin.
Material-UI on saanut uuden nimen ja tavoitteena on luoda uusi suunnittelujärjestelmä vaihtoehto Material Designille. Näin voit käyttää MUI: ta ReactJS-projekteissa.
Lue Seuraava
- Ohjelmointi
- Viserrys
- Koodausvinkkejä
- Ohjelmointi
- Ohjelmointityökalut
Kadeisha Kean on Full-Stack-ohjelmistokehittäjä ja tekninen/teknologiakirjoittaja. Hänellä on selkeä kyky yksinkertaistaa joitain monimutkaisimmista teknologisista käsitteistä; tuottaa materiaalia, jonka jokainen teknologia-aloittelija voi helposti ymmärtää. Hän on intohimoinen kirjoittamiseen, mielenkiintoisten ohjelmistojen kehittämiseen ja maailmalla matkustamiseen (dokumenttien kautta).
tilaa uutiskirjeemme
Liity uutiskirjeemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia e-kirjoja ja eksklusiivisia tarjouksia!
Klikkaa tästä tilataksesi
