Bootstrap Tutorial


bootstrap 4 na tutorial


Bootstrap ay isang front-end na balangkas na tumutulong sa iyo na bumuo ng mga mobile na tumutugon sa mga website nang mas mabilis at madali. Una na binuo ng Twitter, ang Bootstrap ay ginagamit na ngayon para sa anumang bagay mula sa pagbuo ng mga aplikasyon ng web hanggang sa mga tema ng WordPress. Ito ay ganap ding libre, maraming nagagawa, at madaling maunawaan.

Sa Bootstrap, maaari mong kumatha ng kumplikadong mga web page mula sa karaniwang HTML at ipasadya ang mga ito sa iyong mga pangangailangan. Dumating din ang Bootstrap kasama ang isang bilang ng mga plugin ng jQuery na maaaring magbigay ng karagdagang pag-andar tulad ng mga carousels, pindutan, tooltip, at marami pa.

Huling, ngunit hindi bababa sa, nagbibigay ito sa iyo ng maraming mga shortcut para sa paglikha ng mga web page na makatipid sa iyo ng oras at lakas. Ang kailangan mo lamang ay isang pangunahing pag-unawa sa HTML at CSS upang lumilikha na tumutugon, mobile-una, at katugma sa lahat ng mga modernong browser.

P.S. Ang Bootstrap ay hindi isang perpektong pagpipilian para sa kumpletong mga nagsisimula. Ang ilang kaalaman sa HTML at CSS ay magiging kapaki-pakinabang. Bilang kahalili, maaari mong gamitin ang mga tagabuo ng website o WordPress upang lumikha ng isang website.

Paano lumikha ng isang website gamit ang Bootstrap (talaan ng mga nilalaman):

  1. Hakbang 1: Pag-setup at pangkalahatang-ideya
    1. Lumikha ng isang HTML na pahina
    2. I-load ang Bootstrap sa pamamagitan ng CDN o i-host ito nang lokal
    3. Isama ang jQuery
    4. I-load ang Bootstrap JavaScript
    5. Ipagsama ang lahat
  2. Hakbang 2: Idisenyo ang iyong landing page
    1. Magdagdag ng isang navigation bar
    2. Isama ang pasadyang CSS
    3. Lumikha ng isang lalagyan ng nilalaman ng pahina
    4. Magdagdag ng imahe sa background at pasadyang JavaScript
    5. Magdagdag ng isang Overlay
    6. Isama ang isang pamagat ng pahina at teksto ng katawan
    7. Lumikha ng isang pindutan ng CTA
    8. Mag-set up ng isang seksyon ng tatlong haligi
    9. Magdagdag ng form ng contact
    10. Lumikha ng isang dalawang haligi na footer
    11. Magdagdag ng mga query sa media
    12. Mabuhay ang iyong website

Kabuuan ng oras upang lumikha ng isang website gamit ang Bootstrap: 3-4 na oras.
Antas ng kasanayan: Nagsisimula sa intermediate

Hakbang 1: Pag-setup at pangkalahatang-ideya


Upang magamit ang Bootstrap, kailangan mo munang isama ito sa iyong pag-unlad na kapaligiran, aka web page. Para sa na, mayroon kang dalawang magkakaibang posibilidad: i-load ito nang malayuan o i-download at gamitin ang Bootstrap nang lokal. Gayunpaman, para sa pareho, kailangan mo muna ng isang bagay upang mai-load ito.,

1. Gumawa ng isang pahina ng HTML

Bilang isang unang hakbang, gagawa kami ng isang simpleng template ng HTML bilang isang batayan kung saan gagamitin namin ang Bootstrap. Para dito, ang unang bagay na nais mong gawin ay lumikha ng isang folder sa iyong computer o server para sa mga file file. Sa kasong ito, tatawagin ko lang ito bootstrap. Dito, lumikha ng isang bagong file ng teksto at tawagan ito index.html. Buksan ito gamit ang isang text editor na iyong pinili (hal. Notepad++) at pagkatapos ay i-paste ang code sa ibaba nito.





