tutorial bootstrap 4


bootstrap është një kornizë e përparme që ju ndihmon të ndërtoni faqe interneti me përgjegjësi celular më shpejt dhe lehtë. E zhvilluar së pari nga Twitter, Bootstrap tani përdoret për çdo gjë nga zhvillimi i aplikacioneve në internet tek temat e WordPress. Alsoshtë gjithashtu plotësisht i lirë, i gjithanshëm dhe intuitiv.

Me Bootstrap, ju mund të krijoni faqe të ndërlikuara në internet nga HTML standarde dhe t’i përshtatni ato sipas nevojave tuaja. Bootstrap gjithashtu vjen me një numër prizash jQuery që mund të ofrojnë funksionalitete shtesë siç janë karuselet, butonat, udhëzimet e mjeteve dhe më shumë.

E fundit, por jo më pak e rëndësishme, ju jep shumë shkurtore për krijimin e faqeve në internet që do t’ju kursejnë kohë dhe energji. E tëra që ju nevojitet është një kuptim themelor i HTML dhe CSS për krijimin që janë të përgjegjshëm, të parë mobil dhe të pajtueshëm me të gjithë shfletuesit modernë.

P.S. Bootstrap nuk është një opsion perfekt për fillestarët e plotë. Disa njohuri HTML dhe CSS do të ishin të dobishme. Përndryshe, ju mund të përdorni ndërtuesit e faqeve në internet ose WordPress për të krijuar një faqe në internet.

Si të krijoni një faqe në internet duke përdorur Bootstrap (tabela e përmbajtjes):

  1. Hapi 1: Konfigurimi dhe përmbledhja
    1. Krijoni një faqe HTML
    2. Ngarkoni Bootstrap përmes CDN ose pritni atë në vend
    3. Përfshini jQuery
    4. Ngarkoni JavaScript me Bootstrap
    5. Vendosini të gjitha bashkë
  2. Hapi 2: Dizenjoni faqen tuaj të uljes
    1. Shtoni një shirit navigimi
    2. Përfshini CSS me porosi
    3. Krijoni një enë me përmbajtje faqesh
    4. Shtoni imazhin e sfondit dhe JavaScript me porosi
    5. Shtoni një mbivendosje
    6. Përfshini një titull të faqes dhe një tekst të trupit
    7. Krijoni një buton CTA
    8. Vendosni një seksion me tre kolona
    9. Shtoni një formë kontakti
    10. Krijoni një footer me dy kolona
    11. Shtoni pyetjet e mediave
    12. Merrni live faqen tuaj te internetit

Koha totale për të krijuar një faqe në internet duke përdorur Bootstrap: 3-4 orë.
Niveli i aftësive: Fillestar për të ndërmjetëm

Hapi 1: Konfigurimi dhe përmbledhja


Në mënyrë që të përdorni Bootstrap, së pari duhet ta integroni atë në mjedisin tuaj të zhvillimit, në faqen e internetit aka. Për këtë, ju keni dy mundësi të ndryshme: ngarkojeni atë nga distanca ose shkarkoni dhe përdorni Bootstrap në vend. Sidoqoftë, për të dy, së pari ju duhet diçka për ta ngarkuar atë.,

1. Krijoni një faqe HTML

Si hap i parë, ne do të krijojmë një shabllon të thjeshtë HTML si një bazë ku do të përdorim Bootstrap. Për këtë, gjëja e parë që doni të bëni është të krijoni një dosje në kompjuterin ose serverin tuaj për skedarët e projektit. Në këtë rast, thjesht do ta quaj bootstrap. Këtu, krijoni një skedar të ri teksti dhe telefonojeni index.html. Hapeni atë me një redaktues teksti sipas zgjedhjes tuaj (p.sh.. Notepad++) dhe pastaj ngjitni kodin më poshtë në të.





Faqja e Shembujve Tutoriale të Bootstrap








