Bootstrap-opetusohjelma


bootstrap 4 -opetusohjelma


bootstrap on käyttöliittymä, joka auttaa sinua rakentamaan mobiililaitteisiin reagoivia verkkosivustoja nopeammin ja helpommin. Ensin Twitterin kehittämä Bootstrap on nyt käytetty kaikkeen web-sovellusten kehittämiseen WordPress-teemoihin. Se on myös täysin ilmainen, monipuolinen ja intuitiivinen.

Bootstrap -sovelluksen avulla voit loihtia monimutkaisia ​​verkkosivuja tavallisesta HTML: stä ja mukauttaa niitä tarpeitasi varten. Bootstrap sisältää myös useita jQuery-laajennuksia, jotka voivat tarjota lisätoimintoja, kuten karuselleja, painikkeita, työkaluvihjeitä ja muuta.

Viimeisenä, mutta ei vähäisimpänä, se antaa sinulle paljon pikavalintoja verkkosivujen luomiseen, mikä säästää aikaa ja energiaa. Tarvitset vain perustiedot HTML: stä ja CSS: stä luodaksesi reagoivia, ensin mobiileja ja yhteensopivia kaikkien nykyaikaisten selainten kanssa.

P.S. Bootstrap ei ole täydellinen vaihtoehto aloittelijoille. Jotkut HTML- ja CSS-tietotiedot olisivat hyödyllisiä. Vaihtoehtoisesti voit käyttää verkkosivustojen rakentajia tai WordPressiä verkkosivuston luomiseen.

Kuinka luoda verkkosivusto verkkosivustolla Bootstrap (sisällysluettelo):

  1. Vaihe 1: Asennus ja yleiskatsaus
    1. Luo HTML-sivu
    2. Lataa Bootstrap CDN: n kautta tai isännöi sitä paikallisesti
    3. Sisällytä jQuery
    4. Lataa Bootstrap JavaScript
    5. Laita se kaikki yhteen
  2. Vaihe 2: Suunnittele aloitussivusi
    1. Lisää navigointipalkki
    2. Sisällytä mukautettu CSS
    3. Luo sivusäiliö
    4. Lisää taustakuva ja mukautettu JavaScript
    5. Lisää peittokuva
    6. Sisällytä sivun otsikko ja teksti
    7. Luo CTA-painike
    8. Aseta kolmen sarakkeen osa
    9. Lisää yhteyslomake
    10. Luo kahden sarakkeen alatunniste
    11. Lisää mediakyselyt
    12. Saa verkkosivustosi elää

Kokonaisaika verkkosivuston luomiseen Bootstrap-sovelluksella: 3-4 tuntia.
Taitotaso: Aloittelija keskihintaan

Vaihe 1: Asennus ja yleiskuvaus


Käyttääksesi Bootstrap-sovellusta, sinun on ensin integroitava se kehitysympäristöösi, eli verkkosivuksi. Tätä varten sinulla on kaksi erilaista vaihtoehtoa: lataa se etäyhteyden kautta tai lataa ja käytä Bootstrap-sovellusta paikallisesti. Tarvitset kuitenkin ensin jotain molemmille, jotta se ladataan.,

1. Luo HTML-sivu

Ensimmäisenä vaiheena luomme yksinkertaisen HTML-mallin pohjana, jossa käytämme Bootstrap-sovellusta. Siksi ensimmäinen asia, jonka haluat tehdä, on luoda kansio tietokoneellesi tai palvelimelle projektitiedostoja varten. Tässä tapauksessa kutsun sitä vain bootstrap. Luo täällä uusi tekstitiedosto ja soita sille index.html. Avaa se valitsemallasi tekstieditorilla (esim. Muistilehtiö++) ja liitä sitten alla oleva koodi siihen.





Bootstrap-opetusohjelman näytesivu








Muista tallentaa tiedosto ennen siirtymistä eteenpäin!

2a. Lataa Bootstrap CDN: n kautta

Kuten jo selitettiin, Bootstrap koostuu pääasiassa tyylisivuista ja komentosarjoista. Sellaisenaan ne voidaan ladata verkkosivusi otsikkoon ja alatunnisteeseen kuten muut sisältöt, kuten mukautetut fontit. Kehys tarjoaa CDN: n (sisällönjakeluverkko) pääsypolun siihen. Löydät sen Bootstrap-lataussivu, jäljempänä.