Pahina ng Tutorial ng Bootstrap Tutorial








Huwag kalimutan na i-save ang iyong file bago magpatuloy!

2a. Mag-load ng Bootstrap sa pamamagitan ng CDN

Tulad ng naipaliwanag, ang Bootstrap ay pangunahing binubuo ng mga style sheet at script. Tulad nito, maaari silang mai-load sa header at footer ng iyong web page tulad ng iba pang mga pag-aari tulad ng mga pasadyang mga font. Nag-aalok ang balangkas ng isang pag-access sa CDN (nilalaman ng paghahatid ng nilalaman) para doon. Maaari mong mahanap ito sa Ang pahina ng pag-download ng Bootstrap, sa ibaba pa.

Upang makakuha ng Bootstrap sa iyong pahina, i-paste lamang ang code sa ibaba sa seksyon ng iyong template.

Kapag na-save mo na ngayon ang file, ang anumang browser na magbubukas nito ay awtomatikong mai-load ang mga asset ng Bootstrap.

Ang paggamit ng remote na paraan ay isang magandang ideya dahil maraming mga gumagamit ay magkakaroon na ng balangkas sa cache ng kanilang browser. Kung iyon ang kaso, hindi nila kailangang i-reload ito pagdating sa iyong site, na humahantong sa mas mabilis na oras ng paglo-load ng pahina. Bilang kinahinatnan, ito ang inirekumendang pamamaraan para sa mga live na site.

Gayunpaman, para sa pag-eksperimento at pag-unlad, o kung nais mong maging independiyenteng isang koneksyon sa Internet, maaari ka ring makakuha ng iyong sariling kopya ng Bootstrap. Ito ang ginagawa ko para sa tutorial na ito sapagkat nagreresulta din ito sa mas kaunting code upang mai-post.

2b. Host Bootstrap nang lokal

Ang isang alternatibong paraan upang i-set up ang Bootstrap ay upang i-download ito sa iyong hard drive at gamitin ang mga file nang lokal. Nakakahanap ka ng mga pagpipilian sa pag-download sa parehong lugar tulad ng mga link sa malalayong bersyon. Dito, siguraduhing makuha ang naipon na CSS at JS file. Hindi mo na kailangan ang mapagkukunan ng mga file.

Kapag nagawa mo na ito, i-unzip ang file at kopyahin ang mga nilalaman nito sa parehong direktoryo index.html. Pagkatapos nito, maaari mong mai-load ang Bootstrap CSS sa iyong proyekto tulad nito:

Mapapansin mo na kasama dito ang file path kung saan makahanap ang Bootstrap file. Sa iyong kaso, siguraduhin na ang iyong landas ay tumutugma sa iyong aktwal na pag-setup. Halimbawa, ang mga pangalan ng mga direktoryo ay maaaring magkakaiba kung nag-download ka ng ibang bersyon ng Bootstrap.

3. Isama ang jQuery

Upang makuha ang buong pag-andar ng Bootstrap, kailangan mo ring i-load ang jQuery library. Dito, mayroon ka ring posibilidad na mai-load ito nang malayuan o i-host ito nang lokal.

Sa unang kaso, nahanap mo ang link sa pinakabagong bersyon ng jQuery dito. Maaari mong gamitin ito upang mai-load ang library sa iyong pahina sa pamamagitan ng paglalagay ng linya ng code sa ibaba mismo kung saan sinasabi nito sa iyong pahina.

Bilang kahalili, pag-download ng jQuery (i-right-click> I-save ang Link Bilang…), i-unzip, at ilagay ito sa folder ng proyekto. Pagkatapos, isama ito sa parehong lugar ng iyong file sa ganitong paraan:

Muli, siguraduhin na ang landas ay tumutugma sa iyong pag-setup.

4. I-load ang Bootstrap JavaScript

