Jos teet jotain verkkoon liittyvää, olet todennäköisesti kuullut Bootstrapista. Jos et vielä tiedä, mikä Bootstrap on, tai haluat vain löytää Bootstrap-opetusohjelman aloittelijoille saadaksesi paremman yleiskuvan siitä, mikä se on ja mitä se parhaiten tekee, olet tullut oikeaan paikkaan.
Bootstrap on tehokas työkalupakki - kokoelma HTML-, CSS- ja JavaScript-työkaluja verkkosivujen ja verkkosovellusten luomiseen ja rakentamiseen. Se on ilmainen ja avoimen lähdekoodin projekti, jota isännöidään GitHub ja alun perin luonut (ja varten) Viserrys .
Joten, miksi oppia Boostrapia?
Vuonna 2011 julkaistun avoimen lähdekoodin julkaisun jälkeen Bootstrapista tuli suosittu erittäin nopeasti eikä ilman syytä. Verkkosuunnittelijat ja verkko kehittäjät, kuten Bootstrap koska se on joustava ja helppo työskennellä. Sen tärkeimmät edut ovat, että se on rakenteeltaan reagoiva, sillä on laaja selainyhteensopivuus, se tarjoaa tasaisen suunnittelun käyttämällä uudelleenkäytettäviä komponentteja, ja se on erittäin helppo käyttää ja nopeasti oppia. Se tarjoaa runsaasti laajennettavuutta JavaScriptiä käyttämällä, ja siinä on sisäänrakennettu tuki jQuery-laajennuksille ja ohjelmallinen JavaScript-sovellusliittymä. Bootstrapia voidaan käyttää minkä tahansa IDE: n tai editorin ja minkä tahansa palvelinpuolen tekniikan ja kielen kanssa, ASP.NET: stä PHP: hen ja Ruby on Rails: iin.
Bootstrapin avulla web-kehittäjät voi keskittyä kehitystyöhön huolimatta suunnittelusta ja saada hyvännäköisen verkkosivuston käyttöön nopeasti. Päinvastoin, se antaa web-suunnittelijoille vankan perustan mielenkiintoisten Bootstrap-teemojen luomiselle.
Bootstrap on saatavana kahdessa muodossa; valmiiksi käännetty versio ja lähdekoodiversio. Lähdekoodiversio käyttää Vähemmän CSS-esiprosessori, mutta jos pidät enemmän Sassista, siellä on Bootstrapin virallinen Sass-satama myös saatavilla. Bootstrap käyttää CSS-toimittajan etuliitteiden käytön helpottamista Automaattinen korjaus .
Lähdekoodiversio sisältää tyylit, jotka on kirjoitettu Less (tai Sass), kaikki JavaScripti ja mukana olevat asiakirjat. Tämä antaa kunnianhimoisemmille suunnittelijoille ja kehittäjille mahdollisuuden muuttaa ja räätälöidä kaikki haluamansa tyylit ja rakentaa oma versio Bootstrapista. Mutta jos et tunne Lessia (tai Sassia) tai et ole vain kiinnostunut lähdekoodin muuttamisesta, älä huoli. Voit käyttää vain esikäännettyä vanilja CSS: ää. Kaikki tyylit voidaan ohittaa myöhemmin käyttämällä mukautettuja tyylejä.
Keskitymme esikäännettyyn versioon, joka voidaan ladata tässä . Kun lataat zip-arkiston ja purat sen pakkauksen, tiedostojen perusrakenne näyttää tältä:
bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2
Bootstrap-rakenne on melko yksinkertainen ja itsestään selvä. Se sisältää valmiiksi käännettyjä tiedostoja, jotka mahdollistavat nopean käytön missä tahansa verkkoprojektissa. Käännettyjen ja pienennettyjen CSS- ja JS-tiedostojen lisäksi se sisältää myös fontteja Pelimerkit ja valinnainen aloituskäynnistys teema.
Tämä rakenne voidaan helposti sisällyttää oman projektisi tiedostorakenteeseen sisällyttämällä vain Bootstrap-tiedostot täsmälleen sellaisina kuin ne tulevat ulos zip-arkistosta, tai jos se sopii projektillesi paremmin, voit järjestää nämä tiedostot uudelleen ja sijoittaa ne minne haluat. Varmista vain, että Glyphicons-fontit-kansio on samalla tasolla kuin CSS-kansio.
Bootstrap-HTML-perusmallin tulisi näyttää tältä:
Bootstrap Template
On tärkeää aloittaa kaikki HTML-tiedostot HTML 5 Doctype -ilmoituksella, jotta selaimet tietävät, minkälaisen asiakirjan he voivat odottaa. Pää sisältää kolme tärkeää tunnusta, jotka on ilmoitettava ensin, ja mahdolliset ylimääräiset otsikkotunnisteet on lisättävä näiden jälkeen. Jos haluat tukea vanhempia selaimia, kuten IE8, voit myös sisällyttää HTML 5 välilevy päähän, mikä mahdollistaa HTML5-elementtien käytön vanhemmissa selaimissa, ja Respond.js , joka täyttää CSS3-mediakyselyt Internet Explorerin vanhoissa versioissa.
...
Vaikka tämä ei ole kovin tärkeää, jos kohdistat vain moderneihin selaimiin.
JavaScript-tiedostot lisätään rungon loppuun, jotta verkkosivu voidaan ladata näkyvästi ennen JavaScriptiä suoritetaan. jQuery tarvitaan Bootstrap-laajennuksiin, ja se on ladattava ennen bootstrap.js
. Jos et käytä mitään Bootstrapin interaktiivisia ominaisuuksia, voit myös jättää nämä tiedostot lähteestä.
Tämä on vähimmäisvaatimus, jota tarvitaan Bootstrap-perusasettelun saamiseksi käyttöön. Jos olet kehittäjä, sinun kannattaa todennäköisesti tarkastella joitain kehittyneempiä esimerkkejä osoitteessa Bootstrapin esimerkkisivu . Jos olet suunnittelija tai etsit vain inspiraatiota, Bootstrap Expo esittelee sivustoja, jotka on rakennettu Bootstrapilla. Kuten näemme myöhemmin, jokainen Bootstrapin osa voidaan helposti muokata CSS: ssä. Mutta jos se ei ole sinun juttusi ja etsit hieman erilaista ulkoasua kuin valmiiksi pakatut Bootstrap-teemat, tarjolla on paljon ilmaisia, avoimen lähdekoodin ja premium-teemoja lähteistä, kuten Saappaat ja WrapBootstrap .
Bootstrap mukana toimitetaan HTML- ja CSS-perusmallit, jotka sisältävät monia yleisiä käyttöliittymäkomponentteja. Näitä ovat typografia, taulukot, lomakkeet, painikkeet, kuviot, pudotusvalikot, painikkeet ja syöttöryhmät, navigointi, sivutus, tarrat ja merkit, hälytykset, edistymispalkit, modaalit, välilehdet, harmonikat, karusellit ja monet muut.
Monet näistä käyttävät JavaScript-laajennuksia ja jQuery-laajennuksia.
Nämä Bootstrap-mallit ovat saatavana hyvin harkittuina CSS-luokkina, joita voit käyttää HTML-koodissasi erilaisten vaikutusten saavuttamiseksi. Tämä tekee Bootstrapin käytöstä erittäin kätevää. Käyttämällä semanttisia luokkien nimiä, kuten .success
, .warning
ja .info
, nämä komponentit ovat helposti uudelleenkäytettäviä ja laajennettavissa. Mutta vaikka Bootstrap käyttää kuvaavia luokkien nimiä, joilla on merkitystä, se ei tarkoita toteutuksen yksityiskohtia. Kaikki luokat voidaan ohittaa mukautetulla CSS-tyylillä ja -väreillä, ja silti luokan merkitys pysyy samana.
Ennen kuin sukellamme enemmän Bootstrap-komponentteihin ja suunnittelumalleihin, on tärkeää mainita yksi tärkeimmistä ominaisuuksista, jotka Bootstrap esitteli versiossa 3: a mobile-first design filosofia, jonka tuloksena syntyi Bootstrap, joka on muotoilulta herkkä. Lopputuloksena on, että Bootstrap skaalaa helposti ja tehokkaasti yhdellä koodipohjalla, puhelimista, tableteista, työasemiin.
Tämä herkkyys saavutetaan käyttämällä juoksevaa Bootstrap-ruudukkojärjestelmää, jota voidaan käyttää skaalattamaan asianmukaisesti jopa 12 saraketta laitteen tai näkymän koon mukaan. Ruudukot tarjoavat rakenteen rakenteeseen, jossa määritellään vaaka- ja pystysuuntaiset ohjeet sisällön järjestämiseksi ja marginaalien valvomiseksi. Ruudukot tarjoavat myös intuitiivisen rakenteen katsojille, koska sivua alaspäin liikkuvan sisällön kulkua vasemmalta oikealle tai oikealta vasemmalle on helppo seurata. Ennen ruudukkoja ja ennen kuin CSS oli niin tehokas, ruudukkopohjaiset asettelut saavutettiin käyttämällä taulukoita, joissa sisältö olisi järjestetty taulukon solujen sisään. Kun CSS muuttui kypsemmäksi, alkoi näkyä joukko CSS-kehyksiä ruudukkopohjaisille asetteluille. Nämä sisältävät YUI-ruudukot , 960 GS ja suunnitelma , muutamia mainitakseni.
Voit käyttää Bootstrap-ruudukkojärjestelmää muutamia sääntöjä on noudatettava . Ruudukon sarakeelementit sijoitetaan rivielementtien sisään, jotka luovat vaakasuorat sarakeryhmät. Sivulla voi olla niin monta riviä kuin haluat, mutta sarakkeiden on oltava välittömiä rivien lapsia. Sarakkeen leveydet ovat koko rivillä mikä tahansa yhdistelmä, joka lisää enintään 12, mutta ei ole pakollista käyttää kaikkia 12 käytettävissä olevaa saraketta.
Rivit on sijoitettava joko kiinteän leveyden asettelukääreeseen, jolla on .container
luokan ja 1170 kuvapisteen leveyden, tai täysleveässä ulkoasupakkauksessa, jossa on .container-fluid
luokassa ja joka mahdollistaa reagoivan käyttäytymisen kyseisellä rivillä.
Bootstrap-ruudukkojärjestelmässä on neljä luokkaa: xs puhelimille (<768px), sm tableteille (≥768px), md pöytätietokoneille (≥992px) ja lg suuremmille työasemille (≥1200px). Nämä määrittelevät periaatteessa koot, joilla sarakkeet romahtavat tai leviävät vaakasuoraan. Luokkatasoja voidaan käyttää missä tahansa yhdistelmässä dynaamisten ja joustavien ulkoasujen saamiseksi.
Esimerkiksi, jos haluamme saada kaksi riviä, toisessa kaksi saraketta ja toisessa neljä, voimme kirjoittaa:
First column Second column First column Second column Third column Fourth column
Voimme käyttää myös sekoitettuja sarakeleveyksiä:
Wider column Smaller column
Voimme jopa siirtää sarakkeita siirtymällä, esimerkiksi luoda kapeampi ja keskitetympi sisältö:
Centered column
Sarakkeet voidaan sisäkkäin. Sarakkeita voi olla vähemmän kuin 12, ja kuten edellä mainittiin, voimme valita kiinteän tai koko leveän sarakkeen käyttämällä .container
tai .container-fluid
kääreitä.
Parent fixed-width column Nested column Nested column Fluid .. .. and full-width .. .. example
Jos yhdistämme erilaisia luokkatasoja, saamme erilaiset ulkoasut mobiili- ja työpöydänäkymissä. Alla olevassa esimerkissä työpöydällä on 4 saraketta rivillä, ja mobiililaitteilla niiden koko leveys ja pino ovat toistensa päällä.
.col-xs-12 .col-md-3 .col-xs-12 .col-md-3 .col-xs-12 .col-md-3 .col-xs-12 .col-md-3
Onko mahdollista Poista sivun reagointi käytöstä täysin. Tämä poistaa periaatteessa Bootstrapin 'mobiilisivusto' -ominaisuudet. Muista vain, että jos poistat reagoivuuden käytöstä, kiinteän leveyden komponentit, kuten kiinteä navigointipalkki, eivät ole näkyvissä, kun näkymä on kapeampi kuin sivun sisältö. Reagoimattomalle säiliölle se tarkoittaa 970 kuvapisteen leveyttä. Tässä tapauksessa navbarit eivät romahdu mobiilinäkymissä, kuten myöhemmin on kuvattu.
Nämä ovat vain perusesimerkkejä. Jos haluat nähdä ruudukoiden koko potentiaalin, tarkista Bootstrap's Grids -dokumentaatio .
Aloittavat kehittäjät olettavat usein, että puhdas ja tyyliltään tyylikäs HTML näyttää samalta kaikissa selaimissa. Valitettavasti jokaisella selaimella on oma oletus 'käyttäjäagenttityyli', jota käytetään HTML: ssä, eikä kahdella selaimella ole samoja oletusasetuksia. Esimerkiksi otsikkofonttikoot eivät ole yhdenmukaiset selaimissa, joissakin järjestämättömissä ja järjestetyissä luetteloissa on vasemmalla marginaali ja toisilla on vasen täyte, selaimet käyttävät mukautettuja reunoja ja täytteitä HTML-runkoon, ja jopa painikkeet renderoidaan eri tavalla selaimissa. Kaikkien näiden epäjohdonmukaisuuksien ratkaisemiseksi syntyivät erilaiset CSS: n 'nollaus' -säännöt, jotka määrittelevät johdonmukaiset tyylin oletusasetukset.
Bootstrap tuo pöydälle lisää herkkuja puhtaan CSS-palautuksen lisäksi. Sen mukana tulee normalize.css , HTML5-yhteensopiva vaihtoehto CSS-palautuksille, ja sillä on myös joitain hyvin suunniteltuja oletusasetuksia. Esimerkiksi Bootstrap asettaa yleisen oletusarvon font-size
14 kuvapisteeseen, linjan korkeus 1,428. Oletusfontiksi vaihdetaan Helvetica / Arial, jossa on sans serif -vaihtoehto. Kaikkia näitä tyylejä sovelletaan kaikkiin kappaleisiin, lisäksi (kappaleet) saavat alamarginaalin puolet lasketusta viivan korkeudesta (oletusarvoisesti 10 kuvapistettä). Näiden oletusarvojen lisäksi tavallisille HTML-tunnisteille on myös mukautettavia tyylejä, jotka tuovat tekstiin enemmän yhtenäisyyttä, kuten korostettu teksti (), poistettu teksti (ja), alleviivattu teksti (), pieni teksti () ja lihavoitu teksti (
). Kohdistusluokat auttavat järjestämään sivun sisällön helpommin käyttämällä .text-left
, .text-center
, .text-right
, .text-justify
ja .text-nowrap
luokat. Lohkokursseille ja järjestämättömälle ja järjestetylle listalle on myös ennalta määriteltyjä tyylejä, joissa on vain muutamia mainitakseni. Saadaksesi täydellisen luettelon, siirry Bootstrap Typography -sivu .
Yksi mielenkiintoinen asia, jonka Bootstrap myös tekee mahdolliseksi, on se, että voit käyttää esimerkiksi otsikkotyylejä käyttämällä joko -tunniste tai
.h1
luokassa. Jälkimmäinen vastaa -tyyliä otsikon, mutta sallii tekstin näyttämisen linjassa.
Lomakkeet ovat kulkeneet pitkän matkan vuosien varrella, ja nykyään verkkolomakkeen käyttäminen on yksi yleisimmistä toiminnoista, joita suoritetaan web-selailun aikana. Vaikka HTML5 esitteli useita uusia lomakemääritteitä, syöttötyyppejä ja muita auttajaelementtejä, selaimet eivät ole parantaneet lomakkeita visuaalisesti paljon. Tämä on yksi alue, jolla Bootstrap todella loistaa, koska tarrojen ja syötteiden kohdistaminen ja muotoilu, lomakkeiden validointi ja virhesanomien näyttäminen voi olla hankalaa ilman apua.
Ensinnäkin Bootstrap asettaa kaikki tekstinsyöttöelementit, kuten ,, ja, 100%: n päälomakelementin leveydelle. Se antaa sinulle myös mahdollisuuden valita sisäisten lomakkeiden välillä, jotka tekevät useita tarroja ja syöttökenttiä samalla rivillä, käyttämällä .form-inline
luokka tai vaakasuuntaiset lomakkeet, jotka tasoittavat ruudukkoja jokaisen syötteen omalle rivilleen käyttämällä .form-horizontal
luokassa. Ja jos haluat sijoittaa pelkkää tekstiä lomaketunnisteen viereen, kentän sijaan voit antaa sille .form-control-static
luokassa, jotta se vastaa lomakkeen visuaalista ulkoasua.
Ehkä suurin ominaisuus, jonka Bootstrap tuo lomakkeisiin, on virheiden, varoitusten ja menestystilojen validointityylit. Näitä voidaan käyttää käyttämällä .has-warning
, .has-error
ja .has-success
luokkiin. Yhdistämällä tämä kuvakkeisiin, jotka voidaan sijoittaa syöttölomakkeiden sisään, voimme saada nopeita ja tehokkaita lomakkeiden vahvistusvaikutuksia, jopa käyttämättä virhetekstiviestejä.
Seuraa koodinpätkä luo syötekentän @ -merkillä, joka osoittaa, että etsimme sähköpostia, sekä varoituskuvakkeen ja keltaisen ääriviivan, joka osoittaa, että syötekentässä on jotain vikaa.
Email address input field with warning @ (warning)
Jälleen kerran olemme vain naarmuuntuneet pintaan täällä. Katso lisää esimerkkejä Bootstrap's Forms -dokumentaatio .
Bootstrapissa olevat kuvat voidaan tehdä reagoiviksi yksinkertaisesti antamalla heille .img-responsive
luokassa. Tätä sovelletaan max-width:100%;
height:auto;
ja display:block;
kyseiseen kuvaan niin, että se skaalautuu pääelementtiin.
Kuvien herkkyyden lisäksi voimme helposti lisätä erilaisia tehosteita. Esimerkiksi pyöristettyjä kulmia käytetään .img-rounded
-merkillä luokka, ja kuvan voi muotoilla ympyräksi käyttämällä .img-circle
tai pikkukuvaksi käyttämällä .img-thumbnail
luokassa.
Bootstrap mukana toimitetaan yli 260 glyfä fonttimuodossa Glififonit aseta. Glyphiconsin kirjailija ja suunnittelija Jan Kovařík on asettanut ne saataville Bootstrapille ilmaiseksi ja samalla lisenssillä kuin Bootstrap, mikä on mahtavaa. Fontti kuvakkeet on monia etuja tavallisiin rasterikuviin verrattuna, iso on se, että ne ovat skaalautuvia. Ne voidaan myös helposti mukauttaa vain CSS: llä, joten koon tai värin käsittely tai jopa varjon lisääminen on helppoa.
Painikkeet ovat yksi niistä asioista, joita jokainen selain tekee täysin eri tavalla. Jos haluat yhdenmukaisen suunnittelun kaikissa selaimissa, tämä on mahdollisesti suuri ongelma. Onneksi Bootstrapilla on tyylikäs ratkaisu painikkeita myös. Sen lisäksi, että ne ovat johdonmukaisia, se tuo mukanaan paljon muunnelmia. Voit käyttää .btn
luokasta
ja elementit. Sinä pystyt ryhmittele sarja painikkeita yhdeksi riviksi käyttämällä .btn-group
luokan vanhemmalle. Pienellä JavaScriptin avulla voit luoda radio- ja valintaruututyyppinen käyttäytyminen painikkeilla. Tai voit muuttaa painikkeesi avattavat valikot sijoittamalla se .btn-group
: een ja antamalla järjestämättömien kohteiden luettelon oikea valikkomerkintä.
Navigointipalkki tai navigointipalkki on Bootstrap-komponentti, joka on suunniteltu erityisesti rakentamaan verkkosivuston ensisijainen navigointivalikko. Suurilla näytöillä se näkyy vaakasuunnassa, ja pienillä ja mobiilinäytöillä (alle 768 kuvapistettä) se muuttuu Avattava 'hampurilainen' -valikko . Navigointipalkki on hupun alla järjestämätön valikkokohteiden luettelo, johon lisätään haluttaessa lisää HTML-elementtejä. Mahdollisia lisäyksiä ovat tuotemerkit (joko teksti tai logo), lomakekohteet, kuten hakupalkki, ja valikkovalikot. Saatavana on kaksi tyyliä: vaalea ja tumma, ylösalaisin. Navigointipalkin kohteet voidaan kohdistaa vasemmalle tai oikealle soveltamalla .navbar-left
tai .navbar-right
luokkiin.
Navbar-palkeilla voi olla 4 erilaista asentokäyttäytymistä. uimurin oletusasento sen ympärillä on puskuritilaa; täysleveä staattinen navigaattori vierittää poispäin, kun käyttäjä vierittää sivua alaspäin, ja kiinteä navbar , joka voi olla joko ikkunan ylä- tai alaosassa, näkyy aina sivulla riippumatta siitä, mihin käyttäjä on vierittänyt.
Tämä kattaa vain muutaman suurista Bootstrap-komponenteista, jotka asettavat Bootstrapin samanlaisten kehysten, kirjastojen ja työkalupakettien edelle. Bootstrapilla vain muutama yksinkertainen CSS-luokka riittää rakentamaan täysin reagoivan ja kauniin käyttöliittymän nopeasti ja helposti. Se on loistava lähtökohta seuraavalle suurelle projektillesi tai aloituksellesi.
Bootstrap on tehokas käyttöliittymäkehys, jota käytetään nykyaikaisten verkkosivustojen ja verkkosovellusten luomiseen. Se on avoimen lähdekoodin ja ilmainen, mutta siinä on lukuisia HTML- ja CSS-malleja käyttöliittymän käyttöliittymäelementeille, kuten painikkeille ja lomakkeille. Bootstrap tukee myös JavaScript-laajennuksia.
Ohjelmistoinsinöörit käyttävät Bootstrapia useista eri syistä. Se on helppo asentaa ja hallita, siinä on paljon komponentteja, hyvä ruudukkojärjestelmä, muotoilu monille HTML-elementeille aina typografiasta painikkeisiin sekä JavaScript-laajennusten tuki, mikä tekee siitä entistä joustavamman.
Bootstrap on hieno ulkoasujen luomiseen, koska sen reagoiva CSS on suunniteltu vastaamaan eri laitteita. Sitä voidaan käyttää yhdenmukaisuuden varmistamiseen, selainten välisten ongelmien poistamiseen ja niin edelleen.
Bootstrap-teema on paketti, joka sisältää CSS-, HTML- ja JavaScript-koodin, joita käytetään muotoiluun. Bootstrap-teemat sisältävät myös erilaisia käyttöliittymäkomponentteja ja sivuasetteluja, joita voidaan käyttää verkkosivustojen luomiseen. Voit ajatella niitä verkkosivustomallina, joka on luotu Bootstrapia ajatellen.