Mos harroni të ruani skedarin tuaj përpara se të vazhdoni!

2a. Ngarkoni Bootstrap përmes CDN

Siç është shpjeguar tashmë, Bootstrap përbëhet kryesisht nga fletë stili dhe skriptet. Si të tilla, ato mund të ngarkohen në header dhe footer të faqes suaj të internetit si asete të tjera të tilla si shkronjat e personalizuara. Kuadri ofron një rrugë aksesi për CDN (rrjetin e ofrimit të përmbajtjes). Ju mund ta gjeni atë në Faqja e shkarkimit të Bootstrap, më tej më poshtë.

Për të futur Bootstrap në faqen tuaj, thjesht ngjitni kodin më poshtë në pjesa e shabllonit tuaj.

Kur tani e ruani skedarin, çdo shfletues që e hap atë do të ngarkojë automatikisht asetet e Bootstrap.

Përdorimi i metodës në distancë është një ide e mirë pasi shumë përdorues do të kenë tashmë kornizën në cache të shfletuesit të tyre. Nëse ky është rasti, ata nuk do të duhet ta ngarkojnë përsëri kur të vijnë në faqen tuaj, duke çuar në kohën më të shpejtë të ngarkimit të faqeve. Si pasojë, kjo është metoda e rekomanduar për faqet live.

Sidoqoftë, për të eksperimentuar dhe zhvilluar, ose nëse doni të jeni i pavarur nga një lidhje interneti, mund të merrni edhe kopjen tuaj të Bootstrap. Kjo është ajo që unë jam duke bërë për këtë tutorial sepse gjithashtu rezulton në më pak kod për të postuar.

2b. Bootstrap host në vend

Një mënyrë alternative për të vendosur Bootstrap është ta shkarkoni atë në hard drive tuaj dhe të përdorni skedarët në vend. Ju gjeni opsione të shkarkimit në të njëjtin vend si lidhjet për versionin në distancë. Këtu, sigurohuni që të merrni skedarët e përpiluar CSS dhe JS. Ju nuk keni nevojë për skedarët e burimit.

Pasi ta keni bërë këtë, hiqeni skedarin dhe kopjoni përmbajtjen e tij në të njëjtin direktori si index.html. Pas kësaj, ju mund të ngarkoni Bootstrap CSS në projektin tuaj si ky:

Ju do të vini re se kjo përfshin rrugën e skedarit në të cilin mund të gjeni skedarin Bootstrap. Në rastin tuaj, sigurohuni që rruga juaj të korrespondojë me konfigurimin tuaj aktual. Për shembull, emrat e drejtorive mund të ndryshojnë nëse shkarkoni një version tjetër të Bootstrap.

3. Përfshini jQuery

Për të marrë funksionalitetin e plotë të Bootstrap, duhet të ngarkoni edhe bibliotekën jQuery. Edhe këtu, ju keni mundësinë që ta ngarkoni atë nga distanca ose ta strehoni atë në vend.

Në rastin e parë, ju gjeni lidhjen me versionin e fundit të jQuery këtu. Ju mund ta përdorni atë për të ngarkuar bibliotekën në faqen tuaj duke vendosur vijën e kodit më poshtë, përpara se të thotë në faqen tuaj.

alternativ, shkarkoni jQuery (kliko me të djathtën>) Ruani lidhjen si…), unzip, dhe vendoseni atë në dosjen e projektit. Pastaj, përfshijeni në të njëjtin vend me skedarin tuaj në këtë mënyrë:

Përsëri, sigurohuni që rruga korrespondon me konfigurimin tuaj.

4. Ngarkoni JavaScript me Bootstrap

Hapi i fundit në vendosjen e Bootstrap është ngarkesa e bibliotekës Bootstrap JavaScript. Këto përfshihen në versionin e shkarkuar të kornizës dhe gjithashtu gjeni lidhje me burime të largëta në të njëjtin vend si më parë. Sidoqoftë, ne do ta ngarkojmë atë në një vend tjetër sesa fleta e stilit. Në vend të kokës, ai futet në faqen e faqes, menjëherë pas thirrjes për jQuery.

