Bootstrap kennsla


bootstrap 4 einkatími


Bootstrap er framandrammi sem hjálpar þér að byggja upp farsíma sem geta svarað farsíma fljótt og auðveldlega. Bootstrap var fyrst þróað af Twitter og er nú notað fyrir allt frá því að þróa vefforrit til WordPress þemu. Það er líka alveg ókeypis, fjölhæfur og leiðandi.

Með Bootstrap geturðu töfrað flóknar vefsíður úr venjulegu HTML og sérsniðið þær að þínum þörfum. Bootstrap er einnig með fjölda af jQuery viðbótum sem geta veitt viðbótarvirkni eins og hringekjur, hnappa, verkfæri og fleira.

Síðast en ekki síst, það gefur þér mikið af flýtileiðum til að búa til vefsíður sem spara þér tíma og orku. Allt sem þú þarft er grunnskilningur á HTML og CSS til að búa til sem eru móttækilegir, farsíma fyrst og samhæfir við alla nútíma vafra.

P.S. Bootstrap er ekki fullkominn valkostur fyrir alla byrjendur. Einhver HTML og CSS þekking væri gagnleg. Að öðrum kosti er hægt að nota vefsíðusmiðja eða WordPress til að búa til vefsíðu.

Hvernig á að búa til vefsíðu með Bootstrap (efnisyfirlit):

  1. Skref 1: Skipulag og yfirlit
    1. Búðu til HTML síðu
    2. Hlaðið ræsiforritinu í gegnum CDN eða hýst það á staðnum
    3. Hafa jQuery
    4. Hlaðið ræsibraut JavaScript
    5. Settu þetta allt saman
  2. 2. skref: Hannaðu áfangasíðuna þína
    1. Bættu við siglingastiku
    2. Láttu sérsniðna CSS fylgja með
    3. Búðu til innihald síðu
    4. Bættu við bakgrunnsmynd og sérsniðnu JavaScript
    5. Bættu við yfirlagi
    6. Hafa síðuheiti og meginmálstexta með
    7. Búðu til CTA hnapp
    8. Settu upp þriggja dálka hluta
    9. Bættu við snertingareyðublaði
    10. Búðu til tveggja súlna fót
    11. Bættu við fyrirspurnum fjölmiðla
    12. Fáðu vefsíðu þína í beinni útsendingu

Heildartími til að búa til vefsíðu með Bootstrap: 3-4 klukkustundir.
Kunnátta stig: Byrjandi til milligöngu

Skref 1: Skipulag og yfirlit


Til þess að nota Bootstrap þarftu fyrst að samþætta það í þróunarumhverfi þínu, einnig vefsíðu. Fyrir það hefurðu tvo mismunandi möguleika: hlaðið það lítillega eða halaðu niður og notaðu Bootstrap á staðnum. En hjá báðum, þá þarftu fyrst eitthvað til að hlaða það inn.,

1. Búðu til HTML síðu

Sem fyrsta skref munum við búa til einfalt HTML sniðmát sem grunn þar sem við munum nota Bootstrap. Fyrir það, það fyrsta sem þú vilt gera er að búa til möppu á tölvunni þinni eða netþjóninum fyrir verkefnaskrárnar. Í þessu tilfelli mun ég einfaldlega kalla það stígvél. Hér skaltu búa til nýja textaskrá og kalla hana index.html. Opnaðu það með textaritli að eigin vali (t.d.. Notepad++) og límdu síðan kóðann hér að neðan inn í hann.





Sýnishornsíða með Bootstrap kennslu








Ekki gleyma að vista skrána áður en haldið er áfram!

2a. Hlaðið ræsistöng í gegnum CDN

Eins og áður hefur verið lýst samanstendur Bootstrap aðallega af stílblöðum og handritum. Sem slíkir er hægt að hlaða þeim í haus og fót á vefsíðunni þinni eins og aðrar eignir eins og sérsniðnar leturgerðir. Ramminn býður upp á aðgangsstíg fyrir CDN (innihald afhendingarnet) fyrir það. Þú getur fundið það á Hlaða niður ræsisíðu, nánar hér að neðan.

