Twitter Bootstrapista puhutaan ja kirjoitetaan nykyään paljon web-suunnittelijoiden ja kehittäjien keskuudessa. Joku kutsuu sitä todelliseksi lahjaksi kehittäjille, joilla ei ole tietoa web-suunnittelusta. Toiset kutsuvat sitä siunaukseksi suunnittelijoille. Joka tapauksessa Twitter Bootstrap tekee monista asioista helpompaa ja nopeampaa.
Monissa tapauksissa verkkokehittäjillä on idea valmiina, mutta he eivät voi aloittaa, koska he eivät pysty teknisesti luomaan haluamaansa projektia. Heidän on otettava yhteyttä web-suunnittelijoihin toteuttaakseen asiakaspuolen.
Tämä prosessi voi venyttää helvetin pitkään ja hidastaa vakavasti kehittäjää, jolle on erittäin tärkeää, että hänen ideansa toteutuu mahdollisimman pian. Näissä tapauksissa, kuten sarjakuvan supersankari, Twitter Bootstrap tulee apuun!
Twitter Bootstrap on CSS-kehys, joka auttaa kehittämään verkkosovelluksia. Se on yksi helpoimmista CSS-kehyksistä tähän mennessä ja sitä käytetään massat. Oletetaan, että sinulla ei ehkä ole lainkaan tietoa web-suunnittelusta, ja sinun tarvitsee vain kirjoittaa muutama HTML-koodi Bootstrap-määritysten mukaisesti.
Lyhyesti sanottuna Twitter Bootstrapilla on jo valmiita listoja CSS-tyylit, jQueryn alkuperäinen tuki ja useita suosittuja JavaScript-työkaluja.
Vau! Eikö olekin hienoa? Saat kokonaisen joukon hyödyllisiä työkaluja valmiina käyttöön. Sinun tarvitsee vain liittää oikea HTML-koodi oikeaan paikkaan.
Tässä artikkelissa selitän, kuinka voit aloittaa Twitter Bootstrapin käytön. Tätä varten näytän sinulle esittelysivun asettelun. Ja kerron myös, kuinka voit mukauttaa puitteet omiin tarpeisiisi.
Aloitetaan
Aloita lataamalla bootstrap.zip-tiedosto osoitteesta virallinen sivu Twitter Bootstrap githubissa. Se sisältää joukon css-, js- ja img-tiedostoja, jotka tarvitsemme aloittaaksemme Twitter Bootstrap -sivuston rakentamisen. "css"-kansio sisältää tyylisivut (responsiiviseen ja reagoimattomaan suunnitteluun) sekä niiden yksinkertaistettuja versioita.
Käytät pienennettyjä versioita nopea luominen kun suunnittelu on valmis ja projekti on valmis. js-kansio sisältää bootstrap.js-tiedoston ja sen pienennetyn version.
Nämä JavaScript-tiedostot sisältävät erilaisia JavaScript-komponentteja, joita käytämme sivustomme suunnittelussa. Viimeinen kansio "img" sisältää kaksi kuvaketta.
Molemmat sarjat ovat lähes identtisiä, ja niissä olevat kuvat eroavat vain väriltään. Ikonit tarjosivat glyfikonit, jotka ystävällisesti lahjoittivat ne Twitter Bootstrap -projektille ilmaiseksi.
Joten mennään töihin. Ennen kuin aloitamme, avaa tekstieditori ja luo ensimmäinen index.html-tiedosto. Tallenna se kohteeseen kotikansio sinun projektisi.
HTML-perusmallit Bootstrapin kanssa toimimiseen
Bootstrap-kehyksen aktivoimiseksi sinun on sisällytettävä kaikki asiaankuuluvat tiedostot ja luotava HTML-rakenne. Mutta ensin luomme rakenteen ja sitten katsomme, mitä tiedostoja tarvitsemme. Ensimmäinen asia, joka sinun on kirjoitettava, on HTML5:n edellyttämä asiakirjan tyypin ilmoitus aivan yläreunassa:
Asetamme koodaukseksi UTF-8, koska käytämme projektissamme Erikoissymbolit, ja tarvitsemme selaimen tunnistamaan ne oikein. Twitter Bootstrap suosittelee myös UTF-8:n käyttöä paremman yhteensopivuuden varmistamiseksi.
Aseta sen jälkeen tavalliset HTML-tunnisteet: ,
Ja . Nämä ovat HTML-perustunnisteita. Index.html-sivusi pitäisi näyttää alla olevan kuvan kalta.
Nyt meidän on sisällytettävä bootstrap.css-tiedostoon sisältyvät tarvittavat tyylit.
Kun tyylit yhdistetään, yhdistämme tarvittavat tiedostot JavaScript. Ensin sinun on sisällytettävä jQuery-tiedosto, joten suosittelen niiden sisällyttämistä jQuery CDN:stä alla olevan kuvan mukaisesti.
Sitten sisällytämme Bootstrapin.
Web-sivusi tehokkuussyistä kaikki nämä komentosarjat tulee sijoittaa juuri ennen sulkevaa tunnistetta.
Nyt kaikki tarvittavat tiedostot ovat mukana. Voit alkaa rakentaa sivustosi eri osia. Index.html-tiedostosi pitäisi näyttää tältä.
Kuinka se toimii
Ensinnäkin meidän on ymmärrettävä, että Twitter Bootstrap on vahvasti riippuvainen 12 ruudukosta. Mitä nämä ruudukot ovat?
Oletetaan, että haluat luoda kaksi yhtä suurta osaa index.html-sivusi runkoon. Sinun on annettava span6-luokka näiden elementtien jokaiselle lohkolle. Tämä tarkoittaisi, että Bootstrapin pitäisi luoda kaksi yhtä suurta osaa, joissa kussakin on kuusi ruudukkoa.
Toivottavasti tämä antaa sinulle jonkinlaisen käsityksen siitä, miten Bootstrap toimii. Siinä on joukko ennalta määritettyjä luokkia jokaiselle elementille. Tarvittaessa sinun on osoitettava kullekin niistä sopivat luokat.
Koodin kirjoittaminen Bootstrapissa
Jaetaan esittelysivu viiteen pääosaan:
- otsikko;
- Markkinointi-alue;
- Vasen sivupalkki;
- Sisältöalue;
- Kellari.
Sivustomme kaiken sisällön käärimiseksi luomme konttiluokan, joka sijoitetaan näytön keskelle ja jota myös ympäröi eri puolueet muut lohkot.
Tätä varten Bootstrapilla on erityinen luokka, jota kutsutaan "säiliöksi". Käytämme sitä emokuorena. Joten siirrytään koodien kirjoittamiseen:
Nyt DIV-säilössä kirjoitamme sivuston otsikon. Käytämme tähän h1-otsikkotunnistetta.
Bootstrap-sivusto
Tarkista selaimesta index.html-sivusi nähdäksesi, ovatko elementit aseteltu kauniisti. Nyt on aika käsitellä navigointipalkkia. Twitter Bootstrap määrittää navigointipalkin merkinnät seuraavasti:
"navbar" on navigointipalkin päädivissä määritetty luokka. Sinun on noudatettava yllä olevaa navigointivalikon merkintää, jotta se vastaa Twitter Bootstrap -tyylejä.
Aseta tämä koodi heti h1-tunnisteen alle. Varmista, että kaikki elementit ovat vanhempien kääreluokkamme sisällä, ts. "kontti" Avaa sivu selaimessa ja katso, onko navigointivalikko aseteltu kauniisti.
Ilmeisesti haluat, että otsikko on erilainen kuin oletusarvo. Tämän opetusohjelman lopussa tarkastellaan, kuinka voit lisätä omia tyylejä olemassa oleviin Bootstrap-tyyleihin ja suunnittele otsikkoalue uudelleen lisäämällä CSS. Ja nyt siirrymme luomaan toinen osa, jota kutsuimme " Markkinointialue».
Twitter Bootstrapissa on mukava ennalta määritetty luokka erityisesti markkinointialueelle. Sitä kutsutaan "sankariyksiköksi". Kopioi alla oleva koodi ja liitä se navigointivalikkolohkon alle.
markkinointi juttuja!
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit ametrisus.
AloittaaTarkista sivusi selaimessa, sen pitäisi näyttää tältä:
No, eikö olekin ihanaa? Jos kirjoitat yhtään CSS:ää, saat tämän kaunis lohko markkinoinnin alueet. Okei, katsotaanpa tätä koodia.
Hero-yksikössä on CSS, joka on tarkoitettu h1-tunnisteelle. Joten mitä kirjoitat h1-tunnisteiden sisään, tulostetaan lihavoituna ja olla hieman erillään lohkon muista osista. Sitten meidän on luotava tagin kautta kappale, jossa mainoksemme tai tuotteemme kuvaus näytetään.
Ja tässä on mielenkiintoisin: linkit ja painikkeet. Voit saada minkä tahansa linkin näyttämään painikkeelta lisäämällä "btn"-luokan ja säätämällä sen kokoa lisäämällä muutaman lisäluokan, kuten btn-large/btn-small/btn-mini .
Voit muuttaa painikkeiden väriä lisäämällä luokat btn-success (vihreä), btn-info (sininen), btn-warning (keltainen) ja btn-vaara (punainen). Lisätietoja painikkeista ja linkkien tyylistä on kohdassa CSS-perus. Näitä luokkia voidaan soveltaa HTML-painikeelementteihin.
Toivottavasti tarina on kiinnostanut sinua tähän mennessä. Twitter Bootstrap on niin yksinkertainen, että sinun ei tarvitse edes tehdä mitään CSS-tyylisivujen sisällä. Käytät vain järjestelmän tarjoamia työkaluja. Tämä tekee Bootstrapista yhden tehokkaimmista CSS-kehyksistä.
Siirrytään nyt seuraaviin osiin.: vasen sivupalkki ja sisältöosio. Näet kuinka jaoin alueen kahteen epätasaiseen pystysuoraan osaan ja kuinka voit tehdä vielä enemmän tällaisia segmenttejä. Kuten aiemmin todettiin, Twitter Bootstrap on 12 ruudukkojärjestelmä.
Tämä pitää aina muistaa. Tämä tarkoittaa, että voit luoda enintään 12 pystysuoraa ruudukkoa mihin tahansa pääelementtiin.
Työskentelemme tällä hetkellä vanhempien kääreluokkamme "kontissa" sisällä. Jaamme sen kahteen epätasaiseen osaan 12 ruudukon avulla. Vasemmassa sivupalkissa käytämme span4-luokkaa ja oikeanpuoleisessa sisältöosiossa span8-luokkaa.
Luokkien nimet heijastavat olemusta: vasen sivupalkki vie enintään neljä ruudukkoa ja Oikea puoli tulee jakaa jäljellä olevien kahdeksan ruudukon kesken.
Sivusi pitäisi nyt näyttää tältä:
Siinä pitäisi olla kaksi erillistä saraketta vierekkäin. Nyt kannattaa harkita lisäkäärelohkon luomista, jonka lisäsin yllä "rivi"-luokan kautta. Syynä on se, että span*-luokat tasataan oletuksena vasemmalle.
Lisäsimme rivilohkon sijoittaaksemme molemmat sarakkeet kaiken sisällön alle. Se toimii kuin normaali erotin
Sitten täytämme vasemman sivupalkin luettelon navigointikohteista.
Navigointiluettelossa tulee olla seuraavat merkinnät:
Nav-luokan lisäksi sinun on lisättävä nav-list-luokka, joka näyttää navigointivalikon kohdat. Jos lisäät luokan "nav-header" mihin tahansa "nav"-luokan "li"-elementtiin, se näyttää linkkiosion otsikolta. Jatketaan, katsotaan miltä sivumme näyttää nyt selaimessa.
Siirryttäessä sisältöalueeseen, täytämme sen käyttämällä yleisiä h3-tunnisteita ja kappaletageja. Tässä ei vaadita lisäluokkien asentamista. Loppujen lopuksi haluamme tekstin kappaleiden näkyvän toistensa alla. Alla on koodi, jonka laitoin "span8" -kohtaan.
Miten aloitimme?
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit ametrisus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Miten markkinoimme?
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit ametrisus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit ametrisus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Päivitä sivu selaimessa, jonka jälkeen sen pitäisi näyttää tältä:
Kuten näette, olemme jo hyvin lähellä loppupistettä. Meidän on vain täytettävä sivun alatunniste.
Alatunnisteen osalta jaamme "rivin" jälleen kolmeen osaan. Kuten demossa näkyy. Tällä kertaa jaamme alueen kolmeen yhtä suureen osaan, eli käytämme "span4".
Tämä luo toisen "rivi"-lohkon heti sen "rivin" alle, jonka loimme aiemmin sivupalkkia ja sisältöaluetta varten.
Kirjoita itsellesi seuraava koodi:
Tapaa asiakkaitamme
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit ametrisus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
AsiakkaammeTunne työntekijämme
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit ametrisus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
TyöntekijämmeOta yhteyttä
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit ametrisus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Ota meihin yhteyttäTarpeeksi yksinkertainen! Jaoimme merkkijonon kolmeen yhtä suureen osaan käyttämällä "span4"-luokkaa ja täytimme sitten jokaisen segmentin käyttämällä h4-tageja, kappaletunnisteita ja linkkejä, jotka näyttävät painikkeilta. Tarkista, mitä meillä on selaimessa.
Painikkeiden sisällä pitäisi olla pieniä kuvia asiakkaista ja työntekijöistä. Käytä tunnistetta lisätäksesi sopivia kuvaluokkia, kuten kuvake-käyttäjä, kuvake-tähti, kuvake-lasi jne.
Jos haluat tehdä kuvakkeista valkoisia, käytä luokkaa icon-white luokkien icon-user ja icon-star kanssa. Katso täydellinen luettelo kuvakeluokista kohdasta Bootstrap-dokumentaatio joka sijaitsee täällä.
Erotaksemme sivun alatunnisteen hieman sisältöalueesta lisäämme tunnisteen
rivilohkojen välissä. Kun lisäsimme tagin
Katsotaan mitä saamme.
Täällä, nyt olemme luoneet täysin yksinkertaisen, mutta melko edustavan aloitussivu. Ja samaan aikaan käytimme yksinomaan Twitter Bootstrap -kehyksen työkaluja.
Mukautettujen tyylien lisääminen Twitter Bootstrapiin
Jos tiedät jonkin verran CSS:stä ja haluat muuttaa oletusarvoisia Twitter Bootstrap -tyylejä, sinun kannattaa luoda oma tyylisivu, tuoda Bootstrap-tyylit ja korvata ne sitten oma tiedosto CSS. Varmista, että linkki viittaa tyyleihisi eikä Bootstrap CSS -tiedostoihin.
Jos Twitter Bootstrap -oletustyylit riittävät sinulle, tyylisivua ei tietenkään tarvitse luoda. Mutta koska monet verkkosivustot käyttävät samaa kehystä, näistä tyyleistä tulee yleisiä ja niitä nähdään monilla muilla Bootstrapilla rakennetuilla verkkosivustoilla. Joten on parasta, jos lisäät omat tyylisi Twitterin Bootstrap CSS:n päälle.
@import url("bootstrap.min.css");
Muutama tärkeämpi osa Twitter Bootstrapista
Korostetut kohteet
Voit korostaa joitain katkelmia pitkän asiakirjan rungosta lisäämällä niihin luokan "johdon". Tämä tekee tämän kappaleen fonteista hieman suurempia kuin asiakirjan muun osan fontit.
Valintatunnisteet
Voit myös käyttää sivullasi tavallisia HTML-korostustageja: kuten Ja . Voit myös käyttää tunnisteita Ja .
Tekstin tasaus
Tekstin tasaus missä tahansa kappaleessa tai div-lohkossa voidaan asettaa käyttämällä luokkia: "text-left", "text-center" ja "text-right".
Tekstin väri
Voit asettaa kappaletekstin oletusvärit, tätä varten käytetään erilaisia korostusvärejä, kuten " mykistetty" - harmaa, "tekstivaroitus" - punainen, "tekstivirhe" - maroon, " text-info" - light sininen ja "teksti-menestys" - vihreä.
Taulukotyylit
Twitter Bootstrap tukee oletuksena myös taulukkoasetteluja. Tätä varten käytetään seuraavaa koodia:
Työskentely kuvien kanssa
Voit lisätä kuvia tavallisella tunnisteella . Tehdäksesi projekteistasi mielenkiintoisempia, voit lisätä luokkia "img-rounded" kuville, joissa on pyöristetyt kulmat, "img-circle" kuvien vierittämiseen ja "img-polaroid" luodaksesi varjon ja reunuksen kuvan kehän ympärille.
Pudotusvalikot
Jos haluat lisätä avattavan valikon olemassa olevaan navigointipalkkiin (kuten esittelysivulla näkyy), sinun on lisättävä seuraava merkintä "li"-elementin sisään.
Jos haluat luoda avattavan luettelon, sinun on käärittävä yläelementti "pudotusvalikko"-luokkaan ja lisättävä se sitten "a"-merkinnällä. Sijoita sitten luettelokohde tähän elementtiin.
Näytin sinulle Twitter Bootstrapin käytön perusteet, kuinka pääset alkuun järjestelmän kanssa. Nyt kun tiedät, miten se toimii, toivon, että sinun on paljon helpompi työskennellä alkuperäisen dokumentaation kehyselementtien kuvauksen kanssa.
Tutkittuasi sen löydät varmasti monia uusia sovelluksia.
Seuraavassa artikkelissa opastan sinua luomaan responsiivisia verkkosivustoja Twitter Bootstrapin avulla.
Artikkelin käännös " Twitter Bootstrap -opastus – monimutkaisten mallien käsittely» valmisteli ystävällinen projektitiimi.
Hyvä huono
CSS-kehysten käytön etuna on, että layout-suunnittelijan ei tarvitse miettiä monia layout vivahteita, jotka viitekehyksen tekijät ovat jo hänelle miettineet. Tällaisia vivahteita ovat selainten välinen yhteensopivuus, tuki eri näytön resoluutioille ja paljon muuta. Taittosuunnittelija kertoo vain mitä, miten ja milloin näyttää, loput kehys tekee itse. Tämä lähestymistapa voi nopeuttaa huomattavasti sivuston asettelua. Bootstrapin etuja ovat sen suosio. Tämä tarkoittaa, että toisen koodaajan on helpompi ylläpitää koodiasi.
Kehysten käytön haittana on se, että sivun on "kuljetettava" kaikki ylimääräiset puitteetyylit, vaikka se käyttäisikin vain pientä osaa niistä. Kehys on loistava työkalu prototyyppien ja sivujen luomiseen, joiden suunnittelu on toissijaista, kuten hallintasivuja. Jos sinulla on hyvin tarkka suunnittelu, sen asettaminen kehyksen avulla voi olla vaikeampaa kuin alkuperäisillä työkaluilla. Tämä on kuitenkin myös mahdollista.
Tietoja Bootstrapin käytöstä
Tällä hetkellä on useita tapoja työskennellä Bootstrap-tyylien kanssa.Käyttämättä VÄHEMMÄN
Aloittelijoille Bootstrap itse suosittelee seuraavaa lähestymistapaa: sinun on ladattava käännetty Bootstrap sivustolta ja laitettava se projektiisi muuttamatta mitään. Sitten sinun on luotava oma tyhjä CSS-tiedosto ja sisällytettävä se bootstrap.css:n jälkeen.
Tämän jälkeen, jotta voit muuttaa Bootstrap-tyylejä, sinun on ohitettava ne styles.css-tiedostossa seuraavasti:
A (väri: #beceda; )
Ilmeinen haitta tätä lähestymistapaa on, että sinun on etsittävä manuaalisesti tarvittavat tyylit, jotka haluat ohittaa, eikä tämä aina ole triviaalia, koska joitain Bootstrap-asetuksia sovelletaan moniin valitsimiin muokatussa muodossa, esimerkiksi kaavojen kautta. Mukauta-työkalu voi auttaa tässä hieman, se auttaa sinua kokoamaan muutokset oikein, mutta vain kerran. Jos haluat tulevaisuudessa muuttaa jotain parametria, sinun on syötettävä muutetut arvot uudelleen kaikille kenttiin, jotta voit kääntää tyylisi.
Käyttämällä VÄHEMMÄN
Tämä menetelmä olettaa, että kaikki Bootstrap-muuttujat on tallennettu .less-tiedostoihin. Kehittäjä työskentelee näiden muuttujien kanssa ja kääntää ne tarvittaessa manuaalisesti tai automaattisesti CSS-tiedostoiksi, ja HTML itsessään sisältää vain käännetyt CSS-tiedostot. Juuri tätä vaihtoehtoa pidetään artikkelissa joustavimpana.Olemassa suuri määrä tapoja kääntää VÄHEMMÄN tiedostoja ja Bootstrap jättää sen kehittäjälle. Bootstrap itse käyttää Gruntia kääntämiseen, saatat haluta JetBrains-tuotteiden laajennuksen, ja koska artikkeli on suunnattu aloittelijoille, etsimme yksinkertaisempia ratkaisuja. Tällaisia ratkaisuja ovat WinLess for Windows, SimpLESS for Mac tai Koala for Linux. Kaikki nämä ohjelmat tekevät suunnilleen saman asian: ne vastaanottavat kansion, jossa on VÄHEMMÄN tiedostoja, ja kuuntelevat niissä tapahtuvia muutoksia. Heti kun teet muutoksia mihin tahansa tiedostoon, se käännetään välittömästi määritetty css tiedosto. Näin sinun ei tarvitse ajaa kokoelmaa käsin jokaisen muutoksen jälkeen. Muutat VÄHEMMÄN tiedoston, tallennat sen ja näet heti muutokset sivustolla jo käännetyssä, pakatussa muodossa.
Luo projekti
Ensimmäisenä askeleena luodaan yksinkertainen tiedostorakenne projektillemme.
Esikatselu
Kun olet luonut tiedostorakenteen, avaa psd-tiedosto Photoshopissa. On tärkeää tutkia malli huolellisesti ja arvioida se. Meidän on ymmärrettävä seuraavat asiat:- Miten kuvat leikataan?
- Mitä komponentteja käytetään?
- Mitkä ovat tärkeimmät tyylit?
- Millaisen sivuasettelun saamme?
Yleisiä kuvia
Tässä vaiheessa sinun tarvitsee vain leikata ja säästää yleisiä kuvia, jotka ovat sivuston kaikilla sivuilla eivätkä liity sisältöön. Meidän tapauksessamme tämä on vaaleanharmaa sivun tausta, otsikon tausta, karttakuva, kaksi logoa ja sosiaalisen median painikkeet.Tallenna karttakuva:
Tallennetaan logot näin:
images/logo.png
images/footer-logo.png
toistuva taustakuvia on leikattava mahdollisimman pieniksi kappaleiksi, jotka ovat riittävät muodostumaan koko kuva toistaa pysty- ja vaakasuunnassa.
/images/bg.png
/images/h1-bg.png
Sosiaalisen verkoston samankokoiset kuvakkeet on kätevää tallentaa yhteen tiedostoon ja käyttää niitä spriteinä latautumisen nopeuttamiseksi. Lisätietoja kuvien liimaamisesta on kuvattu ensimmäisessä osassa. Tuloksena on kaksi tiedostoa:
/images/social.png
/images/social-small.png
Komponentit
Suurin ero Bootstrap-asettelun ja alkuperäistyökaluja käyttävän asettelun välillä on, että Bootstrap esittelee komponenttien käsitteen. Komponentit ovat yleisesti käytettyjä valmiita HTML-lohkoja ennalta määritetyillä tyyleillä. Joskus komponentit käyttävät JavaScriptiä. Taittosuunnittelija voi käyttää sekä valmiita komponentteja että määritellä sille oman ulkonäkönsä. Tätä varten sinun on usein vain muutettava muuttujien arvoja Bootstrapissa. Jos tarvitaan joustavampia muutoksia, layout-suunnittelija voi aina muuttaa HTML- ja CSS-koodia oman harkintansa mukaan.Jos katsot malliamme, näet, että tarvitsemme seuraavat komponentit:
- Asettelu sarakkeisiin - ruudukkojärjestelmä (rivi, sarake)
- Hakua varten - rivimuoto (form-inline), ryhmitetyt säätimet (syöttöryhmä), painike (btn)
- Navigointiin - navigointipalkki(navbar) ja itse navigointi (nav)
- Alivalikon näyttäminen - ryhmitelty luettelo (luetteloryhmä)
- Karttalohkolle - visuaalinen paneeli (paneeli)
- Näytä suuri keskuslohko- jumbotron
- Valokuvakehysten näyttäminen - pikkukuvat (pikkukuvat)
Perustyylejä
Bootstrapissa kaikki tyylit on jo asetettu oletusarvoisesti, meidän on ohitettava ne vain, jos ne eroavat suunnittelustamme. Tehdään tämä src/less/variables.css-tiedostossa.Ensinnäkin sinun on lisättävä muuttujia, jotka eivät ole Bootstrap-asetuksissa, jotta voit käyttää niitä tulevaisuudessa. Meillä tämä on vain tietty suunnittelufontti.
@brand-font: "Oswald",sans-serif;
Jos haluat käyttää mallia venäläisille sivustoille, voit yrittää korvata Oswald-fontin lähimmällä Cuprumilla, joka tukee kyrillistä.
Korvataan nyt Bootstrap-asetukset omillamme:
Kun olemme saaneet muuttujat valmiiksi, aloitetaan suunnittelumme tyylittäminen styles.less-tiedostoon. Otetaan ensin mukaan itse Bootstrap ja muuttujamme:
@import "bootstrap/bootstrap.less"; @import "muuttujat.vähemmän";
Kaikkia Bootstrapin oletustyylejä ei voi muuttaa muuttujilla, tehdään se manuaalisesti:
P ( marginaali: 20px 0; ) .form-control ( box-shadow: ei mitään; ) .btn ( font-family: @brand-font; )
Tässä olemme poistaneet varjon lomakeelementeistä ja painikkeiden tekstit on määritetty tietyllä sivufontilla.
Sitten kuvataan sivun tausta ja yläpalkki:
Teksti (reunus yläreunassa: 5px kiinteä #7e7e7e; taustakuva: url(../images/bg.png); )
Edelleen tekstissä ei kerrota, mihin tiedostoon tyylit on kirjoitettu. Muista vain, että tallennamme kaikki muuttujat variables.less-tiedostoon ja CSS-tyylit tallennetaan styles.less-tiedostoon.
HTML-kehys
Aloitamme perinteisesti sivuston asettelun HTML-kehyksestä. Lisäämme yksinkertaisimman mallin koodin Aloitussivulta index.html-tiedostoon, kun olemme poistaneet kaikki tarpeettomat:
Tämä lohko luo HTML5-dokumenttirakenteen. Otsikossa ilmoitamme sivumme nimen - Whitesquare. Näytämme sisällönkuvauskentän avulla, että sivun leveys on mobiililaitteet ax on yhtä suuri kuin näytön leveys ja alkuperäinen asteikko on 100 %. Sitten tyylitiedosto sisällytetään. Ja versioille Internet Explorer vähemmän kuin yhdeksäs, yhdistämme skriptejä, joiden avulla voimme näyttää asettelun oikein.
Layout
Tässä tapauksessa näemme, että sivusto koostuu kahdesta osasta: sisällön pääsäiliöstä, joka on näytön keskellä, ja alatunnisteen lopussa. Pääsäiliö koostuu kahdesta sarakkeesta: pääsisällöstä ja sivupalkista. Niiden yläpuolella on otsikko (header), navigointi (nav) ja sivun otsikko (.heading).
Lisätään seuraava koodi runkoon:
Täällä tapaamme Bootstrapin ensimmäisen komponentin - sarakkeet. Sarakkeiden pääelementille annetaan luokka "rivi", ja sarakeluokat alkavat etuliitteellä "col-", jota seuraa näytön koko (xs, sm, md, lg) ja päättyy sarakkeen suhteelliseen leveyteen.
Sarakkeelle voidaan antaa eri luokkia samaan aikaan näyttöjen arvoilla, esimerkiksi class="col-xs-12 col-md-8". Nämä luokat yksinkertaisesti asettavat sarakkeen leveyden prosentteina tietylle näytön koosta. Jos tietyn näytön luokkaa ei ole asetettu sarakkeelle, käytetään minimimääritetyn näytön luokkaa, ja jos sitä ei ole määritetty, leveyttä ei käytetä ja lohko ottaa suurimman mahdollisen leveyden.
Luokat "col-md-7" ja "col-md-17" osoittavat, että lohkot ovat sarakkeita, joiden leveys on 7 ja 17 suhteessa pääsäilöön. Oletuksena Bootstrapin sarakkeiden leveyksien summa on 12, mutta olemme kaksinkertaistaneet tämän määrän saavuttaaksemme tarvitsemamme joustavuuden.
Teksti (… .wrapper ( täyte: 0 0 50px 0; ) header ( täyttö: 20px 0; ) )
Sijoitimme tämän rakenteen kehon sisään. VÄHEMMÄN syntaksin avulla voit upottaa sääntöjä toisiinsa, jotka sitten käännetään tällaisiksi rakenteiksi:
Body .wrapper(...) body header(...)
Tämä lähestymistapa antaa sinun nähdä HTML-rakenne suoraan CSS:n sisällä ja antaa säännöille jonkinlaisen "laajuusalueen".
Logo
Liitä logo otsikkotunnisteeseen:
Ei vaadi lisätyyliä.
Hae
Haun luomiseksi tarvitsemme seuraavat Bootstrap-komponentit: sisäinen lomake, ryhmitellyt säätimet ja painike.
Otsikkotunnisteeseen luomme upotetun lomakkeen oikealle tasattuna. Tällaisen lomakkeen kentissä on oltava luokka "form-control" ja tunniste.
Lomakkeeseen sijoitamme "ryhmitetyt ohjausobjektit" -komponentin. Ryhmittelysäätimien avulla voit poistaa sisennyksen tekstinsyötön ja painikkeen väliltä ja yhdistää ne ikään kuin yhdeksi elementiksi.
Se on div, jossa on luokka "input-group" ja kentät, ja tällaisen komponentin painike sijoitetaan lohkoon, jonka luokka on "input-group-btn".
Koska meidän ei tarvitse näyttää hakukentän tunnistetta, piilotamme sen "sr-only"-luokassa. Tätä tarvitaan erityisissä näytönlukuohjelmissa.
Luokka "btn-primary" on lisätty painikkeeseen, mikä tarkoittaa, että tämä on tämän lomakkeen ensisijainen painike.
Meidän tarvitsee vain asettaa hakulomakkeen leveys tyyleissä.
Teksti ( … .wrapper ( … header ( … .form-haku ( leveys: 200px; ) ) ) )
Valikko
Avaa valikko ottamalla "navigointipalkki" -komponentin ja sijoittamalla siihen "navigointi"-komponentin, joka on linkkien luettelo. Navigointia varten on lisätty "navbar-nav"-luokka, joka käyttää erityisiä navigointityylejä navigointipalkin sisällä.
Tuodaksemme tämän valikon suunnitteluumme, asetetaan seuraavat arvot muuttujat:
/*navbar-korkeus*/ @navbar-height: 37px; /*asettaa lisää vaakasuoraa täyttöä*/ @nav-link-padding: 10px 30px; /*valikkokohteiden tausta*/ @navbar-default-bg: @panel-bg; /*tekstin väri valikkokohdissa*/ @navbar-default-link-color: #b2b2b2; /*ja hiiren osoitin - sama*/ @navbar-default-link-hover-color: @navbar-default-link-color; /*aktiivisen valikkokohdan tausta on meidän oma sininen värimme*/ @navbar-default-link-active-bg: @brand-primary; /*aktiivisen valikkokohdan tekstin väri*/ @navbar-default-link-active-color: #fff;
Mukautettavien parametrien lisäksi kuvailemme lisää tyyleissä - tämä on isoa tekstiä ja meidän omaa fonttiamme:
Teksti ( … .wrapper ( … .navbar a ( tekstin muunnos: isot kirjaimet; fontti: 14px @brand-font; ) ) )
Sivun otsikko
Sivun otsikko sijoitetaan div-kenttään luokan "otsikko" kanssa.
Meistä
Ja siinä on seuraavat tyylit:
Teksti ( … .wrapper ( … .heading ( korkeus: 40px; tausta: läpinäkyvä url(../images/h1-bg.png); marginaali: 30px 0; täyte-vasen: 20px; h1) (näyttö: inline-block); väri: #7e7e7e; fontti: normaali 40px/40px "Oswald", sans-serif; tausta: url(../images/bg.png); marginaali: 0; täyte: 0 10px; tekstin muunnos: isot kirjaimet; ) ) ) )
Tässä piirretään harmaa raita taustaksi div:lle ja upotetaan se rivillä h1 halutulla fontilla ja sivun taustalla, jotta saadaan vaikutelma läpinäkyvästä taustasta h1:lle.
Alivalikko
Alivalikkoa luotaessa emme käytä "navigointi"-komponenttia, koska se ei sovi meille kovin hyvin tyylien suhteen, "ryhmitelty lista" -komponentti sopii meille paljon paremmin. Jokaisella tällaisen komponentin elementillä on luokka "list-group-item".
Alavalikko on sijoitettava sivutunnisteeseen. Luomme linkkiluettelon päävalikon tapaan.
Määritä komponenttiasetuksissa, että kaikki ryhmitellyt luettelot näytetään "paneeli"-komponentin taustalla ja kehyksellä:
@list-group-bg: @paneeli-bg; @list-group-border: @panel-inner-border;
Ja käytä seuraavia tyylejä alivalikkoon:
Body ( … .wrapper ( … .submenu ( margin-bottom: 30px; li ( näyttö: list-item; font: 300 14px @brand-font; list-style-position: inside; list-style-type: neliö; täyte : 10px; tekstin muunnos: isot kirjaimet; &.active ( väri: @brand-primary; ) a ( väri: @text-color; tekstin koristelu: ei mitään; &:hover ( väri: @text-color; ) ) ) ) ) )
Ensin palautetaan vakiotyylit luetteloelementteihin, koska Bootstrap keskeytti ne omalla tyylillään. Lisää alareunaan sisennys. Alivalikoissa käytetään ohuempaa fonttia ja neliömäisiä luettelomerkkejä. Ja linkeille asetamme värit, isot kirjaimet ja poistamme alleviivauksen. &.active-koodin et-merkki korvataan VÄHEMMÄN syntaksilla käännöshetkellä päävalitsimella: ".submenu li.active".
Sivupalkin sisältö
Sivupalkin sisällössä on alivalikon lisäksi myös kuva toimistojen sijainnista.
Sen näyttämiseksi meille sopii "paneeli"-komponentti, tai pikemminkin sen muunnelma "pääpaneeli" (paneeli-ensisijainen) otsikon värittämiseen. Tämä komponentti sisältää otsikkolohkon (paneeli-otsikko) ja paneelin sisältölohkon (paneeli-runko). Lisäämme karttakuvaan "img-responsive" -luokan, mikä mahdollistaa kuvan kutistumisen pienellä näytön leveydellä.
Bootstrap-muuttujissa olemme jo asettaneet paneelin taustavärin (panel-bg), ja nyt määritämme, että "ensisijaisella" paneelilla on harmaa oletuspaneelin reuna, ei oletusarvoinen sininen reuna:
@paneeli-primary-border: @paneeli-sisäreuna;
Nyt sivustotyyleissä sinun on muutettava paneelin oletusasetuksia, joita ei muuteta muuttujien kautta:
Paneeli ( box-shadow: ei mitään; .panel-heading ( font: 14px @brand-font; text-transform: iso kirjain; täyte: 10px; ) .panel-body ( täyttö: 10px; ) )
Täällä poistimme varjon paneeleista, asetimme oman pehmusteemme ja asetimme otsikkofonttimme.
Lainata
Aloitetaan sisällön asettelu lisäämällä lainaus.
Tämä sivuelementti muistuttaa eniten Jumbotron-komponenttia. Lisätään se sisältösarakkeeseen:
Quisque in enim velit, osoitteessa dignissim est. nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat."
John Doe, Lorem Ipsum
Jumbotron-komponentin muuttujien avulla asetamme tekstin värin valkoiseksi ja brändätyn sinisen taustan:
@jumbotron-bg: @brand-primary; @jumbotron-väri: #fff;
Ja kuvailkaamme tyylejämme:
Body ( … .wrapper ( … .jumbotron ( reunuksen säde: 0; täyttö: 0; marginaali: 0; blockquote ( border-left: ei mitään; p ( fontti: 300 kursiivi 33px @brand-font; tekstin muunnos: isot kirjaimet); marginaali-ala: 0; ) pieni (tekstin tasaus: oikea; väri: #1D8EA6; fontti: 300 20px @brand-font; &:before (sisältö: ""; ) ) ) ) )
Näissä poistamme Bootstrapin oletusarvoisesti käyttämät kulman pyöristykset, komponenttien pehmusteet ja lainauskoristeet. Lisätään myös fonttityylemme.
Sisältö
Lorem ipsum dolor sit amet…
Donec vel nisl nibh…
Donec vel nisl nibh…
Seuraava vaihe on lisätä kaksi kuvaa, jotka ovat sisältötekstin lopussa. Tämä tehdään käyttämällä kahta saraketta:
"Pikkukuva"-luokka muuttaa kuvat "pikkukuva"-komponentiksi. Se tekee kaiken kuvien muotoilun puolestamme. Ainoa asia, joka meillä on jäljellä, on asettaa täyte- ja reunavärimme tämän komponentin muuttujiin:
@thumbnail-padding: 1px; @thumbnail-border: #c9c9c9;
Estä "Meidän tiimimme"
Kun asetat tämän lohkon, lisää ensin otsikko:
Tiimimme
tyylillä:
Body ( … .wrapper ( … h2 ( tausta: ei toista vieritys 0 0 #29C5E6; väri: #fff; fontti: 300 30px @brand-font; täyte: 0 10px; tekstin muunnos: isot kirjaimet; ) ) )
Ja lisää sitten lohko luokan "tiimi" kanssa, joka koostuu kahdesta rivistä, jotka sisältävät työntekijäkortit. Jokainen kortti on sarake. Kortin leveys vastaa neljää ruudukkomme saraketta. Kaikilla korteilla paitsi rivin ensimmäisellä kortilla on vasemmalla sisennys, jonka luo "col-md-offset-1" luokka. Kortin sisältö koostuu kuvasta ja kuvauksesta (.caption)
John Doe
Saundra Pittsley
tiimin johtaja
Erica Nobriga
taiteellinen johtaja
Cody Rousselle
vanhempi UI-suunnittelija
Merkintöjen luomisen jälkeen asetamme näille elementeille seuraavat tyylit:
Teksti ( … .wrapper ( … .team ( .row ( margin-top: 20px; .col ( white-space: nowrap; .thumbnail) ( margin-bottom: 5px; ) ) ) .col-md-offset-1 ( margin- vasen: 3,7%; ) .caption ( h3 ( font: 300 16px @brand-font; margin: 0; ) p ( font: 300 14px @brand-font; color: @brand-primary; margin: 0; ) ) ) ) ) )
Tässä asetettujen sisennysten ja kirjasintyylien lisäksi olemme muuttaneet luokkaa "col-md-offset-1". Hänen oli asetettava sisennykseksi 3,7 prosenttia. tavallinen sisennys oli liian suuri.
Alatunniste
Alatunniste koostuu neljästä suuresta lohkosta: Twitter-syöte, sivustokartta, sosiaalisia linkkejä ja logo tekijänoikeuksilla.Luodaan ensin alatunnistesäiliö näillä lohkoilla:
Ja käytä mallia siihen:
Alatunniste ( tausta: #7e7e7e; väri: #dbdbdb; fontin koko: 11px; .container (korkeus: 110px; täyte: 10px 0; ) )
Alatunniste määrittää harmaan alueen näytön leveydelle, ja sen sisällä oleva säilö näyttää alueen keskitettynä suurille näytöille ja määrittää alatunnisteen korkeuden ja pehmusteen. Käytämme sarakkeita kohdistamaan lohkot alatunnisteen sisällä.
Twitter-syöte
Twitter-syötteen sisällön kirjoittaminen:
Twitter-syöte
Ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta muualle, ullamcorper et nulla. Kielessä eget mi dui sit amet scelerisque nunc. Aenean elokuu
Tyylit:
Body ( … alatunniste ( … .container ( … h3 ( reunus-ala: 1px kiinteä #919191; väri: #ffffff; fontin koko: 14px; rivin korkeus: 21px; font-family: @brand-font; marginaali: 0 0 10px; tekstin muunnos: isot kirjaimet; ) p ( marginaali: 5px 0; ) .twitter ( p ( täyttö-oikea: 15px; ) aika a ( väri: #b4aeae; tekstin koristelu: alleviivaus; ) ) ) )
Aseta kaikille alatunnisteiden ylätunnisteille fontit ja sisennykset ja tee myös alleviivaukset alakehyksen kautta. Kappaleiden sisennys. Aseta päivämäärän näyttävän linkin väri ja alleviivaus.
Sivustokartta
Sivustokartta koostuu kahdesta yhtä suuresta sarakkeesta, joissa on linkkejä:
Sivustokartta
Linkit määrittävät niiden välisen värin, fontin ja sisennyksen.
Teksti ( … alatunniste ( … .container ( … a ( väri: #dbdbdb; ) .sitemap a ( näyttö: lohko; fontin koko: 12px; marginaali-ala: 5px; ) ) ) )
Sosiaaliset linkit
Lisäämme joukon linkkejä lohkoon, jossa on luokka "sosiaalinen".
Ja muotoile ne:
Teksti ( … alatunniste ( … .container ( … .social ( .social-icon ( .social-icon ( leveys: 30px; korkeus: 30px; background: url(../images/social.png)) ei toistoa; näyttö: inline-block; marginaali -oikea: 10px; ) .social-icon-small (leveys: 16px; korkeus: 16px; tausta: url(../images/social-small.png) ei toistoa; näyttö: inline-block; marginaali: 5px 6px 0 0; ) .twitter ( tausta-sijainti: 0 0; ) .facebook ( tausta-sijainti: -30px 0; ) .google-plus ( tausta-sijainti: -60px 0; ) .vimeo ( tausta-sijainti: 0 0 ; ) .youtube ( taustan sijainti: -16px 0; ) .flickr ( taustan sijainti: -32px 0; ) .instagram ( taustan sijainti: -48px 0; ) .rss ( taustan sijainti: -64px 0; ) ) ) ) )
Tässä käytimme sprite-tekniikkaa - kun yhtä kuvatiedostoa käytetään eri kuville. Kaikki linkit on jaettu suuriin kuvakkeisiin (.social-icon) ja pieniin (.social-icon-small). Asetimme nämä luokat näytettäväksi rivin sisällä kiinteät koot ja sama tausta. Ja sitten kanssa CSS:n avulla siirsi tämän taustan niin, että vastaava kuva näkyy jokaisessa linkissä.
Tekijänoikeus
Tekijänoikeudella ja logolla varustettu lohko on kuva, jossa on linkki ja alapuolella tekstiä sisältävä kappale.
![](/uploads/" alt=)
Copyright 2012 Whitesquare. Pcklabin luominen
Tyylit tehdään samalla tavalla kuin edelliset lohkot, sillä ainoalla erolla, että lohko on naulattu oikeaan reunaan ja sen sisällä kohdistus myös oikeaan reunaan:
Teksti ( … .footer ( … .container ( … .footer-logo ( kellua: oikea; marginaali-yläosa: 20px; fontin koko: 10px; tekstin tasaus: oikea; a (tekstin koristelu: alleviivaus; ) ) ) ) )
Tämä viimeistelee asettelun. Valmis projekti on ladattavissa
Ja nyt useimmat asettelusuunnittelijat käyttävät Bootstrap-ruudukkoa, kuten ymmärrän, koska sen avulla voit nopeuttaa huomattavasti mukauttamis- ja asetteluprosessia yleensä.
Yleensä kyllä, voit. Ihan kuin itse tekeminen lisäongelmia. He käyttävät sitä myös melko usein, koska he eivät tiedä, miten se muuten tehdään.
Selitä, miten ymmärrät, että esimerkiksi "tämä asettelu" voidaan tehdä käyttämällä bootstrap verkko, ja "tämä" on mahdotonta.Kuka tahansa voi, kysymys on, kuinka monta muokkausta siellä on tehtävä. Hihnalla on joukko oikeuksia, jos ne sopivat, niin voit. Kyse on elementtien skaalauksesta, ei ruudukosta.
Joten avaat asettelun, mitä katsot ensin?Yleensä puhelimen näytöllä odottamassa vastausta suunnittelijalta ilmaistakseen kaiken, mitä ajattelen hänestä. Ja samalla selventää, miten "tämä" hänen mielestään pitäisi piirtää selaintasolla...
Miten ymmärrät, että 1920 pikseliä leveä asettelu, jossa on 12 saraketta, on hyväksyttävä, ja jos asetat elementin "col-lg-*" leveydeksi sen, jonka se käyttää asettelussa, elementti sopii juuri sinne, missä se tarvitsee johon?Tätä varten asettelussa on merkinnät, mm. sarakkeiden mukaan, sis. Voit laittaa sen itsellesi, jos todella haluat. Pyynnöstä "Photoshop-ruudukko 12 saraketta" tai muita vastaavia - löydät paljon mielenkiintoista. Katso ruudukkoa ja ymmärrä, mikä menee minne. Tämä tapahtuu siinä tapauksessa, että yhtäkkiä jostain syystä sitä ei ollut.
Tai lisäät jonkinlaisia pedding marginaaleja "ja jokaiseen elementtiin, joka ei seiso suorassa + sinun on laskettava kaikki, katsottava sisennystä, joka on asettelmassa, laskettava kuinka paljon sisennystä on käynnistyspalkissa ja sitten lisätään / poistetaan .Asettelu joko piirretään hihnaa vastaavaksi tai asiakas on valmis sietämään, että kaikki tulee olemaan hieman erilaista kuin layout, tai se tehdään ilman hihnaa, koska "sovittaa se" on usein vaikeampaa kuin olla ilman sitä kuvailemassasi näkökulmassa.
Yritän selvittää mitä teen väärin? Miksi minun täytyy määritellä tyylit uudelleen 333 kertaa? Haluan oppia käyttämään kehystä, jonka ihmiset ovat luoneet ihmisille ja nopeuttaa asetteluprosessia, mutta todellisuudessa käy ilmi, että käytän 3 kertaa enemmän aikaaTätä en valitettavasti kerro sinulle, koska. En tiedä mitä teet yleensä ymmärtääkseni, mikä näistä "yleensä" voi olla "väärin".
Ehkä on olemassa resursseja, joissa tällaiset tylsiä ja typeriä virheitä selitetään ymmärrettävästi, tai ehkä ne selittävät kuinka se tehdään oikein ja miten ei. Äläkä sano "lue sivuston dokumentaatio".Minusta on liian aikaista lukea sivuston dokumentaatiota. Aluksi neuvoisin lukemaan jotain abstraktimpaa, en edes tiedä mitä se voisi olla konkreettista... Ehkä kannattaa katsoa videoita a la "miten niitataan sivusto hihnaan 15 minuutissa", tai jotain sellaisessa hengessä. Audiovisuaalinen sävellys on yleensä helpompi havaita kuin teksti. 2 ääntä
Tervetuloa aloitusblogin sivuille. Onni alkaa tästä. Jos pyrit luomaan hyvän pätevän verkkosivuston mahdollisimman helposti, mutta et ole vielä täysin perehtynyt ohjelmiin, kaikkiin termeihin ja koodiin, tämä artikkeli on sinua varten.
Bootstrap-responsiivinen asettelu – miten se kaikki liittyy? Miksi tarvitsemme puitteita, mitä se yleensä on, miten se auttaa ja helpottaako se todella elämää. Kerron myös kuinka käyttää ohjelmaa mahdollisimman paljon vahingoittamatta tulevaa projektia ja mistä löytää hyviä oppitunteja. No, aloitetaanko?
Vähän Bootstrapista
Oletan, että kaikki lukijani eivät ymmärrä hyvin, mitä kehys on, ja ovat jo ladaneet ja keksineet kaiken itse. Aloitan tiedolla heille. Äskettäin kirjoitin reagoivasta asettelusta ja kutsuin Bootstrapia ohjelmaksi. Tein tämän havainnoinnin yksinkertaistamiseksi, vaikka kehys ei ole ollenkaan sellainen.
Tämä on joukko sovelluksia, komentosarjoja tai laajennuksia, niin sanotusti, jotka helpottavat erityisten lomakkeiden luomista sivustolle, karuselleja kuvilla, sivuston näyttämistä mobiilissa tai ei ja niin edelleen.
Kuten luultavasti jo tiedät, ohjelmoijan on keksittävä ja kirjoitettava koodi jokaista näistä toiminnoista. Jos käytät Bootstrapia, sinun ei tarvitse. Otat vain valmiin mallin ja muutat sitä haluamallasi tavalla. Tämän seurauksena työaika lyhenee huomattavasti.
Nopeutuksen lisäksi tämän viitekehyksen painopisteitä ovat myös webmaster-vaatimusten vähentäminen. Ihannetapauksessa sivuston on luonut henkilö, joka tuntee erittäin hyvin JavaScriptin ja osaa kirjoittaa kaiken itse. Jos työskentelet Bootstrapin kanssa, tieto ei välttämättä ole niin syvällistä. Perustaso tulee aivan tarpeeksi.
Mahdollisuudet
Voit nähdä, mihin Bootstrap 3 pystyy verkkosivustolla venäläisten asiakirjojen kanssa osioissa css, javascript ja komponentit. Kun olet napsauttanut haluttua välilehteä oikealla, näkyviin tulee erittäin kätevä valikko, jonka avulla voit siirtyä oikeaan kohtaan asiakirjassa.
Tietyissä esimerkeissä se näyttää, miltä tästä tai toisesta toiminnosta vastaava koodin osa näyttää sekä tulos. Voit määrittää sisällön näkyvyyden kaikille mobiililaitteille. Käyttöoikeudet ja muut asetukset on jo tehty.
Itse kurssi Harjoittele A:sta Z:hen ” kestää noin 17 tuntia. Tänä aikana saat tärkeää teoreettista tietoa ja sitten käytännössä, kuinka tiettyjä elementtejä käytetään oikein: mitä elementtejä koodista tulee poistaa, mitä tarvitaan, jotta sivusto toimisi nopeammin , mikä se on ja paljon muuta.
No, ja vielä yksi bonuskurssi, TOP 4 Bootstrap-lisäosaa, jotka auttavat kehystä toimimaan tehokkaammin.
No, siinä näyttää olevan kaikki. Tilaa uutiskirje ja opi lisää yksinkertaisista ratkaisuista monimutkaisiin ongelmiin ja oikeaan lähestymistapaan työskennellessäsi vääränlaisten tuotteiden kanssa.