Mund ta quash nga distanca si kjo:

Ose si lokalisht kështu:

5. Vendosini të gjitha bashkë

Nëse keni ndjekur hapat e mësipërm si duhet, duhet të përfundoni me një skedar që duket si ky për zgjidhjen në distancë:

   Faqja e Shembujve Tutoriale të Bootstrap         

Përndryshe, nëse jeni duke pritur në vend, modeli juaj i faqes duhet të ngjasojë me kodin më poshtë:

   Faqja e Shembujve Tutoriale të Bootstrap         

Nëse kjo është ajo që keni dhe e kurseni punën tuaj, tani jeni gati për të kaluar në hapin tjetër.

Hapi 2: Dizenjoni faqen tuaj të uljes


Mirë, kjo ishte, padyshim, shumë punë përgatitore. Sidoqoftë, nuk ishte shumë e vështirë, apo jo? Plus, tani fillon argëtimi.

Për momentin, kur lundroni në faqen tuaj të mostrës, thjesht duhet të shihni një faqe të zbrazët. Koha për ta ndryshuar atë.

1. Shtoni një shirit navigimi

Gjëja e parë që duam të bëjmë është të shtojmë një shirit navigimi në krye të faqes. Kjo lejon që vizitorët tuaj të marrin rreth faqes tuaj dhe të zbulojnë pjesën tjetër të faqeve tuaja.

Për këtë, ne do të përdorim navbar klasë. Kjo është një nga elementet e paracaktuar e Bootstrap. Krijon një element lundrimi që është përgjegjës si parazgjedhje dhe automatikisht do të shembet në ekranet më të vegjël. Ajo gjithashtu ofron mbështetje të integruar për shtimin e markës, skemat e ngjyrave, ndarjen dhe përbërës të tjerë.

Ne do ta përdorim atë si më poshtë dhe do ta postojmë atë pak poshtë tag:

 Logo   