Pääset Bootstrap-sivulle liittämällä alla oleva koodi yksinkertaisesti mallisi osa.

Kun tallennat tiedoston nyt, se avaa selaimen, joka lataa automaattisesti Bootstrap-resurssit.

Etämenetelmän käyttö on hyvä idea, koska monilla käyttäjillä on jo kehys selaimen välimuistissa. Jos näin on, heidän ei tarvitse ladata sitä uudelleen sivustoosi saapuessasi, mikä johtaa nopeampaan sivujen latausaikaan. Tämän seurauksena tämä on suositeltava menetelmä live-sivustoille.

Kokeiluun ja kehittämiseen tai jos haluat olla riippumaton Internet-yhteydestä, voit kuitenkin hankkia myös oman kopion Bootstrapista. Tätä teen tässä opetusohjelmassa, koska sen seurauksena on vähemmän koodia lähetettäväksi.

2b. Isäntä Bootstrap paikallisesti

Vaihtoehtoinen tapa käynnistää Bootstrap on ladata se kiintolevylle ja käyttää tiedostoja paikallisesti. Löydät latausvaihtoehdot samasta paikasta kuin linkit etäversioon. Varmista, että saat käännetyt CSS- ja JS-tiedostot. Et tarvitse lähdetiedostoja.

Kun olet tehnyt niin, pura tiedosto ja kopioi sen sisältö samaan hakemistoon kuin index.html. Sen jälkeen voit ladata Bootstrap CSS: n projektiisi seuraavasti:

Huomaat, että tämä sisältää tiedostopolun, josta Bootstrap-tiedosto löytyy. Varmista tapauksessasi, että polku vastaa todellista asetusta. Esimerkiksi hakemistojen nimet saattavat vaihdella, jos latasit toisen Bootstrap-version.

3. Sisällytä jQuery

Jotta saat täyden Bootstrap-toiminnon, sinun on myös ladattava jQuery-kirjasto. Tässäkin sinulla on mahdollisuus ladata se etänä tai isännöidä sitä paikallisesti.

Ensimmäisessä tapauksessa löydät linkin jQuery-sovelluksen uusimpaan versioon tässä. Voit ladata sen kirjastoon sivullesi asettamalla koodirivin alapuolelle oikeaan kohtaan ennen kirjoitusta sivullasi.

Vaihtoehtoisesti, Lataa jQuery (napsauta hiiren kakkospainikkeella> Tallenna linkki…), pura ja laita se projektikansioon. Lisää sitten se samaan paikkaan kuin tiedostosi tällä tavalla:

Varmista jälleen, että polku vastaa asetuksiasi.

4. Lataa Bootstrap JavaScript

Viimeinen vaihe Bootstrap-asetusten määrittämisessä on ladata Bootstrap JavaScript-kirjasto. Ne sisältyvät kehyksen ladattuun versioon, ja löydät myös linkkejä etälähteisiin samassa paikassa kuin aiemmin. Lataamme sen kuitenkin toiseen paikkaan kuin tyylitaulukko. Otsikon sijasta se menee sivun alatunnisteeseen heti jQuery-kutsun jälkeen.

Voit soittaa etäyhteyteen seuraavasti:

Tai paikallisesti niin:

5. Laita se kaikki yhteen

Jos olet noudattanut yllä olevia vaiheita oikein, sinun pitäisi saada tiedosto, joka näyttää tällaiselta etäratkaisulle:

   Bootstrap-opetusohjelman näytesivu         

Jos isännöit paikallisesti, sivumallisi tulisi muistuttaa seuraavaa koodia:

   Bootstrap-opetusohjelman näytesivu         

Jos sinulla on sellainen ja tallensit työsi, olet nyt valmis siirtymään seuraavaan vaiheeseen.

Vaihe 2: Suunnittele aloitussivu


Okei, se oli tosin paljon valmistelutyötä. Se ei kuitenkaan ollut kovin vaikea, eikö niin? Plus, nyt hauska alkaa.