Ang huling hakbang sa pag-set up ng Bootstrap ay upang mai-load ang library ng Bootstrap JavaScript. Ang mga ito ay kasama sa nai-download na bersyon ng balangkas at nakakahanap ka rin ng mga link sa mga malalayong mapagkukunan sa parehong lugar tulad ng dati. Gayunpaman, mai-load namin ito sa ibang lugar kaysa sa style sheet. Sa halip na header, napunta ito sa footer ng pahina, pagkatapos ng tawag para sa jQuery.

Maaari mong tawagan ito nang malayuan tulad nito:

O gusto ng lokal:

5. Ipagsama ang lahat

Kung sinunod mo nang tama ang mga hakbang sa itaas, dapat mong tapusin ang isang file na mukhang ganito para sa malayong solusyon:

   Pahina ng Tutorial ng Bootstrap Tutorial         

Bilang kahalili, kung nagho-host ka nang lokal, ang iyong template ng pahina ay dapat na kahawig ng code sa ibaba:

   Pahina ng Tutorial ng Bootstrap Tutorial         

Kung iyon ang mayroon ka at na-save mo ang iyong trabaho, handa ka na ngayong magpatuloy sa susunod na hakbang.

Hakbang 2: Idisenyo ang iyong landing page


Alright, iyon ay, aminado, maraming gawain sa paghahanda. Gayunpaman, hindi ito mahirap, ito ba? Dagdag pa, ngayon nagsisimula ang saya.

Sa ngayon, kapag nag-navigate ka sa iyong site ng sample, dapat mo lamang makita ang isang blangko na pahina. Oras upang baguhin iyon.

1. Magdagdag ng isang navigation bar

Ang unang bagay na nais naming gawin ay magdagdag ng isang navigation bar sa tuktok ng pahina. Pinapayagan nitong lumibot ang iyong mga bisita sa iyong site at matuklasan ang nalalabi sa iyong mga pahina.

Para doon, gagamitin namin ang navbar klase. Ito ay isa sa default na mga elemento ng Bootstrap. Lumilikha ito ng isang elemento ng nabigasyon na tumutugon sa pamamagitan ng default at awtomatikong bumagsak sa mas maliit na mga screen. Nag-aalok din ito ng built-in na suporta para sa pagdaragdag ng pagba-brand, mga scheme ng kulay, spacing, at iba pang mga sangkap.

Gagamitin namin ito tulad ng sa ibaba at i-post ito sa ibaba ng tag:

 Logo   

