Lisätietoja Bootstrapista: Aloita reagoivien verkkosivustojen kehittäminen

Disclosure: Tukisi auttaa pitämään sivuston toiminnassa! Ansaitsemme lähetysmaksun joistakin tämän sivun suosittelemista palveluista.


Tämä opas esittelee sinulle Bootstrapin, suositun avoimen lähdekoodin käyttöliittymän verkkosivustoille. Jatka johdannon ja lyhyen historian lukemista tai käytä oikealla olevaa navigointia siirtyäksesi etsimällesi Bootstrap-resurssille.

Versiosta 2 lähtien Bootstrap sisältää Responsive Web Design (RWD) -komponentit, mikä tekee siitä erinomaisen työkalun verkkosivustojen skaalaamiseen yhdellä koodikannalla, joka on jaettu eri laitteiden välillä CSS-mediakyselyjen avulla.

Bootstrap on avoimen lähdekoodin järjestelmä, jota ylläpidetään, kehitetään ja ylläpidetään GitHubissa. Tällä hetkellä se on GitHubin tähdellä merkittyin projekti. Selvitetään miksi.

Mikä on Bootstrap?

Bootstrap-kehityksen aloittivat Twitterin Mark Otto ja Jacob Thornton pyrkimyksenä kehittää sisäinen työkalu – uusi kehys, jolla rohkaistaan ​​Twitterin sisäisten työkalujen johdonmukaisuutta.

Näiden kehitysvaiheiden aikana Bootstrap sai alun perin nimensä “Twitter Blueprint”. Uusi kehys kypsyi nopeasti ja julkaistiin avoimen lähdekoodin projektina 19. elokuuta 2011.

Bootstrap-ydinryhmä jatkaa kehitystä, ja uusin versio on Bootstrap 3, joka julkaistiin elokuussa 2013.

Bootstrap on ilmainen, avoimen lähdekoodin HTML-, CSS- ja JS-kehys, joka sisältää malleja tekstille, lomakkeille, painikkeille, navigoinnille ja muille asiaankuuluville käyttöliittymäkomponenteille.

Koska käyttöliittymäkehys, Bootstrap on käyttöliittymä käyttäjälle, toisin kuin palvelinpuolen koodi, joka sijaitsee taustapalvelimessa. RWD-komponentteja käytettäessä Bootstrap mukauttaa verkkosivut automaattisesti eri näytön kokoihin ja pikselitiheyteen eri laitteilla.

Bootstrap-sovelluksen avulla web-kehittäjät voivat keskittyä varsinaiseen kehitykseen murehtimatta suunnittelusta ja saada hyvän näköinen verkkosivusto käyttöön ja ajaa nopeasti.

Bootstrap-ohjelmaa voidaan käyttää missä tahansa kehitysympäristössä tai -editorissa ja missä tahansa palvelinpuolen teknologiassa ja kielellä, ASP.NET: stä PHP: hen ja Ruby on Railsiin.

Elokuusta 2015 lähtien viralliset Bootstrap-teemat ovat saatavana ostaa yhdellä maksulla ja monikäyttölisenssillä ilmaisilla päivityksillä.

Bootstrap on tekijänoikeuksien suojaama Twitter, mutta se julkaistaan ​​MIT-lisenssillä, joka antaa sinun käyttää ja muokata Bootstrapia tai sen komponentteja sekä yksityisiin että kaupallisiin tarkoituksiin.

Bootstrap-ominaisuudet

Bootstrap on yhteensopiva Google Chromen, Mozilla Firefoxin, Internet Explorerin, Opera- ja Safari-selainten uusimpien versioiden kanssa. Joitakin näistä selaimista ei tueta kaikilla alustoilla.

Tyylitaulukot, jotka tarjoavat kaikkien tärkeimpien HTML-komponenttien tyylimääritelmät, sisältyvät Bootstrapiin, mikä mahdollistaa verkkosivun ulkoasun helpon mukauttamisen.

Yksi Bootstrapin pääpiirteistä on nestemäinen ristikkojärjestelmä, joka voi skaalata jopa 12 saraketta näytön koon mukaan mobiililaitteista työpöydän näytön kokoon saakka ja kaikkea väliin, sekä muotokuva- että vaakasuuntaan.

Tämä ruudukkojärjestelmä luo välttämättömät rakennuspalikat dynaamisille sivuille.

Bootstrap sisältää myös monia muita yleisiä käyttöliittymäelementtejä, mukaan lukien painikkeet edistyneillä ominaisuuksilla, tarrat, luettelot, pikkukuvat, varoitusviestit, edistymispalkit ja useita JavaScript-komponentteja, kuten valintaikkunat, karusellit, työkaluvihjeet, hälytykset, painikkeet ja niin edelleen.

Jotkut näistä komponenteista laajentavat olemassa olevien käyttöliittymäelementtien toimintoja, esimerkiksi lisäämällä automaattisen täydellisyyden funktion syöttökenttiä varten.

Bootstrapin käytön edut

Viime vuosina Bootstrapista on tullut yhä suositumpi käyttöliittymä, jota miljoonat verkkosivustot käyttävät.