Disa shpjegime të kodit:

  • navbar-expand-MD – Kjo tregon në cilën pikë shiriti i navigimit zgjerohet nga ikona vertikale ose hamburgeri në një shirit horizontale me madhësi të plotë. Në këtë rast, ne e kemi vendosur atë në ekrane të mesëm, të cilat, në Bootstrap, janë gjithçka më e madhe se 768px.
  • navbar-markë – Kjo përdoret për markën tuaj të internetit. Ju gjithashtu mund të përfshini një skedar me imazhe logjike këtu.
  • navbar-toggler – Tregon butonin ndryshues për menunë e shembur. Copa dhënave toggle = "shembja" përcakton që kjo do të kthehet në një menu hamburgeri, jo të bjerë poshtë, që është opsioni tjetër. Shtë e rëndësishme që ta përcaktoni një dhënave objektiv me një ID CSS (përcaktuar nga #) dhe mbështillni a div me të njëjtin emër rreth aktual navbar element.
  • navbar-toggler-icon – Siç mund ta merrni me mend, kjo krijon përdoruesit e ikonave të klikojnë për të hapur menunë në ekranet më të vogla.
  • navbar-nav – Klasa për
      elementi i listës që mban artikujt e menusë. Këto të fundit shënohen me nav-item dhe nav-link.

    Pse po e shpjegoj kaq shumë?

    Sepse kjo është pika e Bootstrap. Ju keni të gjitha këto standarde që ju lejojnë të krijoni elemente me disa klasa HTML dhe CSS shpejt. Ju nuk duhet të shkruani ndonjë CSS për të siguruar stilimin, gjithçka është vendosur tashmë në Bootstrap. Plus, gjithçka është e përgjegjshme për celularin jashtë kutisë! A po filloni të shihni se sa e dobishme është kjo?

    Sa më sipër është e mjaftueshme për të shtuar një shirit navigimi në faqen tuaj. Sidoqoftë, për momentin, duket akoma shumë pak.

    tutorial bootstrap shtoni shiritin e navigimit

    Kjo sepse nuk ka shumë stilim të bashkangjitur. Ndërsa jeni në gjendje të shtoni ngjyrat e paracaktuar (për shembull, duke i dhënë navbarit një klasë si bg-errët navbar-dark), ne në vend të kësaj duam të shtojmë tonën.

    2. Përfshini CSS me porosi

    Për fat të mirë, nëse doni të ndryshoni stilin e paracaktuar, nuk është e nevojshme të bëni një bibliotekë të madhe të çarçafëve të stilit dhe të bëni ndryshimet me dorë. Në vend të kësaj, ashtu si me një temë për fëmijë WordPress, ju jeni në gjendje të shtoni skedarët tuaj CSS të cilët mund të përdorni për të rishkruar styling ekzistuese.

    Për këtë, thjesht krijoni një skedar bosh me redaktorin e tekstit tuaj dhe telefonojeni atë main.css. Ruani atë, pastaj shtojeni në pjesën kryesore të faqes suaj të Bootstrap si kjo:

    Ky është kodi për një fletë stili që banon në drejtorinë kryesore. Nëse vendosni të vendosni brenda tuaj css dosje, sigurohuni që të përfshini rrugën e saktë në lidhje.

    Nga këtu, ju jeni në gjendje të shtoni CSS me porosi në faqen tuaj. Për shembull, për të stiluar shiritin e lundrimit dhe elementët e tij, mund të përdorni shënjimin si kjo:

    trupi mbushje: 0; marzhi: 0; sfond: # f2f6e9; } / * --- shiriti i navigimit --- * / .navbar { background: # 6ab446; } .nav-link, .markë navbar { ngjyra: #fff; kursori: treguesi; } .nav-link margjina e djathtë: 1em! e rëndësishme; } .nav-link: rri pezull { ngjyra: # 000; } .kolaps navbar { justifikuar-përmbajtja: flex-end; }

    Dhe këtu është rezultati:

    shiriti navigues i stilit mësimor bootstrap

    Duket më mirë se më parë, nuk është ashtu?

    3. Krijoni një enë me përmbajtje faqesh

    Pas shiritit të navigimit, gjëja tjetër që dëshironi është një enë për përmbajtjen e faqes. Kjo është me të vërtetë e lehtë në Bootstrap pasi gjithçka që ju nevojitet për të është kjo nën etiketën navbar:

    Vini re enë-fluid klasë. Kjo është një nga ato klasat e paracaktuara të Bootstrap. Aplikimi i tij në div element automatikisht aplikon një bandë të CSS për të.

    -lëng një pjesë sigurohet që ena të shtrihet në të gjithë gjerësinë e ekranit. Ekziston edhe vetëm një enë, e cila ka gjerësi fikse të aplikuara në të, kështu që gjithmonë do të ketë hapësirë ​​në të dy anët e ekranit.

    Sidoqoftë, nëse rimbushni përsëri faqen, nuk do të shihni asgjë (përveç nëse përdorni mjetet e zhvilluesit). Kjo sepse keni krijuar vetëm një element HTML të zbrazët. Kjo do të fillojë të ndryshojë tani.

    4. Shtoni një imazh të sfondit dhe JavaScript me porosi

    Si hapi tjetër në këtë tutorial Bootstrap, ne duam të përfshijmë një imazh sfondi me ekran të plotë për kokën e faqes sonë të uljes. Për këtë, ne do të duhet të përdorim disa jQuery për ta bërë që imazhi të shtrihet gjatë gjithë ekranit.

    Ju e bëni atë në të njëjtën mënyrë siç përfshini CSS porosi. Së pari, krijoni një skedar teksti të emrit main.js dhe vendoseni brenda dosjes së faqes tuaj. Pastaj, thirrni atë para mbylljes etiketë brenda index.html.

    Pas kësaj, ju mund të kopjoni dhe ngjisni këtë pjesë të kodit për ta bërë

    shtrihet elementi në të gjithë ekranin:

    $ (Dokument) .ready (function () { $ ( ". Header ') lartësia ($ (dritare) .height ()). })

    Atëherë, e vetmja gjë që mbetet është të vendosni një imazh të sfondit. Ju mund ta bëni këtë si kështu brenda main.css:

    .kokë { sfond-imazh: url ('images / header-background.jpg'); madhësia e sfondit: mbulesë; sfond-pozicioni: qendër; pozicioni: relativ; }

    Nëse vendosni një imazh të madhësisë së mjaftueshme në vendin e specifikuar nga rruga e mësipërme, do të arrini një rezultat të ngjashëm me këtë:

    tutorial bootstrap përfshijnë figurën e sfondit të kokës

    5. Shtoni një mbivendosje

    Për ta bërë imazhin e sfondit ekstra elegant, ne gjithashtu do të shtojmë një mbivendosje. Për këtë, ju do të krijoni një element tjetër div brenda një që sapo keni përfshirë më herët.

    Pastaj, mund të shtoni sa më poshtë në skedarin tuaj personal CSS:

    .shtresë { pozicioni: absolut; min-lartësia: 100%; gjerësia min: 100%; majtas: 0; maja: 0; sfond: rgba (0, 0, 0, 0.6); }

    Kjo do të krijojë këtë shtresë të këndshme për imazhin që futni më herët:

    tutorial bootstrap add overlay

    6. Përfshini një titull të faqes dhe tekstin e trupit

    Tani ju me siguri dëshironi të shtoni një titull faqe në formën e një kreu plus disa tekst të trupit. Në këtë mënyrë, vizitorët tuaj do të dinë menjëherë në cilën faqe janë në të dhe çfarë mund të presin nga ajo.

    Për t’i krijuar ato, thjesht shtoni këtë copëz brenda enës që keni vendosur në hapin e fundit, poshtë mbivendosjes:

    Mirësevini në Faqe Landing!

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Rrjeti i njësive të ardhshme dhe i valëvitshëm, si një iaculis i mirëfilltë. Suspendisse consectetur mi id libero fringilla, në pharetra sem ullamcorper.

    Pas kësaj, shtoni shënimin e mëposhtëm në main.css.

    .përshkrim { majtas: 50%; pozicioni: absolut; krye: 45%; shndërroni: përktheni (-50%, -55%); drejtimi i tekstit: qendër; } .përshkrimi h1 ngjyra: # 6ab446; } .përshkrimi p { ngjyra: #fff; madhësia e fontit: 1.3rem; lartësia e vijës: 1.5; }

    Kur e bëni këtë, faqja e uljes tani duket si kjo:

    tutorial bootstrap shtoni titullin dhe përshkrimin e faqes

    Në të vërtetë po fillon të mblidhemi, nuk është ashtu?

    7. Krijoni një buton CTA

    Asnjë faqe ulëse nuk është e plotë pa thirrje për veprim, më shpesh në formën e një butoni. Për këtë arsye, do të ishim keq që të mos përfshijmë se si të krijojmë një në këtë tutorial Bootstrap.

    Kuadri ofron shumë mjete për të krijuar butona shpejt dhe me lehtësi. Mund të gjeni shumë shembuj këtu. Në rastin tim, unë shtoj shënimin e mëposhtëm menjëherë nën përmbajtjen e faqes brenda enë:

    Përveç kësaj, unë shtoj këtë CSS në main.css:

    .butoni përshkrues { kufiri: 1px i ngurtë # 6ab446; background: # 6ab446; rreze kufitare: 0; Ngjyra: #fff; } .butoni përshkrues: rri pezull { kufiri: 1px solid #fff; background: #fff; color: # 000; }

    Pas ruajtjes dhe rimbushjes, duket si kjo:

    tutorial bootstrap shtoni thirrjen në butonin e veprimit

    8. Vendosni një seksion me tre kolona

    Unë tashmë jam mjaft i kënaqur me mënyrën se si po formësohen gjërat. Sidoqoftë, ne nuk jemi bërë ende me faqen. Më tej, ne duam të krijojmë tre kolona nën përmbajtjen kryesore për informacion shtesë. Kjo është një specialitet i Bootstrap pasi luan në forcën e saj: krijimin e një rrjeti. Ja se si ta bëni atë në këtë rast:

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Rrjeti i njësive të ardhshme dhe i valëvitshëm, si një iaculis i mirëfilltë.

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Rrjeti i njësive të ardhshme dhe i valëvitshëm, si një iaculis i mirëfilltë.

    Gjëja e parë që do të vini re është rresht element. Ju duhet kjo sa herë që krijoni kolona për të vepruar si një enë për rrjetin.

    Sa për kolonat, ata të gjithë kanë disa klasa: col-lg-4, col-MD-4 dhe col-SM-12. Këto tregojnë se kemi të bëjmë me kolona dhe përmasat që do të kenë ato në ekrane të ndryshme.

    Për ta kuptuar këtë, duhet të dini se në një rrjet Bootstrap, të gjitha kolonat në një rresht gjithmonë shtojnë numrin 12. Pra, duke u dhënë atyre klasat e mësipërme do të thotë që ata do të marrin një të tretën e ekranit në të mëdha dhe të mesme ekranet (12 të ndarë me 3 është 4) por i gjithë ekrani në pajisje të vogla (12 nga 12 kolonat).

    Ka kuptim, nuk është ashtu?

    Ju gjithashtu do të vini re që unë përfshirë imazhe dhe shtuar .image-fluide klasa ndaj tyre. Kjo është për t’i bërë ata të përgjegjshëm në mënyrë që ata të shkallëzohen së bashku me një ekran ku faqja është parë në.

    Përveç kësaj, ju keni stilin e mëposhtëm të përfshirë në vendin e zakonshëm:

    .karakteristika { marzhi: 4em automatik; mbushje: 1em; pozicioni: relativ; } .titulli tipar { ngjyra: # 333; madhësia e fontit: 1.3rem; pesha e shkronjave: 700; margjina-fund: 20px; shndërrimi i tekstit: shkronja të mëdha; } .karakteristika img -webkit-kuti-hije: 1px 1px 4px rgba (0, 0, 0, 0.4); -moz-kuti-hije: 1px 1px 4px rgba (0, 0, 0, 0.4); kuti-hije: 1px 1px 4px rgba (0, 0, 0, 0.4); margjina-fund: 16px; }

    Kur shtohet nën përmbajtjen kryesore dhe ruhet, duket si kjo:

    tutorial bootstrap shtoni tre seksione kolonë

    9. Shtoni një formë kontakti

    Do të vini re se një nga fushat e reja është ende bosh. Kjo ishte me qëllim sepse ne duam t’i shtojmë një formë kontakti. Kjo është një praktikë shumë normale për të ulur faqet për të lejuar vizitorët të kontaktojnë.

    Krijimi i një forme kontakti në Bootstrap është mjaft e lehtë:

    Merrni në Prekje!

    Deri më tani, nuk kam pse të shpjegoj shënjimin për të krijuar kolona më. Ja çfarë do të thotë pjesa tjetër e shënjimit:

    • formë-group – Përdoret për të mbështjellur fushat e formës për formatim.
    • formë-kontrollit – Tregon fushat e formës, siç janë inputet, fushat e tekstit etj.

    Ka shumë më tepër që mund të bësh me forma, të cilat mund t’i gjesh në dokumentim. Sidoqoftë, për qëllime demonstrimi, sa më sipër është e mjaftueshme. Vendoseni atë brenda kolonës së mbetur bosh dhe pastaj shtoni këtë stilim brenda main.css:

    .karakteristikat .form-kontrolli, .karakteristika të dhëna { rreze kufitare: 0; } .karakteristika .btn sfond-ngjyra: # 589b37; kufiri: 1px i ngurtë # 589b37; ngjyra: #fff; marzhi i sipërm: 20px; } .karakteristika .btn: rri pezull { sfond-ngjyra: # 333; kufiri: 1px i ngurtë # 333; }

    Kur e bëni këtë, ju merrni një formë si kjo:

    tutorial bootstrap përfshijnë formularin e kontaktit

    10. Krijoni një footer me dy kolona

    Mirë, ne jemi tani duke shkuar drejt fundit të mësimit Bootstrap. Gjëja e fundit që ju doni të shtoni në faqen tuaj të uljes është një seksion futbolli me dy kolona. Tani, kjo nuk do të përbënte më problem për ju më.

    informacion shtese

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Rrjeti i njësive të ardhshme dhe i valëvitshëm, si një iaculis i mirëfilltë.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Rrjeti i njësive të ardhshme dhe i valëvitshëm, si një iaculis i mirëfilltë.

    kontakt

    1640 Drive Riverside, Hill Valley, California
    [Email mbrojtur]
    + 01 234 567 88
    + 01 234 567 89

    Përveç shënimit të zakonshëm të rrjetit, kjo pjesë nënvizon disa mundësi për të modifikuar tipografinë me Bootstrap:

    • text-uppercase
    • font-pesha-bold
    • text-Qendra

    Duhet të jetë mjaft e qartë nga emrat e klasave që ata bëjnë. Mund të gjeni më shumë informacion mbi Bootstrap dhe typografia këtu.

    Përveç sa më sipër, mund të përdorni një stil si kjo:

    .faqerojtës page sfond-ngjyra: # 222; ngjyra: #ccc; mbushje: 60px 0 30px; } .të drejtat e autorit footer { ngjyra: # 666; mbushje: 40px 0; }

    Kjo rezulton në një këmishë të bukur që duket kështu:

    tutorial bootstrap përfshijnë footer faqen

    11. Shtoni pyetjet e mediave

    Faqja është në thelb gati tani. Alsoshtë gjithashtu plotësisht përgjegjës. Sidoqoftë, në pamjen e lëvizshme të shfletuesit, seksioni i sipërm nuk del ende saktë.

    gabim tutorial i bootstrap në hartimin e celularit

    Sidoqoftë, pa shqetësime, mund ta korrigjoni atë lehtësisht me një pyetje të thjeshtë për media. Në qoftë se nuk jeni duke përdorur SASS për të përpiluar sitin tuaj të Bootstrap, këto funksionojnë në të njëjtën mënyrë si në raste të tjera. Thjesht duhet të mbash në mendje pikat e paracaktuara të përfshira në Bootstrap.

    Si pasojë, për të korrigjuar problemin e mësipërm, thjesht mund të përfshini një pjesë të kodit si kjo:

    @media (max-width: 575.98px)) .përshkrim { majtas: 0; mbushje: 0 15px; pozicioni: absolut; krye: 10%; shndërroni: asnjë; drejtimi i tekstit: qendër; } .përshkrimi h1 madhësia e fontit: 2em; } .përshkrimi p { madhësia e fontit: 1.2rem; } .karakteristika { marzhi: 0; } }

    Pas kësaj, gjithçka është ashtu siç duhet të jetë:

    tutorial bootstrap shtoni pyetjen e mediave

    12. Ngarko faqen tuaj te Interneti në një host Web

    Nëse e keni ndjekur së bashku, tani duhet të vendoseni me një uebfaqe të përfunduar, e cila gjithashtu është në celular dhe është plotësisht e përgjegjshme.

    Sidoqoftë, deri më tani, askush, por ju nuk mund ta shihni atë. Për ta ndryshuar atë, ju duhet një host në internet dhe domain. Në atë mënyrë, njerëzit mund të futin adresën tuaj të internetit në shiritin e shfletuesit të tyre dhe pastaj të qasen në faqen tuaj të internetit të Bootstrap të sapo zënë në internet.

    Në mënyrë që t’i lejoni ata ta bëjnë këtë, ju duhet të ngarkoni faqen në serverin tuaj. Ju mund ta bëni atë me një klient FTP si FileZilla. Mblidhni adresën tuaj të hostit FTP, emrin e përdoruesit dhe fjalëkalimin nga ofruesi juaj i pritjes për t’u lidhur me serverin tuaj nga distanca. Kur e bëni këtë, duhet të jeni në gjendje të shihni skedarët dhe drejtoritë aktualisht atje.

    ngarkoni faqen e internetit të bootstrap në server përmes ftp

    Shfletoni drejtorinë drejtuar domain-it tuaj (zakonisht direktori). Pasi ta keni bërë atë, thjesht gjeni dosjen me skedarët tuaj Bootstrap në hard drive tuaj, shënoni të gjitha skedarët brenda dhe pastaj tërhiqni ato në server për të filluar ngarkimin. Procesi do të marrë një kohë për të përfunduar në varësi të shpejtësisë tuaj të lidhjes, si dhe numrit dhe madhësisë së skedarëve.

    Sidoqoftë, pasi të jetë bërë, kur të hyni në domenin tuaj, duhet të jeni në gjendje të shihni sitin e përfunduar në dritaren e shfletuesit tuaj.

    faqja e mbarimit të mbaruar tutoriale për bootstrap

    Jo keq për disa rreshta kodesh, apo jo?

    Duke folur për të cilat, nëse dëshironi të keni të gjithë kodin për faqen përfshirë CSS dhe JavaScript me porosi, mund t’i shkarkoni të gjithë këtu. Me këtë, ju keni gjithçka që ju nevojitet për të krijuar një faqe ulje me Bootstrap.

    përfundim

    Bootstrap është një kornizë e hapur me burim të hapur, i cili mund të përdorë falas. Kjo ju lejon të shpejt prototiponi hartime, të krijoni faqe në internet dhe përgjithësisht të godisni tokën duke funksionuar.

    Siç e keni parë në këtë tutorial Bootstrap për fillestarët, duhet vetëm njohuri themelore e HTML, CSS dhe disa pyetjeve jQuery. Ndërsa nuk është aq i rehatshëm sa të përdorni WordPress, Bootstrap është akoma një alternativë e vlefshme për të krijuar një faqe në internet.

    Deri tani, ju e dini se si të instaloni dhe instaloni Bootstrap dhe përbërësit e tij, të krijoni një faqe të thjeshtë uljeje, të përfshini disa përmbajtje themelore dhe ta stiloni atë. Ju mund të krijoni menutë e lundrimit, të vendosni imazhe në sfond, të përfshini butona, kolona dhe forma kontakti.

    Sigurisht, ka më shumë për të mësuar.

    Falë këtij tutoriali themelor të Bootstrap, ju tani dini mjaftueshëm për të vazhduar përpara vetveten. Nëse doni të zhyteni më thellë në kornizë, një pikënisje e mirë është W3Schools. Përveç kësaj, shpresojmë që ju të pëlqeu ky mësues fillestar dhe dëshironi të dëgjoni mendimet dhe përvojat tuaja në lidhje me të.

    Përditësimi: Ne gjithashtu krijuam një fletë mashtrimesh bootstrap për fillestarët në versionet .pdf dhe .png.

    A keni ndonjë mendim mbi tutorialin e Bootstrap më lart? Pyetje, komente, kërkesa? Na tregoni në seksionin e komenteve më poshtë!

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me