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 Basics -sovelluksen käytön aloittaminen

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ä.

Tiedoston rakenne

Keskitymme esikäännettyyn versioon, joka voidaan ladata tässä . Kun lataat zip-arkiston ja purat sen pakkauksen, tiedostojen perusrakenne näyttää tältä:

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-perusmalli

Bootstrap-HTML-perusmallin tulisi näyttää tältä:

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-mallit ja käyttöliittymäkomponentit

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.

Bootstrap Grid -järjestelmä

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:

Voimme käyttää myös sekoitettuja sarakeleveyksiä:

Voimme jopa siirtää sarakkeita siirtymällä, esimerkiksi luoda kapeampi ja keskitetympi sisältö:

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ä.

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ä.

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 .

Bootstrap-typografia

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 .