Jos et ole koskaan kuullut Twitterin kehittämästä Bootstrap-järjestelmästä, jolla luodaan kauniita verkkosivustoja, menetät ikäväsi! Bootstrap tekee verkkosivuston suunnittelusta melko nopeaa ja helppoa ilman paljon tietoa CSS: ssä (Cascading Style Sheets). Jos olet uusi Web-ohjelmointiohjelma, sinun ei tarvitse tietää jotain CSS: stä aloittaaksesi oppimisen Bootstrap-toiminnasta; Tarvitset vain yhden HTML-asiakirjan. Katsomme Bootstrapia, joka näyttää sinulle, mistä on kyse, kuinka se toimii ja onko se hyvä vaihtoehto jokaiselle rakennetulle verkkosivustolle.
Bootstrap-sovellusliittymän lisääminen HTML-tiedostoosi
Sinulla on muutama vaihtoehto lisätä Bootstrap pääprojektitiedostoosi. Ensimmäinen vaihtoehto on lisätä kaikki tarvittavat Bootstrap-tiedostot projektiisi. Voit tehdä tämän lataamalla paketin ja lähettämällä sen projektikansioon. Sinun on tietenkin linkitettävä ensisijainen Bootstrap CSS-tiedosto asiakirjaasi. Bootstrapin virallisella verkkosivustolla on vaiheittaiset ohjeet tämän tekemiseen.
Toinen vaihtoehto on ohittaa paketin lataaminen ja käyttää sisältöjakeluverkkoa (CDN). CDN: n avulla voit linkittää ensisijaiset Bootstrap-tiedostot HTML-asiakirjaasi lataamatta sitä koskaan. Tämä ei tietenkään ole aina hyvä asia ammattimaisille verkkosivustoille, koska en olisi liian nopea jättämään yritys- tai portfoliosivuni kohtalon päälle, jos palvelin koskaan menisi alas. On parasta, että tiedostot ovat projektissasi, mutta oppimista varten CDN toimii hyvin.
Lisää Bootstrap HTML-dokumenttiin lisäämällä seuraava koodi vain HTML-dokumenttiin
tunniste HTML-dokumentissasi:Kun nämä linkit on lisätty kyseiseen otsikkotunnisteeseen, sinun pitäisi olla kaikki valmiina aloittamaan Bootstrap-luokkien käyttö. Asiakirjan tulisi näyttää tällaiselta:
Bootstrap ja luokat
Bootstrap-elementit jaotellaan luokkiin, jotka ovat vain joukko valmiiksi kirjoitettuja CSS-tiedostoja, jotka voit lisätä merkintöihin. Luovien lisääminen merkintöihin on helppoa, sinun on vain tiedettävä käytettävän luokan nimi ja levitettävä se sitten johonkin HTML-elementtiin käyttämällä class = ”classname” -arvoa, kuten edellisessä artikkelissa on käsitelty.
Vaikea osa on selvittää, kuinka kaikki tämä toimii yhdessä luoda jotain kaunista. Voit tutustua kaikkiin Bootstrap-sarjaan saataviin luokkiin suoraan virallisista dokumenteista. Nyt Bootstrapin hallitseminen on toinen tarina. Se ei ole jotain mitä me tai kukaan muu voimme opettaa sinulle. Voit katsoa opetusohjelmaa opetusohjelman jälkeen, mutta saadaksesi hyväksi kehyksen käytön mukana tulee paljon kokeiluja ja virheitä. Ja se edellyttää, että pääset käsiksi sen omaan projektiisi.
Tätä silmällä pitäen kehotan sinua aloittamaan oman HTML-projektisi tietokoneellasi Atomilla tai jollain muulla tekstieditorilla, tarkistamaan, mistä HTML- ja CSS-luokat liittyvät, ja aloittamaan sitten leikkiminen Bootstrap-ohjelmalla. Ja jos tiedät riittävästi merkintöjä, voit jopa luoda oman portfoliosivustosi testiharjoitukseksi.
Onko Bootstrap hyödyllinen vaihtoehto jokaiselle verkkosivustolle?
Bootstrap on loistava kehys, mutta onko se käyttökelpoinen vaihtoehto jokaiselle luomallesi verkkosivustolle? Se riippuu todella sekä kehittäjästä että projektin vaatimuksista. Monissa ammatillisissa ympäristöissä sinulla ei ole oikeasti valintaa käyttämästäsi tekniikasta, koska se on pitkälti projektipäällikön tehtävä. Jos mainittu projektipäällikkö päättää käyttää Bootstrap-sovellusta, aiot yhdistää sen myös tonniin mukautettuja CSS-tiedostoja. Tämä tekee sivustostasi yleensä ainutlaatuisen ja erilaisen kuin muut Bootstrapia käyttävät verkkosivustot.
Minä henkilökohtaisesti en näe Bootstrapia loistavana vaihtoehtona jokaiselle verkkosivustolle. Toki, se voi auttaa ja tarjota joitain pikakuvakkeita, mutta olen viime kädessä havainnut, että suunnittelu CSS: n kanssa alusta alkaen on paras reitti pitkälti johtuen siitä, että hallitset sitä. Mutta jälleen kerran, jos olet vasta aloittamassa verkko-ohjelmoinnin aloittamista, Bootstrapin käyttö ei ole ollenkaan paha asia, mutta älä luota siihen urasi aikana.
On syytä huomata, että jos olet aloittelija kehittäjä, sinun ei pitäisi käyttää Bootstrapia kaikissa salkkuasi koskevissa projekteissa. Voi olla, että saatat tuntea sovellusliittymän, mutta et tiedä täysin CSS: n tietä. Tästä huolimatta on hyvä, että portfoliossasi (tai jopa yksinomaan CSS: ssä) on kunnollinen sekoitus molempia, koska Bootstrap on helppo noutaa.
Sulkeminen
Se on kaikki mitä Bootstrap on pähkinänkuoressa. Kuten aiemmin mainitsin, kehotan sinua aloittamaan oman HTML-projektisi ja lisäämään joitain eri luokista elementteihin, jotta voit alkaa pelata kehyksen kanssa. Löydät kaikki Bootstrap-tarjouksen komponentit selityksineen ja koodiesineineen täältä.
Bootstrap on todella siisti työkalu, mutta muista olla luottamatta siihen yksin! On hyvä, että tunnet sen ja tiedät tiensä kehyksen ympärille, mutta varmista myös, että sukellat CSS: ään ymmärtääksesi todella kulissien takana tapahtuvaa. Ei vain, mutta myös CSS: n vakaa tietämys antaa Bootstrapille paljon kiitosta, jonka avulla voit todella tehdä ainutlaatuisia ja kauniita verkkosivustoja omalla räätälöinnilläsi.