Til að setja Bootstrap inn á síðuna þína skaltu líma kóðann hér að neðan á hluti sniðmátsins þíns.

Þegar þú vistar skrána, þá hleðst hver vafrinn sem opnar hana sjálfkrafa Bootstrap eignirnar.

Að nota ytri aðferðina er góð hugmynd þar sem margir notendur munu þegar hafa umgjörðina í skyndiminni vafrans. Ef það er tilfellið þurfa þeir ekki að endurhlaða það þegar þeir koma á síðuna þína, sem leiðir til hraðari hleðslutíma. Þess vegna er þetta ráðlagða aðferðin fyrir lifandi vefi.

Hins vegar, til að gera tilraunir og þróun, eða ef þú vilt vera óháður nettengingu, geturðu líka fengið þitt eigið eintak af Bootstrap. Þetta er það sem ég er að gera fyrir þessa námskeið vegna þess að það skilar einnig minni kóða til að setja inn.

2b. Gestgjafi Bootstrap á staðnum

Önnur leið til að setja upp Bootstrap er að hlaða því niður á harða diskinn þinn og nota skrárnar á staðnum. Þú finnur niðurhalsvalkosti á sama stað og krækjurnar á ytri útgáfuna. Hér skaltu vera viss um að fá saman CSS og JS skrár. Þú þarft ekki heimildarskrárnar.

Þegar þú hefur gert það skaltu renna niður skránni og afrita innihald hennar í sömu möppu og index.html. Eftir það geturðu hlaðið Bootstrap CSS inn í verkefnið þitt eins og þetta:

Þú munt taka eftir því að þetta inniheldur skráarstíg til að finna Bootstrap skrána. Í þínu tilviki skaltu ganga úr skugga um að leið þín samsvari raunverulegri uppsetningu. Til dæmis gætu nöfn framkvæmdarstjóra verið mismunandi ef þú halaðir niður annarri útgáfu af Bootstrap.

3. Láttu fylgja með jQuery

Til þess að fá fulla virkni Bootstrap þarftu líka að hlaða jQuery bókasafnið. Hér verður þú einnig að hafa möguleika á að hlaða það lítillega eða hýsa það á staðnum.

Í fyrra tilvikinu finnurðu hlekkinn að nýjustu útgáfunni af jQuery hér. Þú getur notað það til að hlaða bókasafnið inn á síðuna þína með því að setja kóðalínuna hér fyrir neðan rétt þar sem hún segir á síðunni þinni.

Að öðrum kosti, halaðu niður jQuery (hægrismellt er á> Vista hlekk sem…), losaðu þig og settu það í verkefnamöppuna. Settu hana síðan inn á sama stað og skráin þín á þennan hátt:

Aftur, vertu viss um að leiðin samsvari skipulaginu.

4. Hlaðið ræsibraut JavaScript

Síðasta skrefið í að setja upp Bootstrap er að hlaða Bootstrap JavaScript bókasafnið. Þetta er innifalið í niðurhalaðri ramma ramma og þú finnur líka hlekki til fjarlægra heimilda á sama stað og áður. Hins vegar munum við hlaða það á annan stað en stílblaðið. Í stað hausar fer hann í blaðsíðufótinn, rétt á eftir jQuery símtalinu.

Þú getur kallað það fjarstætt svona:

Eða á staðnum eins og svo:

5. Settu þetta allt saman

Ef þú hefur fylgt skrefunum hér að ofan á réttan hátt ættir þú að enda með skjal sem lítur svona út fyrir ytri lausnina:

   Sýnishornsíða með Bootstrap kennslu         

Að öðrum kosti, ef þú hýsir staðbundið, ætti blaðsniðmátið þitt að líkjast kóðanum hér að neðan:

   Sýnishornsíða með Bootstrap kennslu         

Ef það er það sem þú hefur og þú vistaðir vinnu þína, þá ertu nú tilbúinn til að halda áfram á næsta skref.

Skref 2: Hannaðu áfangasíðuna þína