Bootstrapbayn Christopher Gimmerin mukaan Bootstrapin käyttöön on viisi tärkeintä syytä.

Ensimmäinen, Bootstrap lisää kehityksen nopeutta. Yksi Bootstrapin tärkeimmistä eduista on pelkkä kehitysnopeus.

Bootstrap -sovelluksella voit käyttää valmiita koodilohkoja, ja yhdessä kehyksen selainten välisen yhteensopivuuden kanssa voit nopeasti kehittää verkkosivuston. Valmiiden Bootstrap-teemojen käyttäminen ja niiden mukauttaminen tarpeisiisi säästää vielä enemmän aikaa.

toiseksi, Bootstrap luo reagoivia, mobiililaitteille valmiita verkkosivustoja.

Mobiililaitteiden suosion jatkuvan nousun ja optimaalisten ennusteiden mukaan maailmanlaajuisen mobiilitiedonsiirron kasvulle reagoivasta verkkosivustosta, joka voi toimia laitteissa, joilla on villitän erilaiset tekijät, on tulossa erittäin tärkeätä.

Bootstrapin sisäänrakennettujen RWD-komponenttien ja nestekidenäytön asettelun avulla, joka mukautuu dynaamisesti laitteen näytön resoluutioon, reagoivien verkkosivustojen luominen ei edellytä seuraavaa, että kehittäjä tekee lisätoimia.

kolmas, Bootstrap-käyttö varmistaa johdonmukaisuuden.

Bootstrap kehitettiin alun perin kannustamaan johdonmukaisuutta. Bootstrap varmistaa johdonmukaisuuden riippumatta siitä, kuka työskentelee projektissa. Lisäksi tulokset ovat yhdenmukaiset eri käyttöympäristöjen välillä, joten tulos pysyy samana kaikilla selaimilla.

Neljäs, Bootstrap on helposti muokattavissa.

Bootstrap voidaan räätälöidä erityishankkeiden tarpeiden mukaan. Kehittäjät voivat valita tarvitsemansa ominaisuudet Bootstrap-räätälöintisivun avulla ja ladata vain nämä ominaisuudet Bootstrap-sovelluksen mukautettuun versioon, mikä tekee koodista kevyemmän ja puhtaamman prosessissa..

Viides, Hyvä tuki.

Yhteisön koon ja Bootstrapin suosion ansiosta tuki on yleensä hyvä. Bootstrap-ydinjoukkue on myös onnistunut julkaisemaan ajankohtaisia ​​päivityksiä, ja kehitystyö on jatkuvaa. Sen suosion vuoksi emme odota tämän muuttuvan pian.

Bootstrapin käytön aloittaminen

Jos olet valmis oppimaan Bootstrapin käytön, mutta et vielä ole perehtynyt HTML: ään ja CSS: ään, ensimmäinen askel Bootstrapin oppimiseen on HTML: n ja CSS: n perusteiden oppiminen..

Periaatteessa Bootstrap CSS: ään on viitattava HTML-tiedostojesi yläosassa. JavaScript-tiedostoja kutsutaan HTML-tiedostojesi runko-osan loppuun. Tätä HTML-perusrakennetta kutsutaan Bootstrap-malliksi.

Bootstrapin käyttö vähentää CSS-luokkien ja JavaScriptin käyttämistä HTML-elementteihisi, joten CSS: n ja HTML: n on oltava hyvä käsitys. Onneksi tämä ei ole ongelma vakaville kehittäjille.

Bootstrap-kehitysympäristö

Kun olet ladannut ja poistanut esikäännetyn Bootstrap-version, saat Bootstrap-tiedostorakenteen, joka on hyvin yksinkertainen. Bootstrap-tiedostot sijaitsevat kolmessa hakemistossa: css, js ja fontit.

Tämä tiedostorakenne on itsestään selvä ja helppo sisällyttää mihin tahansa verkkoprojektiin. Käytettävissä olevien CSS- ja JS-tiedostojen lisäksi mukana ovat myös Glyphicons-fontit sekä valinnainen oletus Bootstrap-teema.

Ennen kuin aloitat Bootstrapin käytön, sinun on integroitava se kehitysympäristöösi. Yksityiskohtaiset ohjeet löytyvät verkosta eri alustoille, joten Bootstrap-sovelluksen lisääminen kehitysympäristöösi on erittäin helppoa.

Bootstrap-resurssit

Suosionsa takia sinulla ei pitäisi olla ongelmia löytää runsaasti laadukkaita Bootstrap-oppimisresursseja verkosta. Yhteisö on kukoistava ja uusia resursseja julkaistaan ​​säännöllisesti.

Koska Bootstrap on kuitenkin suhteellisen nuori kehys, et löydä paljon paperipapereita. Suurin osa Bootstrap-resursseista julkaistaan ​​verkossa, joten älä odota löytävänsä niitä paikallisesta kirjakaupasta.

GitHub on hyvä paikka aloittaa Bootstrap-resurssien etsiminen. Lisäksi löydät lukuisia Bootstrap-oppaita ja -oppaita, jotka ovat julkaissut yksittäiset kehittäjät ja ohjelmistoyritykset. Niiden laatu voi vaihdella, joten muista tarkistaa yhteisön palaute ennen valintaa.