Ang ilang mga paliwanag tungkol sa code:

  • navbar-expand-md – Ito ay nagpapahiwatig kung saan ang pag-navigate bar ay lumalawak mula sa vertical o hamburger icon sa isang buong sukat na pahalang na bar. Sa kasong ito, itinakda namin ito sa mga medium screen, na, sa Bootstrap, ay anumang bagay na higit sa 768px.
  • navbar-brand – Ginagamit ito para sa iyong pagba-brand ng website. Maaari mo ring isama ang isang file ng imahe ng logo dito.
  • navbar-toggler – Ipinapahiwatig ang pindutan ng toggle para sa gumuho na menu. Ang piraso data-toggle = "pagbagsak" tinutukoy na ito ay babalik sa isang menu ng hamburger, hindi upang i-drop-down, na kung saan ay ang iba pang pagpipilian. Mahalagang tukuyin mo ang isang target na data gamit ang isang CSS id (tinukoy ng #) at balutin ang isang div na may parehong pangalan sa paligid ng aktwal navbar elemento.
  • navbar-toggler-icon – Tulad ng maaari mong hulaan, lumilikha ito sa mga gumagamit ng icon na mag-click sa upang buksan ang menu sa mas maliit na mga screen.
  • navbar-nav – Ang klase para sa
      listahan ng elemento na humahawak ng mga item sa menu. Ang huli ay tinukoy nav-item at nav-link.

    Bakit ko ito paliwanag?

    Dahil iyon ang punto ng Bootstrap. Mayroon kang lahat ng mga pamantayang ito na nagbibigay-daan sa iyo upang lumikha ng mga elemento na may ilang mga HTML at CSS na mga klase nang mabilis. Hindi mo kailangang sumulat ng anumang CSS upang magbigay ng estilo, lahat ay naka-set up sa loob ng Bootstrap. Dagdag pa, ang lahat ay mobile na tumutugon sa labas ng kahon! Nagsisimula ka bang makita kung gaano kapaki-pakinabang ito?

    Ang nasa itaas ay sapat na upang magdagdag ng isang navigation bar sa iyong site. Gayunpaman, sa ngayon, mukhang maliit pa rin.

    magdagdag ng bootstrap tutorial magdagdag ng nabigasyon bar

    Iyon ay dahil wala itong maraming estilo na nakadikit dito. Habang nagagawa mong magdagdag default na mga kulay (halimbawa, sa pamamagitan ng pagbibigay ng navbar ng isang klase tulad bg-maitim na navbar-madilim), sa halip nais nating magdagdag ng ating sarili.

    2. Isama ang pasadyang CSS

    Sa kabutihang palad, kung nais mong baguhin ang default na estilo, hindi mo na kailangang maglakad sa isang malaking silid-aklatan ng mga sheet ng estilo at gawin ang mga pagbabago sa pamamagitan ng kamay. Sa halip, tulad ng isang tema ng bata ng WordPress, magagawa mong magdagdag ng iyong sariling mga file ng CSS na maaari mong gamitin upang ma-overwrite ang umiiral na estilo.

    Para rito, lumikha lamang ng isang blangkong file gamit ang iyong text editor at tawagan ito pangunahing.css. I-save ito, pagkatapos ay idagdag ito sa seksyon ng ulo ng iyong Bootstrap site na tulad nito:

    Ito ang code para sa isang style sheet na nakatira sa pangunahing direktoryo. Kung magpasya kang ilagay ang iyong loob css folder, siguraduhing isama ang tamang landas sa link.

    Mula dito, magagawa mong magdagdag ng pasadyang CSS sa iyong site. Halimbawa, upang istilo ang navigation bar at mga elemento nito, maaari mong gamitin ang markup na tulad nito:

    katawan { padding: 0; margin: 0; background: # f2f6e9; } / * --- nabigasyon bar --- * / .navbar { background: # 6ab446; } .nav-link, .navbar-brand { kulay: #fff; cursor: pointer; } .nav-link { margin-kanan: 1em! mahalaga; } .nav-link: hover { kulay: # 000; } .navbar-pagbagsak { nagbibigay-katwiran-nilalaman: flex-end; }

    At narito ang resulta:

    bootstrap na estilo ng pag-navigate sa style ng bar

    Mukhang mas mahusay kaysa sa dati, hindi?

    3. Lumikha ng isang lalagyan ng nilalaman ng pahina

    Pagkatapos ng nabigasyon bar, ang susunod na bagay na gusto mo ay isang lalagyan para sa nilalaman ng pahina. Ito ay talagang madali sa Bootstrap dahil ang kailangan mo para dito ay sa ilalim nito ng tag ng navbar:

    Pansinin ang lalagyan-likido klase. Ito ay isa pa sa mga default na klase ng Bootstrap. Paglalapat nito sa div awtomatikong nalalapat ang elemento ng isang grupo ng CSS dito.

    Ang -likido tinitiyak ng bahagi na ang lalagyan ay umaabot sa buong lapad ng screen. Mayroon ding isang lalagyan, na kung saan ay naayos ang mga lapad na inilalapat dito, kaya palaging magkakaroon ng puwang sa magkabilang panig ng screen.

    Gayunpaman, kung na-reload mo na ngayon ang pahina, wala ka pa ring makita (maliban kung ginamit mo ang mga tool ng developer). Iyon ay dahil nilikha mo lamang ang isang walang laman na elemento ng HTML. Magsisimula na itong magbago ngayon.

    4. Magdagdag ng isang larawan sa background at pasadyang JavaScript

    Bilang susunod na hakbang sa Bootstrap na tutorial na ito, nais naming isama ang isang buong background na imahe ng background para sa aming header ng landing page. Para sa mga iyon, kakailanganin naming gumamit ng ilang jQuery upang gawin ang kahabaan ng imahe sa buong screen.

    Ginagawa mo iyan sa parehong paraan na isama mo ang pasadyang CSS. Una, lumikha ng isang text file ng pangalan pangunahing.js at ilagay ito sa loob ng iyong folder ng site. Pagkatapos, tawagan ito bago ang pagsasara tag sa loob index.html.

    Pagkatapos nito, maaari mong kopyahin at i-paste ang piraso ng code upang magawa ang

    elemento kahabaan sa buong screen:
    $ (dokumento). Mayroon na (function () { $ ('. header') taas. ($ (window) .height ()); })

    Pagkatapos, ang tanging bagay na naiwan ay ang magtakda ng isang imahe sa background. Maaari mo itong gawin sa loob pangunahing.css:

    .header { background-image: url ('mga imahe / header-background.jpg'); laki ng background: takip; background-posisyon: sentro; posisyon: kamag-anak; }

    Kung naglalagay ka ng isang imahe ng sapat na laki sa lokasyon na tinukoy ng landas sa itaas, makakamit mo ang isang resulta na katulad nito:

    Kasama sa bootstrap tutorial ang imahe ng background ng header

    5. Magdagdag ng isang Overlay

    Upang gawing sobrang naka-istilong imahe ang background, magdagdag din kami ng overlay. Para rito, gagawa ka ng isa pang elemento ng div sa loob ng isang isinama mo lang nang mas maaga.

    Pagkatapos, maaari mong idagdag ang sumusunod sa iyong pasadyang CSS file:

    .overlay { posisyon: ganap; min-taas: 100%; lapad ng min: 100%; kaliwa: 0; tuktok: 0; background: rgba (0, 0, 0, 0.6); }

    Gagawa ito ng magandang overlay para sa imahe na iyong nai-input nang mas maaga:

    magdagdag ng overlay ang bootstrap tutorial

    6. Isama ang isang pamagat ng pahina at teksto ng katawan

    Ngayon marahil nais mong magdagdag ng isang pamagat ng pahina sa anyo ng isang heading kasama ang ilang teksto ng katawan. Sa ganoong paraan, malalaman agad ng iyong mga bisita kung aling site sila at kung ano ang maaari nilang asahan mula dito.

    Upang lumikha ng mga ito, idagdag lamang ang snippet na ito sa loob ng lalagyan na iyong itinakda sa huling hakbang, sa ibaba ng overlay:

    Maligayang pagdating sa Landing Page!

    Si 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, sa pharetra sem ullamcorper.

    Pagkatapos nito, idagdag ang sumusunod na markup sa pangunahing.css.

    .paglalarawan { kaliwa: 50%; posisyon: ganap; tuktok: 45%; ibahin ang anyo: isalin (-50%, -55%); align ng teksto: gitna; } .paglalarawan h1 { kulay: # 6ab446; } .paglalarawan p { kulay: #fff; laki ng font: 1.3rem; taas ng linya: 1.5; }

    Kapag ginawa mo, ganito ang hitsura ng landing page:

    magdagdag ng bootstrap tutorial ang pamagat ng pahina at paglalarawan

    Ito ay talagang nagsisimula na magkasama, hindi ba?

    7. Lumikha ng isang pindutan ng CTA

    Walang kumpletong landing page nang walang tawag sa pagkilos, kadalasan sa anyo ng isang pindutan. Para sa kadahilanang iyon, hindi namin magagawang hindi isama kung paano lumikha ng isa sa ganitong Tutorial Bootstrap.

    Ang balangkas ay nag-aalok ng maraming mga tool upang lumikha ng mga pindutan nang mabilis at madali. Maaari kang makahanap ng maraming mga halimbawa dito. Sa aking kaso, idinagdag ko ang sumusunod na markup mismo sa ibaba ng nilalaman ng pahina sa loob ng lalagyan:

    Bilang karagdagan sa, idinagdag ko ito sa CSS pangunahing.css:

    .pindutan ng paglalarawan { hangganan: 1px solid # 6ab446; background: # 6ab446; hangganan-radius: 0; kulay: #fff; } .pindutan ng paglalarawan: hover { hangganan: 1px solid #fff; background: #fff; kulay: # 000; }

    Matapos makatipid at mag-reload, mukhang ganito:

    idagdag ang bootstrap tutorial na tawag sa pindutan ng pagkilos

    8. Mag-set up ng isang tatlong-haligi na seksyon

    Masisiyahan na ako sa kung paano bumubuo ang mga bagay. Gayunpaman, hindi pa kami tapos sa pahina. Susunod, nais naming lumikha ng tatlong mga haligi sa ibaba ng pangunahing nilalaman para sa karagdagang impormasyon. Ito ay isang specialty ng Bootstrap mula sa pag-play sa lakas nito: paglikha ng isang grid. Narito kung paano ito gagawin sa kasong ito:

    Lorem ipsum

    Si 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

    Si 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.

    Ang unang bagay na mapapansin mo ay ang hilera elemento. Kailangan mo ito tuwing lumilikha ng mga haligi upang kumilos bilang isang lalagyan para sa grid.

    Tulad ng para sa mga haligi, lahat sila ay may maraming klase: col-lg-4, col-md-4 at col-sm-12. Ang mga ito ay nagpapahiwatig na nakikipag-usap kami sa mga haligi at ang laki ng magkakaroon sila sa iba’t ibang mga screen.

    Upang maunawaan ito, kailangan mong malaman na sa isang grid ng Bootstrap, ang lahat ng mga haligi sa isang hilera ay palaging magdagdag ng hanggang sa bilang na 12. Kaya, ang pagbibigay sa kanila ng mga klase sa itaas ay nangangahulugan na kukuha sila ng isang-katlo ng screen sa malaki at daluyan mga screen (12 na hinati sa 3 ay 4) ngunit ang buong screen sa maliit na aparato (12 sa 12 haligi).

    Ito ay may kahulugan, hindi ba?

    Mapapansin mo rin na isinama ko ang mga imahe at idinagdag ang .likido-imahe klase sa kanila. Ito ay upang gawin silang tumutugon upang masukat sila kasama ang isang screen na tiningnan ang pahina.

    Bilang karagdagan sa, mayroon kang mga sumusunod na estilo na kasama sa karaniwang lugar:

    .tampok { margin: 4em auto; padding: 1em; posisyon: kamag-anak; } .tampok na pamagat { kulay: # 333; laki ng font: 1.3rem; bigat ng font: 700; margin-ibaba: 20px; pagbabago ng teksto: malalaking titik; } .tampok img { -webkit-box-shade: 1px 1px 4px rgba (0, 0, 0, 0.4); -moz-box-shade: 1px 1px 4px rgba (0, 0, 0, 0.4); box-shade: 1px 1px 4px rgba (0, 0, 0, 0.4); margin-ibaba: 16px; }

    Kapag idinagdag sa ibaba ang pangunahing nilalaman at nai-save, ganito ang hitsura:

    magdagdag ng bootstrap tutorial ang tatlong seksyon ng haligi

    9. Magdagdag ng form ng contact

    Mapapansin mo na ang isa sa mga bagong patlang ay walang laman. Ito ay may layunin dahil nais naming magdagdag ng isang form sa pakikipag-ugnay dito. Ito ay isang napaka-normal na kasanayan para sa mga landing page upang payagan ang mga bisita na makipag-ugnay.

    Ang paglikha ng isang form ng contact sa Bootstrap ay madali:

    Makipag-ugnayan!

    Sa ngayon, hindi ko na kailangang ipaliwanag ang markup upang lumikha ng mga haligi. Narito kung ano ang kahulugan ng natitirang markup:

    • form-group – Ginamit upang balutin ang mga patlang ng form para sa pag-format.
    • form-control – Ang mga Denotes form na patlang tulad ng mga input, lugar ng teksto atbp.

    Marami pa ang magagawa mo sa mga form, na maaari mong malaman sa dokumentasyon. Gayunpaman, para sa mga layunin ng pagpapakita, sapat na ang nasa itaas. Ilagay ito sa loob ng natitirang walang laman na haligi at pagkatapos ay idagdag ang estilo sa pangunahing.css:

    .tampok .form-control, .tampok na input { hangganan-radius: 0; } .tampok .btn { kulay ng background: # 589b37; hangganan: 1px solid # 589b37; kulay: #fff; margin-tuktok: 20px; } .tampok .btn: hover { kulay ng background: # 333; hangganan: 1px solid # 333; }

    Kapag ginawa mo, nakakakuha ka ng isang form na tulad nito:

    Kasama sa bootstrap tutorial ang contact form

    10. Lumikha ng isang dalawang haligi na footer

    Sa totoo lang, papunta na kami sa dulo ng Bootstrap na tutorial. Ang huling bagay na nais mong idagdag sa iyong landing page ay isang seksyon ng paa na may dalawang mga haligi. Sa ngayon, hindi na ito dapat magdulot ng maraming problema para sa iyo.

    karagdagang impormasyon

    Si 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.

    Si 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.

    Makipag-ugnay

    1640 Riverside Drive, Hill Valley, California
    [protektado ng email]
    + 01 234 567 88
    + 01 234 567 89

    Bukod sa karaniwang grid markup, ang seksyon na ito ay nagha-highlight ng ilang mga posibilidad na baguhin ang typography na may Bootstrap:

    • text-uppercase
    • bold-bold-bold
    • sentro ng teksto

    Dapat malinaw na mula sa mga pangalan ng mga klase na ginagawa nila. Maaari kang makahanap ng karagdagang impormasyon tungkol sa Bootstrap at palalimbagan dito.

    Bilang karagdagan sa itaas, maaari mong gamitin ang estilo tulad nito:

    .pahina ng paa { kulay ng background: # 222; kulay: #ccc; padding: 60px 0 30px; } .footer-copyright { kulay: # 666; padding: 40px 0; }

    Nagreresulta ito sa isang magandang footer na mukhang:

    Kasama sa bootstrap tutorial ang footer ng pahina

    11. Magdagdag ng mga query sa media

    Ang pahina ay karaniwang handa na ngayon. Ito ay ganap na responsable. Gayunpaman, sa mobile view ng browser, ang itaas na seksyon ay hindi lalabas pa rin.

    error sa bootstrap tutorial sa mobile design

    Gayunpaman, walang pag-aalala, maaari mong iwasto iyon nang madali sa isang simpleng query sa media. Maliban kung gumagamit ka ng SASS para sa pag-iipon ng iyong site ng Bootstrap, gumagana ang parehong paraan tulad ng sa iba pang mga pagkakataon. Kailangan mo lang tandaan ang preset breakpoints kasama sa Bootstrap.

    Bilang kinahinatnan, upang iwasto ang problema sa itaas, maaari mo lamang isama ang isang piraso ng code tulad nito:

    @media (maximum-lapad: 575.98px) { .paglalarawan { kaliwa: 0; padding: 0 15px; posisyon: ganap; tuktok: 10%; ibahin ang anyo: wala; align ng teksto: gitna; } .paglalarawan h1 { laki ng font: 2em; } .paglalarawan p { laki ng font: 1.2rem; } .tampok { margin: 0; } }

    Pagkatapos nito, ang lahat ay dapat na:

    magdagdag ng bootstrap tutorial ang query sa media

    12. Mag-upload ng Iyong Website sa isang Web Host

    Kung sumunod ka, dapat ka na ngayong magtakda ng isang tapos na website na din sa mobile at ganap na tumutugon.

    Gayunpaman, sa ngayon, walang tao ngunit maaari mong makita ito. Upang mabago iyon, kailangan mo ng isang web host at domain. Sa ganoong paraan, mai-input ng mga tao ang iyong website address sa kanilang browser bar at pagkatapos ay i-access ang iyong bagong minted na Bootstrap website online.

    Upang pahintulutan silang gawin ito, kailangan mong i-upload ang site sa iyong server. Maaari mong gawin iyon sa isang FTP client tulad ng FileZilla. Kolektahin ang iyong FTP host address, username, at password mula sa iyong hosting provider upang kumonekta sa iyong server nang malayuan. Kapag nagawa mo, dapat mong makita ang mga file at direktoryo na naroroon doon.

    mag-upload ng website ng bootstrap sa server sa pamamagitan ng ftp

    Mag-navigate sa direktoryo na itinuro sa iyong domain (karaniwang ang direktoryo ng ugat). Kapag nagawa mo na iyon, hanapin lamang ang folder gamit ang iyong mga file ng Bootstrap sa iyong hard drive, markahan ang lahat ng mga file sa loob, at pagkatapos ay i-drag ang mga ito sa server upang simulan ang pag-upload. Ang proseso ay magtatagal ng isang oras upang matapos depende sa iyong bilis ng koneksyon pati na rin ang bilang at laki ng mga file.

    Gayunpaman, sa sandaling tapos na ito, kapag na-access mo ang iyong domain, dapat mong makita ang natapos na site sa iyong window ng browser.

    natapos ang bootstrap tutorial na landing page

    Hindi masama para sa ilang mga linya ng code, tama?

    Kung saan, kung nais mong magkaroon ng buong code para sa pahina kabilang ang pasadyang CSS at JavaScript, maaari mong i-download ang lahat dito. Gamit ito, mayroon ka ng lahat ng kailangan mo upang lumikha ng isang landing page na may Bootstrap.

    Konklusyon

    Ang Bootstrap ay isang bukas na mapagkukunan, front-end na pag-unlad na balangkas na maaaring magamit ng libre nang libre. Pinapayagan ka nitong mabilis na mga disenyo ng prototype, lumikha ng mga web page, at karaniwang pindutin ang pagtakbo sa lupa.

    Tulad ng nakita mo sa Bootstrap na tutorial na ito para sa mga nagsisimula, nangangailangan lamang ito ng pangunahing kaalaman sa HTML, CSS, at ilang opsyonal na jQuery. Bagaman hindi komportable tulad ng paggamit ng WordPress, ang Bootstrap ay isang wastong alternatibo din upang lumikha ng isang website.

    Sa ngayon, alam mo kung paano mag-set up at mag-install ng Bootstrap at mga bahagi nito, lumikha ng isang simpleng landing page, isama ang ilang pangunahing nilalaman, at istilo ito. Maaari kang lumikha ng mga menu ng nabigasyon, magtakda ng mga larawan sa background, isama ang mga pindutan, haligi, at mga form ng contact.

    Siyempre, marami pa ang dapat matutunan.

    Salamat sa pangunahing Bootstrap na tutorial na ito, alam mo na ngayon upang mapanatili ang pasulong ng iyong sarili. Kung nais mong sumisid mas malalim sa balangkas, isang mahusay na panimulang punto ay W3Schools. Bukod doon, inaasahan namin na nagustuhan mo ang tutorial ng nagsisimula at nais mong marinig ang iyong mga saloobin at karanasan tungkol dito.

    Update: Lumikha din kami ng isang bootstrap cheat sheet para sa mga nagsisimula sa .pdf at .png bersyon.

    Mayroon ka bang anumang mga saloobin sa tutorial ng Bootstrap sa itaas? Mga tanong, puna, kahilingan? Ipaalam sa amin sa seksyon ng mga komento sa ibaba!

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