Allt í lagi, þetta var að vísu mikil undirbúningsvinna. En það var ekki mjög erfitt, var það? Plús, nú byrjar skemmtunin.

Þegar þú vafrar um sýnishornasíðuna þína ættirðu einfaldlega að sjá autt síðu. Tími til að breyta því.

1. Bættu við siglingarstiku

Það fyrsta sem við viljum gera er að bæta við siglingastiku efst á síðunni. Þetta gerir gestum kleift að komast um síðuna þína og uppgötva restina af síðunum þínum.

Til þess munum við nota navbar bekk. Þetta er eitt af sjálfgefin atriði af Bootstrap. Það býr til siglingaþátt sem er móttækilegur sjálfgefið og mun sjálfkrafa hrynja á minni skjám. Það býður einnig upp á innbyggðan stuðning til að bæta við vörumerki, litasamsetningu, bili og öðrum íhlutum.

Við munum nota það eins og hér að neðan og senda það rétt fyrir neðan merki:

 Merki   

Nokkrar skýringar á kóðanum:

  • navbar-expand-md – Þetta táknar á hvaða tímapunkti leiðsagnastikan stækkar frá lóðréttu eða hamborgaratákni yfir í lárétta stöng í fullri stærð. Í þessu tilfelli höfum við stillt það á miðlungs skjái, sem í Bootstrap er allt meira en 768px.
  • navbar-vörumerki – Þetta er notað við vörumerki vefsíðna þinna. Þú getur líka haft myndamerkjaskrá hér.
  • navbar-toggler – Táknar rofahnappinn fyrir fellda valmyndina. Verkið data-toggle = "hrynja" skilgreinir að þetta snúi að hamborgaravalmynd, ekki í fellivalmynd, sem er hinn kosturinn. Það er mikilvægt að þú skilgreiniir a gagnamarkmið með CSS auðkenni (skilgreint af #) og settu a div með sama nafni í kringum hið raunverulega navbar frumefni.
  • Navbar-toggler-icon – Eins og þú getur sennilega giskað á skapar þetta táknið sem notendur smella á til að opna valmyndina á smærri skjám.
  • navbar-nav – Bekkurinn fyrir
      listaþátt sem geymir valmyndaratriðin. Þeir síðarnefndu eru táknaðir með nav-hlutur og nav-hlekkur.

    Af hverju er ég að útskýra þetta svona mikið?

    Vegna þess að það er málið með Bootstrap. Þú hefur alla þessa staðla sem gera þér kleift að búa til þætti með nokkrum HTML og CSS flokkum fljótt. Þú þarft ekki að skrifa neinn CSS til að bjóða upp á stíl, allt er þegar sett upp innan Bootstrap. Plús, allt er farsíma móttækilegt úr kassanum! Ertu farinn að sjá hversu gagnlegt þetta er?

    Ofangreint er nóg til að bæta við siglingarstiku á síðuna þína. Samt sem áður lítur það út eins og mjög lítið.

    námskeið fyrir bootstrap bæta við siglingarbar

    Það er vegna þess að það er ekki mikið af stíl fest við það. Á meðan þú ert fær um að bæta við sjálfgefnir litir (til dæmis með því að gefa töflunni eins og bg-dökk nafla-dökk), við viljum í staðinn bæta við okkar eigin.

    2. Láttu sérsniðna CSS fylgja með

    Sem betur fer, ef þú vilt breyta sjálfgefinni stíl þarftu ekki að vaða í gegnum stórt safn af stílblöðum og gera breytingarnar fyrir hönd. Í staðinn, rétt eins og með WordPress barnaþema, ertu fær um að bæta við eigin CSS skrám sem þú getur notað til að skrifa yfir núverandi hönnun.

    Til þess skaltu einfaldlega búa til auða skrá með textaritlinum þínum og hringja í hana aðal.css. Vistaðu það og bættu því síðan við höfuðhluta Bootstrap síðuna þína eins og þessa:

    Þetta er kóðinn fyrir stílblað sem er í aðalskránni. Ef þú ákveður að setja þig inn í css möppu, vertu viss um að hafa réttan slóð í hlekkinn.

    Héðan, þú ert fær um að bæta sérsniðnum CSS á síðuna þína. Til dæmis, til að stilla leiðsagnarstikuna og þætti þess gætirðu notað álagningu eins og þessa:

    líkami { padding: 0; framlegð: 0; bakgrunnur: # f2f6e9; } / * --- siglingarbar --- * / .navbar { bakgrunnur: # 6ab446; } .nav-hlekkur, .navbar-vörumerki { litur: #fff; bendill: bendill; } .nav-hlekkur { framlegð-réttur: 1em! mikilvægt; } .nav-link: sveima { litur: # 000; } .navbar-hrynja { réttlæta-innihald: flex-endir; }

    Og hér er niðurstaðan:

    leiðsögn stígvél fyrir stígvél fyrir stígvél

    Lítur betur út en áður, er það ekki?

    3. Búðu til innihald síðu

    Eftir leiðsagnarstikuna er það næsta sem þú vilt ílát fyrir innihald síðunnar. Þetta er mjög auðvelt í Bootstrap þar sem allt sem þú þarft til þess er þetta undir merkjastikunni:

    Taktu eftir ílát-vökvi bekk. Þetta er annar af þessum sjálfgefnu Bootstrap flokkum. Notkun þess á div þáttur beitir sjálfkrafa fullt af CSS á það.

    The -vökvi hluti tryggir að ílátið teygir sig yfir alla breidd skjásins. Það er líka bara til ílát, sem hefur fastar breiddir beitt á það, þannig að það verður alltaf pláss á báðum hliðum skjásins.

    Hins vegar, ef þú endurhleður síðuna, sérðu samt ekki neitt (nema þú notir verkfæri verktaki). Það er vegna þess að þú bjóst aðeins til tóma HTML frumefni. Þetta mun byrja að breytast núna.

    4. Bættu við bakgrunnsmynd og sérsniðnu JavaScript

    Sem næsta skref í þessari Bootstrap námskeið, viljum við láta fylgja með bakgrunni á fullri skjá fyrir haus áfangasíðunnar okkar. Til þess verðum við að nota einhverja jQuery til að láta myndina teygja sig alla skjáinn.

    Þú gerir það á sama hátt og þú sért með sérsniðna CSS. Fyrst skaltu búa til textaskrá með nafninu main.js og settu hana í möppuna þína. Þá skaltu hringja í það áður en lokað er merki inni index.html.

    Eftir það geturðu afritað og límt þennan kóða til að búa til

    þáttur teygir sig yfir allan skjáinn:
    $ (skjal) .ready (fall () { $ ('. haus'). hæð ($ (glugga). hæð ()); })

    Það eina sem er eftir er að stilla bakgrunnsmynd. Þú getur gert þetta svona inni aðal.css:

    .haus { bakgrunnsmynd: url ('images / header-background.jpg'); bakgrunnsstærð: kápa; bakgrunnur-staða: miðja; staða: ættingi; }

    Ef þú setur mynd af nægri stærð á þeim stað sem tilgreind er með slóðinni hér að ofan, muntu ná niðurstöðu svipaðri og þessari:

    kennsla við ræsistíg eru með bakgrunnsmynd í haus

    5. Bættu við yfirlagi

    Til að gera bakgrunnsmyndina sérstaklega stílhreina, munum við bæta við yfirlagi. Fyrir það muntu búa til annan div-þátt í þeim sem þú varst með áðan.

    Síðan geturðu bætt við eftirfarandi í sérsniðnu CSS skránni:

    .yfirlag { staða: alger; mín. hæð: 100%; mín. breidd: 100%; eftir: 0; efst: 0; bakgrunnur: rgba (0, 0, 0, 0,6); }

    Þetta mun skapa þessa fallegu yfirlagningu fyrir myndina sem þú settir inn áðan:

    kennsla við ræsibönd bæta við yfirlagi

    6. Settu síðuheiti og meginmálstexta með

    Nú viltu líklega bæta við blaðsíðuheiti í formi fyrirsagnar ásamt smá meginmálstexta. Þannig vita gestir þínir strax hvaða síðu þeir eru á og hvers þeir geta búist við af því.

    Til að búa til það skaltu einfaldlega bæta við þessu bút í gáminn sem þú settir upp í síðasta skrefi, fyrir neðan yfirlagið:

    Verið velkomin á áfangasíðuna!

    Lorem ipsum dolor sitja 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 sem ullamcorper.

    Eftir það skaltu bæta eftirfarandi merkingu við aðal.css.

    .lýsing { eftir: 50%; staða: alger; toppur: 45%; umbreyta: þýða (-50%, -55%); texta-samræma: miðja; } .lýsing h1 { litur: # 6ab446; } .lýsing p { litur: #fff; leturstærð: 1,3rem; línuhæð: 1,5; }

    Þegar þú gerir það þá er áfangasíðan svona út:

    kennsla við ræsibraut bæta við síðuheiti og lýsingu

    Það er virkilega farið að koma saman, er það ekki?

    7. Búðu til CTA hnapp

    Engin áfangasíða er lokið án aðgerða, oftast í formi hnapps. Af þeim sökum værum við ófullkomin að taka ekki með hvernig á að búa til slíka í þessari Bootstrap kennslu.

    Ramminn býður upp á nóg af tækjum til að búa til hnappa fljótt og auðveldlega. Þú getur fundið mörg dæmi hér. Í mínu tilfelli bæti ég eftirfarandi merkingu rétt fyrir neðan innihald síðunnar innan ílát:

    Í viðbót við það bæti ég þessum CSS við aðal.css:

    .lýsingarhnappur { landamæri: 1px solid # 6ab446; bakgrunnur: # 6ab446; landamæri radíus: 0; litur: #fff; } .lýsingarhnappur: sveima { border: 1px solid #fff; bakgrunnur: #fff; litur: # 000; }

    Eftir að hafa vistað og endurhlaðið lítur það svona út:

    kennsla við bootstrap bæta við kalli á aðgerðarhnappinn

    8. Settu upp þriggja súlna hluta

    Ég er nú þegar nokkuð sáttur við það hvernig hlutirnir mótast. Hins vegar erum við ekki búin með síðuna ennþá. Næst upp, við viljum búa til þrjá dálka undir aðalinnihaldinu til að fá frekari upplýsingar. Þetta er sérstaða Bootstrap þar sem hún spilar að styrkleika sínum: að búa til rist. Svona á að gera það í þessu tilfelli:

    Lorem ipsum

    Lorem ipsum dolor sitja 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 sitja amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Það fyrsta sem þú munt taka eftir er röð frumefni. Þú þarft þetta þegar þú býrð til dálka til að virka sem ílát fyrir ristina.

    Hvað dálkana varðar þá hafa þeir allir nokkra flokka: col-lg-4, col-md-4 og col-sm-12. Þetta táknar að við erum að fást við dálka og stærðina sem þeir munu hafa á mismunandi skjám.

    Til að skilja þetta þarftu að vita að í Bootstrap risti bæta allir dálkarnir í einni röð alltaf við töluna 12. Svo að gefa þeim flokkana hér að ofan þýðir það að þeir taka upp þriðjung skjásins á stórum og meðalstórum skjár (12 deilt með 3 er 4) en allur skjárinn á litlum tækjum (12 af 12 dálkum).

    Það er skynsamlegt, er það ekki?

    Þú munt líka taka eftir því að ég var með myndir og bætti við .mynd-vökvi bekk til þeirra. Þetta er til að gera þær móttækilegar svo þær mælist með skjánum sem síðan er skoðuð á.

    Í viðbót við það hefurðu eftirfarandi stíl innifalinn á venjulegum stað:

    .aðgerðir { framlegð: 4em farartæki; padding: 1em; staða: ættingi; } .lögun-titill { litur: # 333; leturstærð: 1,3rem; leturvigt: 700; framlegð-botn: 20px; text-umbreyting: hástafi; } .lögun img { -webkit-box-skuggi: 1px 1px 4px rgba (0, 0, 0, 0,4); -moz-box-skuggi: 1px 1px 4px rgba (0, 0, 0, 0,4); kassaskuggi: 1px 1px 4px rgba (0, 0, 0, 0,4); framlegð-botn: 16px; }

    Þegar því er bætt við aðalinnihaldið og það vistað lítur þetta svona út:

    kennsla við ræsibraut bæta við þriggja dálka kafla

    9. Bættu við snertingareyðublaði

    Þú munt taka eftir því að einn af nýju reitunum er ennþá tómur. Þetta var með tilgangi vegna þess að við viljum bæta við snertingareyðublaði við það. Þetta er mjög venjuleg venja fyrir áfangasíður til að leyfa gestum að hafa samband.

    Það er auðvelt að búa til snertingareyðublað í Bootstrap:

    Komast í samband!

    Núna ætti ég ekki að þurfa að útskýra álagninguna til að búa til dálka lengur. Hér er það sem afgangurinn af álagningunni þýðir:

    • form-hópur – Notað til að vefja um formreitina til að forsníða.
    • form-stjórna – Táknar formreitir eins og inntak, textasvæði osfrv.

    Það er margt fleira sem þú getur gert með eyðublöð, sem þú getur fundið út í skjöl. Hins vegar er ofangreint nóg til sýnis. Settu það inni í tóma dálkinn sem eftir er og bættu síðan þessari stíl inn aðal.css:

    .lögun .form-stjórna, .lögun inntak { landamæri radíus: 0; } .lögun .btn { bakgrunnslitur: # 589b37; landamæri: 1px solid # 589b37; litur: #fff; framlegð-toppur: 20px; } .lögun .btn: sveima { bakgrunnslitur: # 333; landamæri: 1px solid # 333; }

    Þegar þú gerir það færðu eyðublað eins og þetta:

    kennsla með bootstrap er með snertingareyðublað

    10. Búðu til tveggja súlna fót

    Allt í lagi, við erum núna að komast í lok Bootstrap námskeiðsins. Það síðasta sem þú vilt bæta við áfangasíðuna þína er fótur hluti með tveimur dálkum. Eins og stendur ætti þetta ekki að vera mikið vandamál fyrir þig lengur.

    Viðbótarupplýsingar

    Lorem ipsum dolor sitja 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 sitja amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Hafðu samband

    1640 Riverside Drive, Hill Valley, Kaliforníu
    [varið með tölvupósti]
    + 01 234 567 88
    + 01 234 567 89

    Fyrir utan venjulega ristamerkingu, undirstrikar þessi hluti nokkra möguleika til að breyta letri með Bootstrap:

    • texti-hástafi
    • letur-þyngd-feitletruð
    • textamiðstöð

    Það ætti að vera nokkuð skýrt af nöfnum flokka sem þeir gera. Þú getur fundið meiri upplýsingar um Bootstrap og leturfræði hér.

    Auk ofangreinds geturðu notað stíl eins og þetta:

    .síðufót { bakgrunnslitur: # 222; litur: #ccc; padding: 60px 0 30px; } .fótur-höfundarréttur { litur: # 666; padding: 40px 0; }

    Þetta leiðir af sér fallegan fót sem lítur svona út:

    kennsla við ræsistíg er með síðufæti

    11. Bættu við fjölmiðlafyrirspurnum

    Síðan er í grundvallaratriðum tilbúin núna. Það er líka að fullu ábyrgt. Hins vegar, í farsímaskjá vafrans, kemur efri hlutinn ekki alveg út rétt ennþá.

    kennsluvilla við uppstokkun við hreyfanlegur hönnun

    Engar áhyggjur, þú getur leiðrétt það nokkuð með einfaldri fyrirspurn frá fjölmiðlum. Nema þú notir SASS til að setja saman Bootstrap síðuna þína, þá virka þetta á sama hátt og í öðrum tilvikum. Þú verður bara að hafa í huga fyrirfram ákveðin tímamót innifalinn í Bootstrap.

    Fyrir vikið, til að leiðrétta ofangreint vandamál, geturðu einfaldlega sett inn kóðann eins og þennan:

    @media (hámarksbreidd: 575,98px) { .lýsing { eftir: 0; padding: 0 15px; staða: alger; efst: 10%; umbreyta: enginn; texta-samræma: miðja; } .lýsing h1 { leturstærð: 2em; } .lýsing p { leturstærð: 1.2rem; } .aðgerðir { framlegð: 0; } }

    Eftir það er allt eins og það ætti að vera:

    námskeið fyrir ræsilás bæta fjölmiðlafyrirspurn

    12. Hladdu vefsíðunni þinni upp á vefþjón

    Ef þú hefur fylgst með, ættir þú nú að vera með fullbúna vefsíðu sem einnig er á farsíma og er alveg móttækileg.

    En hingað til er enginn nema þú sérð það. Til að breyta því þarftu vefþjón og lén. Þannig getur fólk sett vefsíðuna þína inn í vafrabarinn og fengið aðgang að nýlega myntuðu Bootstrap vefsíðunni á netinu.

    Til að leyfa þeim að gera það þarftu að hlaða síðunni upp á netþjóninn þinn. Þú getur gert það með FTP viðskiptavin eins og FileZilla. Safnaðu FTP hýsingarfanginu þínu, notandanafni og lykilorði frá hýsingaraðilanum til að tengjast lítillega við netþjóninn. Þegar þú gerir það ættirðu að geta séð skrárnar og möppurnar sem eru til staðar.

    hlaðið upp vefsíðu bootstrap á netþjóninn í gegnum ftp

    Farðu í möppuna sem léninu þínu er bent á (venjulega rótaskrána). Þegar þú hefur gert það skaltu einfaldlega finna möppuna með Bootstrap skránum á harða disknum þínum, merkja allar skrárnar inni og draga þær síðan yfir á miðlarann ​​til að hefja upphleðsluna. Ferlið mun taka smá stund að ljúka, háð tengihraða þínum og fjölda og stærð skráa.

    Þegar það er búið, þegar þú hefur aðgang að léninu þínu, ættirðu samt að sjá fullunna síðuna í vafraglugganum.

    námskeið við ræsistíg frá lokinni áfangasíðu

    Ekki slæmt fyrir nokkrar línur af kóða, ekki satt?

    Talandi um það, ef þú vilt hafa allan kóðann fyrir síðuna þar á meðal sérsniðna CSS og JavaScript, þá getur þú halað þeim öllum hér. Með þessu hefurðu allt sem þú þarft til að búa til áfangasíðu með Bootstrap.

    Niðurstaða

    Bootstrap er opinn uppspretta þróunarrammi sem allir geta notað ókeypis. Það gerir þér kleift að fljótt frumgerð hönnun, búa til vefsíður og almennt högg the jörð hlaupandi.

    Eins og þú hefur séð í þessu Bootstrap námskeiði fyrir byrjendur þarf það aðeins grunnþekkingu á HTML, CSS og einhverjum valfrjálsum jQuery. Þó að það sé ekki eins þægilegt og að nota WordPress, þá er Bootstrap enn réttur valkostur til að búa til vefsíðu.

    Núna veistu hvernig á að setja upp og setja upp Bootstrap og íhluti þess, búa til einfalda áfangasíðu, innihalda grunninntak og stíl það. Þú getur búið til leiðsagnarvalmyndir, stillt bakgrunnsmyndir, innihaldið hnappa, dálka og tengiliðaform.

    Auðvitað er meira að læra.

    Þökk sé þessari undirstöðu kennslu Bootstrap, þú veist nú nóg til að halda áfram sjálfur. Ef þú vilt kafa dýpra í umgjörðina er góður upphafspunktur W3Skólar. Fyrir utan það vonum við að þér líkaði vel við þessa byrjunarnámskeið og langar til að heyra hugsanir þínar og reynslu um það.

    Uppfærsla: Við bjuggum einnig til svindlblað með bootstrap fyrir byrjendur í .pdf og .png útgáfum.

    Hefur þú einhverjar hugsanir um Bootstrap námskeiðið hér að ofan? Spurningar, athugasemdir, beiðnir? Láttu okkur vita í athugasemdinni hér að neðan!

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