Ilmaiset interaktiiviset kurssit

Ohjelmistoista ja kehyksistä lukeminen voi näyttää peruskäyttömallit ja -säännöt, mutta saadaksesi todellisen tunteen kehyksen toimivuudesta, sinun täytyy nähdä se toiminnassa.

Ilmaiset interaktiiviset online-kurssit ovat paras tapa saada todellisen tunteen siitä, kuinka kehys toimii ja mitä se voi tehdä.

Näillä kursseilla on online-kääntäjä, joten voit suorittaa ja tarkastella esimerkkejä heti:

  • Tutustu Bootstrapin perusteisiin Codecademy-opetusohjelmassa. Tämä on lyhyt aloittelijan opas, joka opastaa HTML: n, CSS: n ja Bootstrapin lisäämisen verkkosivustollesi. Tämä opetusohjelma näyttää sinulle Bootstrapin perussyntaksin online-kääntäjänsä kanssa.
  • W3Schools Bootstrap 3 -opetusohjelma on kattava ja erittäin yksityiskohtainen vaiheittainen opas, joka sisältää täydellisen Bootstrap-viitteen kaikista CSS-luokista, komponenteista ja JavaScriptin laajennuksista..
  • Tutorialspoint Bootstrap-opetusohjelma on erittäin yksityiskohtainen ja kattaa melkein kaiken, mitä sinun on tiedettävä Bootstrapista, Bootstrap CSS: stä, asetteluosista, laajennuksista, demoista ja hyödyllisistä lähteistä. Tässä Bootstrap-opetusohjelmassa on myös online-kääntäjä, ja se on saatavana myös PDF-latauksena.

Näiden interaktiivisten kurssien tulisi antaa sinulle tarpeeksi hyvä käsitys Bootstrapista, jotta voit aloittaa sen käytön projekteissa ilman vaivaa..

Bootstrap-esittelyt ja lisäresurssit

Koska Bootstrap on niin suosittu ja laajalti käytetty, ei ole helppoa erottaa muutamia verkkosivustoja esittelemään sen voimaa ja ominaisuuksia toiminnassa.

Siksi jätämme tämän valinnan Bootstrap-ydinjoukkueen tehtäväksi ja tuomme sinulle heidän virallisen Bootstrap Expon kanssa kauniita ja innostavia esimerkkejä Bootstrapista.

Avaa esimerkit ja muuta selainikkunan kokoa nähdäksesi Bootstrapin RWD-ominaisuudet toiminnassa mukauttamalla sivun asettelun dynaamisesti näytön eri kokoihin.

Jos olet valmis aloittamaan Bootstrapin käytön ja tarvitset lisää hyödyllisiä resursseja projekteihisi, tutustu seuraaviin:

  • Bootstrap-viralliset teemat Bootstrap-luojat
  • Kauppapaikat premium-kaupallisilla Bootstrap-teemoilla ja -malleilla: creativemarket.com, wrapbootstrap.com, themeforest.net
  • Ilmaiset Bootstrap-mallit ja teemat: startbootstrap.com, shapebootstrap.net, bootstrapzero.com.

Tietysti verkossa on saatavana myös monia muita Bootstrap-resursseja, ja yhteisö osallistuu säännöllisesti uusiin, joten tarvitsemasi löytämisen ei pitäisi olla ongelma.

E-kirjat ja paperikirjat

Bootstrapille on saatavana paljon verkkoresursseja, mutta jos haluat kirjan tai e-kirjan, valinta on rajoitettu.

Vaikka niin paljon ilmaisia ​​online-oppaita ja resursseja onkin, on ehkä parempi kokeilla ensin joitain näistä ilmaisohjelmista. Kun olet oppinut ne, voit harkita muutaman kirjan ostamista.

Jos pidät fyysisistä teksteistä ja kirjoista, tässä on joitain Bootstrap-tekstejä, jotka ovat saatavilla tänään:

  • Askel askeleelta Bootstrap 3: Pikaopas reagoivaan web-kehitykseen Bootstrap 3: n avulla, kirjoittanut Riwanto Megosinarso on todellinen askel askeleelta -opas aloittelijoille. On suositeltavaa, että olet täysin uusi Bootstrap-järjestelmä, ja se peittää tarpeeksi aloittamiseen.
  • Syed Fazle Rahmanin Jump Start Bootstrap sopii hyvin aloittelijoille ja keskitason kehittäjille, ja se kattaa kaiken tarvitsemasi Bootstrap-sovelluksen verkkosivullesi.
  • David Cochranin ja Ian Whitleyn Bootstrap-sivuston piirustukset on kirjoitettu aloittelijoille keskitason käyttöliittymäkehittäjille. Hyvä kattavuus Bootstrap-komponenttien ja asettelujen mukauttamisesta.

Kaikki kolme ovat myös saatavana eBook-muodossa Kindlelle.

Tärkeitä linkkejä

  • bootstrap
  • Bootstrap GitHubissa.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map