Tällä hetkellä, kun navigoit mallisivustollesi, sinun pitäisi vain nähdä tyhjä sivu. Aika muuttaa se.

1. Lisää navigointipalkki

Ensimmäinen asia, jonka haluamme tehdä, on lisätä navigointipalkki sivun yläosaan. Tämän avulla kävijät voivat kiertää sivustoasi ja löytää loput sivut.

Sitä varten käytämme navbar luokka. Tämä on yksi oletuselementit Bootstrapista. Se luo navigointielementin, joka on oletuksena reagoiva ja joka romahtaa automaattisesti pienemmillä näytöillä. Se tarjoaa myös sisäänrakennetun tuen tuotemerkkien, värimaailmien, välien ja muiden komponenttien lisäämiseen.

Käytämme sitä kuten alla ja lähetämme sen juuri alla tag:

 Logo   

Jotkut selitykset koodista:

  • Navbaria laajentaa MD – Tämä tarkoittaa, missä vaiheessa navigointipalkki laajenee pystysuorasta tai hampurilainen-kuvakkeesta täysikokoiseksi vaakapalkiksi. Tässä tapauksessa olemme asettaneet sen keskikokoisille näytöille, mikä Bootstrapissa on mikä tahansa suurempi kuin 768px.
  • navbar tuotemerkin – Tätä käytetään verkkosivustosi brändämiseen. Voit myös lisätä tähän logo-kuvatiedoston.
  • Navbaria nivelvivun – Osoittaa romahtuneen valikon vaihtopainiketta. Pala data-ota = "romahtaa" määrittelee, että tämä kääntyy hampurilavalikkoon, ei pudotusvalikkoon, mikä on toinen vaihtoehto. On tärkeää, että määrität a tiedot kohde- CSS – tunnuksella (määritelty #) ja kääri a div samalla nimellä varsinaisen ympärillä navbar elementti.
  • Navbaria nivelvivun-kuvaketta – Kuten luultavasti voidaan arvata, tämä luo kuvakkeen, jota käyttäjät napsauttavat avataksesi valikon pienemmillä näytöillä.
  • navbar-nav – luokka
      luetteloelementti, joka pitää valikkokohtia. Viimeksi mainitut on merkitty nav-erä ja nav-link.

    Miksi selitän tätä niin paljon?

    Koska tämä on Bootstrapin kohta. Sinulla on kaikki nämä standardit, joiden avulla voit luoda elementtejä joillakin HTML- ja CSS-luokilla nopeasti. Sinun ei tarvitse kirjoittaa CSS: ää tyylin tarjoamiseksi, kaikki on jo määritetty Bootstrap-sovelluksessa. Lisäksi kaikki on mobiililaitteille reagoivaa! Oletko alkanut nähdä kuinka hyödyllinen tämä on?

    Yllä oleva riittää lisätäksesi navigointipalkin sivustoosi. Kuitenkin tällä hetkellä se näyttää edelleen hyvin pieneltä.

    bootstrap-opetusohjelma lisää navigointipalkki

    Tämä johtuu siitä, että siinä ei ole paljon muotoilua. Vaikka voit lisätä oletusvärit (esimerkiksi antamalla navigointipalkille luokan kuten bg-dark navbar-dark), sen sijaan haluamme lisätä oman.

    2. Sisällytä mukautettu CSS

    Onneksi, jos haluat muuttaa oletusmuotoa, sinun ei tarvitse käydä läpi suuren tyyliarkkikirjaston ja tehdä muutokset käsin. Sen sijaan, aivan kuten WordPress-lapsiteemassa, voit lisätä omia CSS-tiedostoja, joiden avulla voit korvata nykyisen tyylityksen.

    Luo tätä varten yksinkertaisesti tyhjä tiedosto tekstieditorilla ja soita siihen main.css. Tallenna se ja lisää se Bootstrap-sivustosi yläosaan seuraavasti:

    Tämä on tyylilehden koodi, joka sijaitsee päähakemistossa. Jos päätät sijoittaa css lisää kansioon oikea polku.

    Täältä voit lisätä mukautetun CSS-sivustosi. Esimerkiksi navigointipalkin ja sen elementtien tyyliä varten voit käyttää seuraavia merkintöjä:

    vartalo { täyte: 0; marginaali: 0; tausta: # f2f6e9; } /*--- navigointipalkki ---*/ .navbar { tausta: # 6ab446; } .nav-link, .navbar-brand { väri: #fff; kohdistin: osoitin; } .nav-link { marginaali-oikea: 1em! tärkeä; } .nav-link: hover { väri: # 000; } .navbar-collapse { perustele sisältö: flex-end; }

    Ja tässä on tulos:

    bootstrap-opetusohjelman tyylinen navigointipalkki

    Näyttää paremmalta kuin ennen, eikö niin?

    3. Luo sivun sisältösäiliö

    Seuraava haluamasi selauspalkin jälkeen on säilö sivun sisällölle. Tämä on todella helppoa Bootstrap-sovelluksessa, koska tarvitset vain navigointitunnisteen alapuolella:

    Huomaa kontti-neste luokka. Tämä on toinen niistä oletusarvoisista Bootstrap-luokista. Sovelletaan sitä div elementti lisää siihen joukon CSS: ää automaattisesti.

    -neste osa varmistaa, että säiliö venyy näytön koko leveydeltä. Siellä on myös vain kontti, jolla on kiinteät leveydet siihen, joten näytön molemmilla puolilla on aina tilaa.

    Jos lataat sivun nyt uudelleen, et silti näe mitään (ellet käytä kehittäjätyökaluja). Tämä johtuu siitä, että olet luonut vain tyhjän HTML-elementin. Tämä alkaa muuttua nyt.

    4. Lisää taustakuva ja mukautettu JavaScript

    Tämän Bootstrap-opetusohjelman seuraavana vaiheena haluamme sisällyttää aloitussivun otsikkoon koko näytön taustakuvan. Tätä varten meidän on käytettävä joitain jQuery-sovelluksia saadaksesi kuva venymään koko näytön poikki.

    Teet samalla tavalla kuin sisällytät mukautetun CSS: n. Luo ensin nimen tekstitiedosto main.js ja aseta se sivustosi kansioon. Soita sitten ennen sulkemista tag sisällä index.html.

    Sen jälkeen voit kopioida ja liittää tämän koodin pala tehdäksesi

    elementti venyy koko näytön yli:
    $ (Asiakirja) .ready (function () { $ ( '. Header). Korkeus ($ (ikkuna) .height ()); })

    Sitten ainoa jäljellä oleva asia on asettaa taustakuva. Voit tehdä tämän niin sisällä main.css:

    .otsikko { taustakuva: url ('images / header-background.jpg'); taustakoko: kansi; tausta-asema: keskusta; asema: suhteellinen; }

    Jos sijoitat riittävän kokoisen kuvan yllä mainitun polun määrittelemään kohtaan, saavutat tämän kaltaisen tuloksen:

    bootstrap-opetusohjelma sisältää otsikon taustakuvan

    5. Lisää peittokuva

    Jotta taustakuvasta tulisi erityisen tyylikäs, lisäämme myös peittokuvan. Tätä varten luot uuden div-elementin sen sisällön sisään, jonka juuri lisäsit aiemmin.

    Sitten voit lisätä seuraavat tiedot mukautettuun CSS-tiedostoosi:

    .peittokuva { asema: ehdoton; min-korkeus: 100%; min-leveys: 100%; vasen: 0; alkuun: 0; tausta: rgba (0, 0, 0, 0,6); }

    Tämä luo tämän mukavan peittokuvan aiemmin syöttämällesi kuvalle:

    bootstrap-opetusohjelma lisää peittokuva

    6. Sisällytä sivun otsikko ja teksti

    Nyt haluat todennäköisesti lisätä sivun otsikon otsikon muodossa sekä runkotekstin. Tällä tavalla vierailijat tietävät heti, millä sivustolla he ovat ja mitä he voivat odottaa siitä.

    Luo niitä lisäämällä tämä katkelma viimeisessä vaiheessa asettamasi säilön sisäpuolelle, peittokuvan alle:

    Tervetuloa aloitussivulle!

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Suspendisse consectetur mi id libero fringilla, pharetra semi ullamcorper -tuotteessa.

    Lisää sen jälkeen seuraava merkintä kohtaan main.css.

    .kuvaus { vasen: 50%; asema: ehdoton; yläosa: 45%; transformaatio: kääntää (-50%, -55%); tekstin kohdistaminen: keskusta; } .kuvaus h1 { väri: # 6ab446; } .kuvaus p { väri: #fff; kirjasinkoko: 1,3rem; linjan korkeus: 1,5; }

    Kun teet, aloitussivu näyttää nyt seuraavalta:

    bootstrap-opetusohjelma lisää sivun otsikko ja kuvaus

    Se on todella alkamassa kokoontua, eikö niin?

    7. Luo CTA-painike

    Mikään aloitussivu ei ole täydellinen ilman toimintakehotusta, useimmiten painikkeen muodossa. Tästä syystä olisi turhaa jättää ottamatta huomioon kuinka luoda tämä Bootstrap-opetusohjelmaan.

    Kehys tarjoaa runsaasti työkaluja painikkeiden luomiseen nopeasti ja helposti. Löydät paljon esimerkkejä tässä. Lisäsin tapauksessani seuraavan merkinnän heti sivun sisällön alle kontti:

    Lisäksi lisään tämän CSS: n main.css:

    .kuvauspainike { reuna: 1px kiinteä # 6ab446; tausta: # 6ab446; raja-säde: 0; väri: #fff; } .kuvauspainike: vie hiiri { reuna: 1px kiinteä #fff; tausta: #fff; color: # 000; }

    Tallennuksen ja uudelleenlatauksen jälkeen se näyttää tältä:

    bootstrap-opetusohjelma lisää toimintakehotuspainike

    8. Aseta kolmen sarakkeen osa

    Olen jo melko tyytyväinen siihen, kuinka asiat ovat muotoutumassa. Emme kuitenkaan ole vielä valmis sivun kanssa. Seuraavaksi haluamme luoda kolme saraketta pääsisällön alle lisätietoja varten. Tämä on Bootstrapin erikoisuus, koska se pelaa sen vahvuuteen: luomalla ruudukon. Näin voit tehdä tässä tapauksessa:

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Ensimmäinen asia, jonka huomaat, on rivi elementti. Tarvitset tämän aina, kun luot sarakkeita toimiaksesi ruudukon säiliönä.

    Sarakkeissa kaikilla on useita luokkia: col-lg-4, col-md-4 ja col-sm-12. Ne osoittavat, että kyse on sarakkeista ja niiden koosta eri näytöillä.

    Tämän ymmärtämiseksi sinun on tiedettävä, että Bootstrap-ruudukossa kaikki yhden rivin sarakkeet kasvavat aina numeroon 12. Joten antamalla heille yllä olevat luokat tarkoittaa, että ne vievät kolmanneksen näytöstä isoilla ja keskisuurilla näytöt (12 jaettuna 3 on 4), mutta koko näyttö pienissä laitteissa (12 sarakkeesta 12).

    Se on järkevää, eikö niin?

    Huomaat myös, että olen lisännyt kuvia ja lisännyt .kuva-neste luokkaa heille. Tämän tarkoituksena on saada heidät reagoimaan niin, että ne skaalautuvat näytön kanssa, jota sivua katsotaan.

    Lisäksi sinulla on seuraava tyyli mukana tavallisessa paikassa:

    .ominaisuudet { marginaali: 4em auto; täyte: 1em; asema: suhteellinen; } .ominaisuuden nimi { väri: # 333; kirjasinkoko: 1,3rem; kirjasimen paino: 700; marginaali-pohja: 20px; tekstimuunnos: iso kirjain; } .ominaisuudet img { -webkit-box-shadow: 1 px 1 px 4 px rgba (0, 0, 0, 0,4); -moz-box-varjo: 1 px 1 px 4 px rgba (0, 0, 0, 0,4); laatikkovarjo: 1 px 1 px 4 px rgba (0, 0, 0, 0,4); marginaali-pohja: 16px; }

    Kun se lisätään pääsisällön alle ja tallennetaan, se näyttää tältä:

    bootstrap-opetusohjelma lisää kolme sarakeosaa

    9. Lisää yhteyslomake

    Huomaat, että yksi uusista kentistä on edelleen tyhjä. Tämä oli tarkoituksella, koska haluamme lisätä siihen yhteyslomakkeen. Tämä on aivan normaali tapa aloitussivuille, jotta kävijät voivat ottaa yhteyttä.

    Yhteyslomakkeen luominen Bootstrapissa on melko helppoa:

    Ota yhteyttä!

    Tähän mennessä minun ei enää tarvinnut selittää merkintää pilareiden luomiseksi. Tässä on mitä muu merkintä tarkoittaa:

    • lomake-ryhmä – Käytetään lomakekenttien kiertämiseen muotoilua varten.
    • lomake-ohjaus – Merkitsee muotokenttiä, kuten syötteitä, tekstialueita jne.

    Lomakkeilla voi tehdä paljon enemmän, ja löydät ne lomakkeista dokumentointi. Edellä mainittu riittää kuitenkin esittelytarkoituksiin. Aseta se jäljellä olevan tyhjän sarakkeen sisään ja lisää sitten muotoilu sisään main.css:

    .ominaisuudet .muoto-ohjaus, .ominaisuuksien syöttö { raja-säde: 0; } .ominaisuudet .btn { taustaväri: # 589b37; reuna: 1px kiinteä # 589b37; väri: #fff; reunan yläosa: 20 px; } .ominaisuudet .btn: hover { taustaväri: # 333; reuna: 1px kiinteä # 333; }

    Kun teet, saat tämänkaltaisen lomakkeen:

    bootstrap-opetusohjelma sisältää yhteyslomakkeen

    10. Luo kahden sarakkeen alatunniste

    Okei, olemme nyt pääsemässä Bootstrap-oppaan loppuun. Viimeinen asia, jonka haluat lisätä aloitussivullesi, on alatunniste, jossa on kaksi saraketta. Tähän mennessä tämän ei pitäisi enää aiheuttaa suurta ongelmaa sinulle.

    lisäinformaatio

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Ottaa yhteyttä

    1640 Riverside Drive, Hill Valley, Kalifornia
    [Email protected]
    + 01 234 567 88
    + 01 234 567 89

    Tavallisten ruudukkojen merkitsemisen lisäksi tässä osiossa korostetaan muutamia mahdollisuuksia muokata typografiaa Bootstrap-sovelluksella:

    • text-isoiksi
    • fontti-paino-lihavoitu
    • text-keskus

    Sen pitäisi olla melko selvää luokkien nimistä, joita he tekevät. Löydät lisätietoja Bootstrapista ja typografiasta tässä.

    Yllä olevan lisäksi voit käyttää muotoilua seuraavasti:

    .sivun alatunniste { taustaväri: # 222; väri: #ccc; täyte: 60 px 0 30 px; } .alatunniste-tekijänoikeudet { väri: # 666; täyte: 40 kuvapistettä 0; }

    Tuloksena on kaunis alatunniste, joka näyttää seuraavalta:

    bootstrap-opetusohjelma sisältää sivun alatunnisteen

    11. Lisää mediakyselyt

    Sivu on pohjimmiltaan jo valmis. Se on myös täysin vastuullinen. Selaimen mobiilinäkymässä yläosa ei kuitenkaan ole vielä aivan oikea.

    bootstrap-opetusohjelman virhe mobiilisuunnittelussa

    Ei hätää, voit kuitenkin korjata sen melko helposti yksinkertaisella mediakyselyllä. Ellet käytä SASS: ää Bootstrap-sivustosi kääntämiseen, nämä toimivat samalla tavalla kuin muissa tapauksissa. Sinun on vain pidettävä mielessä esiasetetut raja-arvot sisältyy Bootstrapiin.

    Seurauksena on, että yllä olevan ongelman korjaamiseksi voit sisällyttää vain koodin, kuten tämä:

    @media (enimmäisleveys: 575.98px) { .kuvaus { vasen: 0; täyte: 0 15 kpl; asema: ehdoton; 10 parasta%; muuntaa: ei mitään; tekstin kohdistaminen: keskusta; } .kuvaus h1 { kirjasinkoko: 2em; } .kuvaus p { kirjasinkoko: 1,2rem; } .ominaisuudet { marginaali: 0; } }

    Sen jälkeen kaikki on niin kuin pitäisi olla:

    bootstrap-opetusohjelma lisää mediakysely

    12. Lataa verkkosivustosi Web-isäntään

    Jos olet seurannut, sinun pitäisi nyt asettaa valmiille verkkosivustolle, joka toimii myös mobiililaitteissa ja on täysin reagoiva.

    Toistaiseksi kukaan, mutta voit nähdä sen. Jotta voit muuttaa sitä, tarvitset verkkopalvelimen ja verkkotunnuksen. Tällä tavoin ihmiset voivat syöttää verkkosivustosi osoitteen selainpalkkiin ja käyttää sitten äskettäin lyötyä Bootstrap-verkkosivustoasi verkossa.

    Jotta he voivat tehdä niin, sinun on ladattava sivusto palvelimellesi. Voit tehdä sen esimerkiksi FTP-asiakkaalla FileZilla. Kerää FTP-isäntäosoitteesi, käyttäjänimesi ja salasanasi palveluntarjoajalta yhdistääksesi palvelimeesi etäyhteyden kautta. Kun teet niin, sinun pitäisi voida nähdä siellä olevat tiedostot ja hakemistot.

    lataa käynnistyssivuston verkkosivusto palvelimelle ftp: n kautta

    Siirry hakemistoon, johon verkkotunnuksesi osoittaa (yleensä juurihakemisto). Kun olet tehnyt sen, etsi vain kansio kiintolevyn Bootstrap-tiedostojen kanssa, merkitse kaikki sisällä olevat tiedostot ja vedä ne sitten palvelimelle aloittaaksesi latauksen. Prosessin valmistuminen vie jonkin aikaa riippuen yhteyden nopeudesta sekä tiedostojen määrästä ja koosta.

    Kun olet valmis, kun käytät verkkotunnustasi, sinun pitäisi voida nähdä valmis sivusto selainikkunassa.

    Käynnistyskurssin valmis aloitussivu

    Ei paha muutaman koodirivin kohdalla?

    Jos haluat, että jos sinulla on koko sivun koodi, mukaan lukien mukautettu CSS ja JavaScript, voit ladata ne kaikki täältä. Tämän avulla sinulla on kaikki mitä tarvitset luodaksesi aloitussivun Bootstrapilla.

    johtopäätös

    Bootstrap on avoimen lähdekoodin käyttöliittymän kehityskehys, jota kuka tahansa voi käyttää ilmaiseksi. Sen avulla voit nopeasti prototyyppisuunnittelua, luoda verkkosivuja ja yleensä saada maahan juoksemisen.

    Kuten olet nähnyt tässä Bootstrap-opetusohjelmassa aloittelijoille, se tarvitsee vain perustiedot HTML: stä, CSS: stä ja eräistä valinnaisista jQueryistä. Vaikka Bootstrap ei ole niin mukava kuin WordPressin käyttäminen, se on silti pätevä vaihtoehto verkkosivuston luomiseen.

    Tähän mennessä tiedät kuinka asettaa ja asentaa Bootstrap ja sen komponentit, luoda yksinkertainen aloitussivu, sisältää joitain perussisällöitä ja tyyliä se. Voit luoda navigointivalikkoja, asettaa taustakuvia, sisältää painikkeita, sarakkeita ja yhteystietoja.

    Tietenkin on vielä opittavaa.

    Tämän Bootstrap-perusoppaan ansiosta tiedät nyt tarpeeksi, jotta pystyt jatkamaan eteenpäin etenemistä itse. Hyvä lähtökohta on, jos haluat sukeltaa syvemmälle kehykseen W3Schools. Sen lisäksi toivomme, että pidit tästä aloittelijan opetusohjelmasta ja haluamme kuulla ajatuksiasi ja kokemuksiasi siitä.

    Päivitys: Olemme myös luoneet aloittelijahuijauskoodin aloittelijoille .pdf- ja .png-versioina.

    Onko sinulla mitään ajatuksia yllä olevasta Bootstrap-opetusohjelmasta? Kysymyksiä, kommentteja, pyyntöjä? Kerro meille alla olevassa kommenttiosassa!

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