Bootstrap apmācība


sāknēšanas apmācība 4


Bootstrap ir lietojumprogramma, kas palīdz ātrāk un vienkāršāk izveidot mobilajām ierīcēm reaģējošas vietnes. Pirmo reizi to izstrādāja Twitter, Bootstrap tagad tiek izmantots jebkam, sākot no tīmekļa lietojumprogrammu izstrādes līdz WordPress tēmām. Tas ir arī pilnīgi bezmaksas, daudzpusīgs un intuitīvs.

Izmantojot Bootstrap, jūs varat uzburt sarežģītas tīmekļa lapas no standarta HTML un pielāgot tās savām vajadzībām. Bootstrap nāk arī ar vairākiem jQuery spraudņiem, kas var nodrošināt papildu funkcijas, piemēram, karuseļus, pogas, rīka padomus un citu.

Visbeidzot, tas dod jums daudz īsceļu tīmekļa lapu izveidošanai, kas ļaus ietaupīt laiku un enerģiju. Viss, kas jums nepieciešams, ir pamata izpratne par HTML un CSS, lai izveidotu, kas ir atsaucīgi, vispirms mobilie un saderīgi ar visiem mūsdienu pārlūkiem.

P.S. Bootstrap nav ideāls variants pilnīgiem iesācējiem. Būtu noderīgas dažas HTML un CSS zināšanas. Alternatīvi vietnes izveidošanai varat izmantot vietņu veidotājus vai WordPress.

Kā izveidot vietni, izmantojot Bootstrap (satura rādītājs):

  1. 1. darbība: Iestatīšana un pārskats
    1. Izveidojiet HTML lapu
    2. Ielādējiet Bootstrap caur CDN vai mitiniet to uz vietas
    3. Iekļaujiet jQuery
    4. Ielādējiet Bootstrap JavaScript
    5. Salieciet to visu kopā
  2. 2. darbība: Noformējiet galveno lapu
    1. Pievienojiet navigācijas joslu
    2. Iekļaujiet pielāgoto CSS
    3. Izveidojiet lapas satura konteineru
    4. Pievienojiet fona attēlu un pielāgotu JavaScript
    5. Pievienojiet pārklājumu
    6. Iekļaujiet lapas virsrakstu un pamattekstu
    7. Izveidojiet CTA pogu
    8. Iestatiet trīs kolonnu sadaļu
    9. Pievienojiet kontakta formu
    10. Izveidojiet divu kolonnu kājeni
    11. Pievienojiet multivides vaicājumus
    12. Izmantojiet savu vietni tiešsaistē

Kopējais vietnes izveidošanas laiks, izmantojot Bootstrap: 3-4 stundas.
Zināšanu līmenis: Iesācējs līdz vidējam

1. darbība: iestatīšana un pārskats


Lai izmantotu Bootstrap, vispirms tas jāintegrē savā izstrādes vidē, aka Web lapā. Šim nolūkam jums ir divas dažādas iespējas: ielādējiet to attālināti vai lejupielādējiet un izmantojiet Bootstrap lokāli. Tomēr abiem jums vispirms ir kaut kas jāielādē.,

1. Izveidojiet HTML lapu

Kā pirmo soli mēs izveidosim vienkāršu HTML veidni kā bāzi, kurā izmantosim Bootstrap. Pirmais, ko vēlaties darīt, ir izveidot mapi datorā vai serverī projekta failiem. Šajā gadījumā es to vienkārši saukšu bootstrap. Šeit izveidojiet jaunu teksta failu un izsauciet to indekss.html. Atveriet to ar izvēlētu teksta redaktoru (piemēram,. Notepad++) un pēc tam tajā ielīmējiet zemāk esošo kodu.





Bootstrap apmācības parauga lapa








Pirms pāriešanas neaizmirstiet saglabāt failu!

2a. Ielādējiet Bootstrap, izmantojot CDN

Kā jau paskaidrots, Bootstrap galvenokārt sastāv no stila lapām un skriptiem. Tos kā tādus citus aktīvus kā pielāgotos fontus var ielādēt jūsu tīmekļa lapas galvenē un kājenē. Ietvars tam piedāvā CDN (satura piegādes tīkls) piekļuves ceļu. Jūs to varat atrast vietnē Bootstrap lejupielādes lapa, tālāk zemāk.

Lai sāktu iesākumu savā lapā, vienkārši ielīmējiet zemāk esošo kodu jūsu veidnes sadaļa.

Tagad saglabājot failu, jebkura pārlūkprogramma, kas to atver, automātiski ielādēs sāknēšanas paketes aktīvus.

Attālās metodes izmantošana ir laba ideja, jo daudziem lietotājiem jau būs ietvars pārlūka kešatmiņā. Ja tas tā ir, viņiem nevajadzēs to atkārtoti ielādēt, ierodoties jūsu vietnē, tādējādi nodrošinot ātrāku lapas ielādes laiku. Rezultātā šī ir ieteicamā metode aktīvajām vietnēm.

Tomēr, lai veiktu eksperimentus un attīstību vai arī vēlaties būt neatkarīgs no interneta savienojuma, varat arī iegūt savu Bootstrap kopiju. Tas ir tas, ko es daru šai apmācībai, jo tas rada arī mazāku kodu ievietošanai.

2b. Host Bootstrap lokāli

Alternatīvs veids, kā iestatīt Bootstrap, ir lejupielādēt to cietajā diskā un izmantot failus lokāli. Lejupielādes iespējas atrodamas tajā pašā vietā, kur saites uz attālo versiju. Šeit noteikti iegūstiet apkopotos CSS un JS failus. Jums nav nepieciešami avota faili.

Kad esat to izdarījis, izsaiņojiet failu un kopējiet tā saturu tajā pašā direktorijā kā indekss.html. Pēc tam savā projektā varat ielādēt Bootstrap CSS šādi:

Jūs ievērosiet, ka tas ietver faila ceļu, pa kuru var atrast sāknēšanas failu. Jūsu gadījumā pārliecinieties, vai jūsu ceļš atbilst jūsu faktiskajam iestatījumam. Piemēram, direktoriju nosaukumi var atšķirties, ja lejupielādējat citu Bootstrap versiju.

3. Iekļaujiet jQuery

Lai iegūtu pilnu Bootstrap funkcionalitāti, jums jāielādē arī jQuery bibliotēka. Arī šeit jums ir iespēja to attālināti ielādēt vai lokāli uzturēt.

Pirmajā gadījumā jūs atradīsit saiti uz jaunāko jQuery versiju šeit. Varat to izmantot, lai ielādētu bibliotēku savā lapā, novietojot koda rindu tieši pirms vietas, kur tā ir norādīta jūsu lapā.

Alternatīvi, lejupielādēt jQuery (ar peles labo pogu noklikšķiniet uz> Saglabāt saiti kā…), izsaiņojiet un ievietojiet to projekta mapē. Pēc tam iekļaujiet to tajā pašā vietā, kur fails, šādā veidā:

Vēlreiz pārliecinieties, ka ceļš atbilst jūsu iestatījumiem.

4. Ielādējiet Bootstrap JavaScript

Pēdējais Bootstrap iestatīšanas solis ir ielādēt Bootstrap JavaScript bibliotēku. Tie ir iekļauti lejupielādētajā ietvara versijā, un tajā pašā vietā kā iepriekš atradīsit arī saites uz attāliem avotiem. Tomēr mēs to ielādēsim citā vietā nekā stila lapa. Galvenes vietā tas nonāk lapas kājenē tūlīt pēc jQuery uzaicinājuma.

To var nosaukt šādi:

Vai vietēji patīk:

5. Salieciet to visu kopā

Ja esat pareizi izpildījis iepriekšminētās darbības, attālajam risinājumam vajadzētu būt failam, kas izskatās šādi:

   Bootstrap apmācības parauga lapa         

Alternatīvi, ja jūs mitināt vietējā līmenī, jūsu lapas veidnei vajadzētu līdzināties šādam kodam:

   Bootstrap apmācības parauga lapa         

Ja tas jums ir un jūs saglabājāt savu darbu, tagad jūs esat gatavs pāriet pie nākamās darbības.

2. solis: noformējiet galveno lapu


Labi, ka, protams, tas bija daudz sagatavošanās darbu. Tomēr tas nebija ļoti grūti, vai ne? Plus, tagad jautrība sākas.

Pašlaik, kad jūs pārejat uz savu vietnes paraugu, jums vienkārši vajadzētu redzēt tukšu lapu. Laiks to mainīt.

1. Pievienojiet navigācijas joslu

Pirmais, ko mēs vēlamies darīt, ir lapas augšpusē pievienot navigācijas joslu. Tas ļauj apmeklētājiem apiet jūsu vietni un atklāt pārējās jūsu lapas.

Šim nolūkam mēs izmantosim navigācijas josla klase. Šis ir viens no noklusējuma elementi no Bootstrap. Tas rada navigācijas elementu, kas pēc noklusējuma ir reaģējošs un mazākos ekrānos automātiski sabrūk. Tas arī piedāvā iebūvētu atbalstu zīmola, krāsu shēmu, atstarpes un citu komponentu pievienošanai.

Mēs to izmantosim tāpat kā zemāk un izliksim tieši zem tags:

 Logotips   

Daži koda skaidrojumi:

  • navbar-expand-md – tas norāda, kurā brīdī navigācijas josla izvēršas no vertikālas vai hamburgera ikonas uz pilna izmēra horizontālu joslu. Šajā gadījumā mēs to esam iestatījuši uz vidējiem ekrāniem, kas Bootstrap ir lielāks par 768 pikseļiem.
  • navbar-brand – Tas tiek izmantots jūsu vietnes zīmolu veidošanai. Šeit varat iekļaut arī logotipa attēla failu.
  • navbar-toggler – apzīmē sakļautās izvēlnes pārslēgšanas pogu. Gabals data-toggle = "sakļaut" definē, ka šī būs vērsta uz hamburgeru izvēlni, nevis nolaižamo izvēlni, kas ir otra iespēja. Ir svarīgi definēt a datu mērķis ar CSS id (definēts ar #) un aptiniet a div ar tādu pašu vārdu ap faktisko navigācijas josla elements.
  • navbar-toggler-icon – Kā jūs droši vien varat uzminēt, tas izveido ikonu, uz kuras lietotāji noklikšķina, lai atvērtu izvēlni mazākos ekrānos.
  • navbar-nav Klase
      saraksta elements, kas satur izvēlnes vienumus. Pēdējie tiek apzīmēti ar nav-item un nav-link.

    Kāpēc es to tik daudz skaidroju??

    Jo tas ir Bootstrap punkts. Jums ir visi šie standarti, kas ļauj ātri izveidot elementus ar dažām HTML un CSS klasēm. Lai nodrošinātu stilu, jums nav jāraksta CSS, viss jau ir iestatīts Bootstrap. Turklāt viss ir mobilais reaģējošais elements. Vai jūs sākat redzēt, cik tas ir noderīgi?

    Iepriekšminētais ir pietiekams, lai savai vietnei pievienotu navigācijas joslu. Tomēr šobrīd tas joprojām izskatās ļoti maz.

    pievienošanas navigācijas joslu

    Tas ir tāpēc, ka tam nav piestiprināts daudz stila. Kamēr jūs varat pievienot noklusējuma krāsas (piemēram, piešķirot navigācijas joslai tādu klasi kā bg-dark navbar-dark), tā vietā mēs vēlamies pievienot savu.

    2. Iekļaujiet pielāgoto CSS

    Par laimi, ja vēlaties mainīt noklusējuma stilu, jums nav jāmeklē liela stila lapu bibliotēka un izmaiņas jāveic ar roku. Tā vietā, tāpat kā ar WordPress bērnu motīvu, jūs varat pievienot savus CSS failus, kurus varat izmantot esošā stila pārrakstīšanai..

    Šim nolūkam vienkārši izveidojiet tukšu failu ar teksta redaktoru un piezvaniet main.css. Saglabājiet to un pēc tam pievienojiet to Bootstrap vietnes galvenai sadaļai:

    Šis ir stila lapas kods, kas atrodas galvenajā direktorijā. Ja jūs nolemjat ievietot savu css mapē noteikti iekļaujiet saitē pareizo ceļu.

    No šejienes jūs varat savai vietnei pievienot pielāgotu CSS. Piemēram, lai veidotu navigācijas joslu un tās elementus, jūs varētu izmantot šādus iezīmējumus:

    ķermeņa { polsterējums: 0; rezerve: 0; fons: # f2f6e9; } / * --- navigācijas josla --- * / .navigācijas josla { fons: # 6ab446; } .nav-link, .navbar-brand { krāsa: #fff; kursors: rādītājs; } .nav-link { labējā robeža: 1em! svarīgi; } .nav-link: lidināties { krāsa: # 000; } .navbar-collapse { pamatot saturu: flex-end; }

    Un šeit ir rezultāts:

    sāknēšanas apmācības stila navigācijas josla

    Izskatās labāk nekā iepriekš, vai ne??

    3. Izveidojiet lapas satura konteineru

    Pēc navigācijas joslas nākamā vēlamā lieta ir konteiners lapas saturam. Bootstrap tas ir patiešām viegli, jo viss, kas jums tam nepieciešams, ir zem navigācijas joslas taga:

    Ievērojiet tvertnes šķidrums klase. Šī ir vēl viena no šīm noklusējuma Bootstrap klasēm. Piemērojot to div elements tam automātiski piemēro ķekars CSS.

    -šķidrums Daļa pārliecinās, ka konteiners stiepjas visā ekrāna platumā. Ir arī tikai konteiners, kurai ir noteikts platums, tāpēc abās ekrāna pusēs vienmēr būs vietas.

    Tomēr, ja jūs tagad atkārtoti ielādējat lapu, jūs joprojām neko neredzēsit (ja vien neizmantojat izstrādātāja rīkus). Tas ir tāpēc, ka jūs izveidojāt tikai tukšu HTML elementu. Tagad tas sāks mainīties.

    4. Pievienojiet fona attēlu un pielāgotu JavaScript

    Kā nākamais solis šajā Bootstrap apmācībā mēs savas galvenās lapas galvenē mēs vēlamies iekļaut pilnekrāna fona attēlu. Šim nolūkam mums būs jāizmanto daži jQuery, lai attēls visā ekrānā būtu izstiepts līdz galam.

    Jūs to darāt tāpat, kā iekļaujot pielāgoto CSS. Vispirms izveidojiet nosaukuma teksta failu main.js un ievietojiet to vietnes mapē. Pēc tam piezvaniet pirms slēgšanas tag iekšā indekss.html.

    Pēc tam jūs varat nokopēt un ielīmēt šo koda daļu, lai izveidotu

    elements stiepjas pa visu ekrānu:
    $ (dokuments). jau (funkcija () { $ ('. header'). augstums ($ (logs) .height ()); })

    Pēc tam atliek vien iestatīt fona attēlu. Jūs to varat izdarīt iekšpusē main.css:

    .galvenes { fona attēls: url ('images / header-background.jpg'); fona izmērs: vāks; fona stāvoklis: centrs; amats: radinieks; }

    Ja iepriekš norādītajā vietā norādīsit pietiekami liela izmēra attēlu, jūs sasniegsit līdzīgu rezultātu:

    sāknēšanas apmācībā ir galvenes fona attēls

    5. Pievienojiet pārklājumu

    Lai fona attēlu padarītu īpaši stilīgu, mēs pievienosim arī pārklājumu. Šim nolūkam jūs izveidosit vēl vienu div elementu tajā, kuru jūs tikko iekļāvāt iepriekš.

    Pēc tam pielāgotajā CSS failā varat pievienot:

    .pārklājums { pozīcija: absolūta; min-augstums: 100%; min-platums: 100%; pa kreisi: 0; augšā: 0; fons: rgba (0, 0, 0, 0,6); }

    Tas izveidos šo jauko pārklājumu iepriekš ievadītajam attēlam:

    pievienošanas pārklājums

    6. Iekļaujiet lapas virsrakstu un pamattekstu

    Tagad jūs, iespējams, vēlaties pievienot lapas virsrakstu virsraksta veidā un pamattekstu. Tādā veidā jūsu apmeklētāji nekavējoties uzzinās, kurā vietnē viņi atrodas, un ko viņi no tā var sagaidīt.

    Lai tos izveidotu, vienkārši pievienojiet šo fragmentu konteinerā, kuru iestatījāt pēdējā darbībā, zem pārklājuma:

    Laipni lūdzam galvenajā lapā!

    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 sem ullamcorper.

    Pēc tam pievienojiet šādu atzīmi main.css.

    .apraksts { pa kreisi: 50%; pozīcija: absolūta; augšā: 45%; pārveidot: tulkot (-50%, -55%); text-align: centrs; } .apraksts h1 { krāsa: # 6ab446; } .apraksts p { krāsa: #fff; fonta lielums: 1,3rem; līnijas augstums: 1,5; }

    Kad jūs to darāt, galvenā lapa tagad izskatās šādi:

    sāknēšanas apmācības pievienošana lapas nosaukumam un aprakstam

    Tas tiešām sāk sanākt, vai ne??

    7. Izveidojiet CTA pogu

    Neviena galvenā lapa nav pilnīga bez aicinājuma uz darbību, visbiežāk – pogas veidā. Šī iemesla dēļ mēs nebūtu pareizi neiekļaut, kā to izveidot šajā Bootstrap apmācībā.

    Ietvars piedāvā daudz rīku, lai ātri un ērti izveidotu pogas. Jūs varat atrast daudz piemēru šeit. Manā gadījumā es pievienoju šādu iezīmējumu tieši zem lapas satura konteiners:

    Papildus tam es pievienoju šo CSS main.css:

    .apraksta poga { apmale: 1px ciets # 6ab446; fons: # 6ab446; robežas rādiuss: 0; krāsa: #fff; } .apraksta poga: virziet kursoru { apmale: 1px ciets #fff; fons: #fff; krāsa: # 000; }

    Pēc saglabāšanas un atkārtotas ielādes tas izskatās šādi:

    apmācības sāknēšanas programma pievienošanas aicinājuma uz darbību poga

    8. Iestatiet trīs kolonnu sadaļu

    Es jau esmu diezgan apmierināts ar to, kā viss veidojas. Tomēr mēs vēl neesam paveikuši šo lapu. Tālāk mēs vēlamies izveidot trīs kolonnas zem galvenā satura, lai iegūtu papildinformāciju. Šī ir Bootstrap īpašība, jo tā spēlē savu spēku: izveidojot režģi. Šajā gadījumā rīkojieties šādi:

    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.

    Pirmais, ko pamanīsit, ir rinda elements. Tas nepieciešams, veidojot kolonnas, lai darbotos kā režģa konteiners.

    Runājot par kolonnām, tām visām ir vairākas klases: col-lg-4, col-md-4 un col-sm-12. Tie apzīmē, ka mums ir darīšana ar kolonnām un izmēru, kāds tām būs uz dažādiem ekrāniem.

    Lai to saprastu, jums jāzina, ka Bootstrap režģī visas vienas rindas kolonnas vienmēr veido skaitli 12. Tātad, piešķirot tām iepriekšminētās klases, tas nozīmē, ka lielos un vidējos ekrānos viņi aizņem vienu trešdaļu no ekrāna ekrāni (12 dalīts ar 3 ir 4), bet viss ekrāns – mazās ierīcēs (12 no 12 kolonnām).

    Tam ir jēga, vai ne??

    Jūs arī pamanīsit, ka es iekļāvu attēlus un pievienoju .attēla šķidrums klase viņiem. Tas jādara, lai viņi būtu atsaucīgi, lai tie mērogotu kopā ar ekrānu, kurā lapa tiek skatīta.

    Papildus tam parastajā vietā ir iekļauts šāds stils:

    .Iespējas { rezerve: 4em auto; polsterējums: 1em; amats: radinieks; } .objekta nosaukums { krāsa: # 333; fonta lielums: 1,3rem; burtu svars: 700; robeža-apakšdaļa: 20 pikseļi; teksta pārveidošana: lielie burti; } .funkcijas img { -webkit-box-shadow: 1 pikseļi 1 pikseļi 4 pikseļi rgba (0, 0, 0, 0,4); -moz-box-shadow: 1 pikseļi 1 pikseļi 4 pikseļi rgba (0, 0, 0, 0,4); kaste-ēna: 1 pikseļi 1 pikseļi 4 pikseļi rgba (0, 0, 0, 0,4); malas robeža: 16 pikseļi; }

    Kad tas tiek pievienots zem galvenā satura un saglabāts, tas izskatās šādi:

    sāknēšanas apmācības pievieno trīs kolonnu sadaļu

    9. Pievienojiet kontakta formu

    Jūs pamanīsit, ka viens no jaunajiem laukiem joprojām ir tukšs. Tas notika ar nodomu, jo mēs vēlamies tam pievienot kontakta formu. Šī ir ļoti parasta prakse, kad galvenās lapas ļauj apmeklētājiem sazināties.

    Saziņas formas izveidošana Bootstrap ir diezgan vienkārša:

    Sazināties!

    Līdz šim man vairs nevajadzēja izskaidrot iezīmēšanu, lai izveidotu kolonnas. Lūk, ko nozīmē pārējais uzcenojums:

    • forma-grupa – Izmanto, lai apvilktu formas laukus formatēšanai.
    • formas kontrole – apzīmē formas laukus, piemēram, ievadus, teksta laukus utt.

    Ar veidlapām var darīt daudz vairāk, ko varat uzzināt sadaļā dokumentācija. Tomēr demonstrācijas nolūkos pietiek ar iepriekšminēto. Ievietojiet to atlikušās tukšās kolonnas iekšpusē un pēc tam pievienojiet šo stilu main.css:

    .funkcijas .formu kontrole, .funkciju ievade { robežas rādiuss: 0; } .funkcijas .btn { fona krāsa: # 589b37; apmale: 1px ciets # 589b37; krāsa: #fff; augšējā robeža: 20 pikseļi; } .funkcijas .btn: lidināties { fona krāsa: # 333; apmale: 1px ciets # 333; }

    Kad to darāt, tiek iegūta šāda forma:

    sāknēšanas apmācība ietver kontaktu formu

    10. Izveidojiet divu kolonnu kājeni

    Labi, mēs tagad dodamies uz Bootstrap apmācības beigām. Pēdējā lieta, ko vēlaties pievienot savai galvenajai lapai, ir kājenes sadaļa ar divām kolonnām. Tagad tas jums vairs nedrīkstētu radīt lielas problēmas.

    Papildus informācija

    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.

    Sazinieties

    1640 Riverside Drive, Hill Valley, Kalifornija
    [aizsargāts ar e-pastu]
    + 01 234 567 88
    + 01 234 567 89

    Papildus parastajam režģa marķējumam šajā sadaļā ir uzsvērtas dažas iespējas tipogrāfijas modificēšanai ar Bootstrap:

    • teksts ar lielo burtu
    • fonta svars - treknraksts
    • teksta centrs

    No klašu nosaukumiem vajadzētu būt diezgan skaidriem. Jūs varat atrast vairāk informācijas par Bootstrap un tipogrāfiju šeit.

    Papildus iepriekšminētajam varat izmantot arī šādu stilu:

    .lapas kājene { fona krāsa: # 222; krāsa: #ccc; polsterējums: 60px 0 30px; } .kājenes autortiesības { krāsa: # 666; polsterējums: 40 pikseļi 0; }

    Rezultātā iegūst skaistu kājeni, kas izskatās šādi:

    sāknēšanas apmācībā ietilpst lapas kājene

    11. Pievienojiet multivides vaicājumus

    Lapa jau pagaidām ir gatava. Tā ir arī pilnībā atbildīga. Tomēr pārlūka mobilajā skatā augšējā sadaļa vēl nav izlikta pareizi.

    sāknēšanas apmācības kļūda mobilajā dizainā

    Tomēr neuztraucieties, to var diezgan viegli labot, izmantojot vienkāršu multivides vaicājumu. Ja vien jūsu Bootstrap vietnes apkopošanai neizmantojat SASS, tās darbojas tāpat kā citos gadījumos. Jums vienkārši jāpatur prātā iepriekš iestatīti pārtraukuma punkti iekļauts Bootstrap.

    Rezultātā, lai labotu iepriekš minēto problēmu, jūs varat vienkārši iekļaut šāda koda kodu:

    @media (maksimālais platums: 575,98 pikseļi) { .apraksts { pa kreisi: 0; polsterējums: 0 15px; pozīcija: absolūta; augšā: 10%; pārveidot: nav; text-align: centrs; } .apraksts h1 { fonta lielums: 2em; } .apraksts p { fonta lielums: 1,2rem; } .Iespējas { rezerve: 0; } }

    Pēc tam viss ir tā, kā vajadzētu:

    pievienošanas multivides vaicājums

    12. Augšupielādējiet savu vietni Web Host

    Ja esat sekojis līdzi, tagad jums vajadzētu iestatīt gatavu vietni, kas darbojas arī mobilajā ierīcē un ir pilnībā atsaucīga.

    Tomēr līdz šim neviens, bet jūs to varat redzēt. Lai to mainītu, jums ir nepieciešama tīmekļa resursdators un domēns. Tādā veidā cilvēki var ievadīt jūsu vietnes adresi savā pārlūka joslā un pēc tam tiešsaistē piekļūt jūsu tikko izkaltajai Bootstrap vietnei.

    Lai ļautu viņiem to darīt, vietne ir jāaugšupielādē savā serverī. To var izdarīt ar tādu FTP klientu kā FileZilla. Lai attāli izveidotu savienojumu ar serveri, savāciet sava hostinga pakalpojumu sniedzēja FTP resursdatora adresi, lietotājvārdu un paroli. Kad to darāt, jums vajadzētu būt iespējai redzēt failus un direktorijus, kas tur atrodas.

    augšupielādēt sāknēšanas vietni serverī, izmantojot ftp

    Dodieties uz direktoriju, uz kuru tiek norādīts jūsu domēns (parasti saknes direktoriju). Kad esat to izdarījis, cietajā diskā vienkārši atrodiet mapi ar Bootstrap failiem, atzīmējiet visus failus iekšā un pēc tam velciet tos uz serveri, lai sāktu augšupielādi. Procesa pabeigšana prasīs zināmu laiku atkarībā no savienojuma ātruma, kā arī failu skaita un lieluma.

    Tomēr, kad tas būs izdarīts, piekļūstot savam domēnam, jums vajadzētu būt iespējai redzēt pabeigto vietni pārlūkprogrammas logā.

    sāknēšanas apmācības pabeigtā galvenā lapa

    Nav slikti dažām koda rindām, labi?

    Ja jūs vēlaties, lai būtu viss lapas kods, ieskaitot pielāgoto CSS un JavaScript, varat tos visus lejupielādēt šeit. Izmantojot to, jums ir viss nepieciešamais, lai izveidotu galveno lapu, izmantojot Bootstrap.

    Secinājums

    Bootstrap ir atvērtā pirmkoda izstrādes ietvars, kuru ikviens var izmantot bez maksas. Tas ļauj ātri izveidot dizainparaugu modeļus, izveidot tīmekļa lapas un parasti darboties.

    Kā jūs redzējāt šajā sāknēšanas apmācībā iesācējiem, tai ir vajadzīgas tikai pamatzināšanas par HTML, CSS un dažām izvēles jQuery. Lai arī tas nav tik ērti kā WordPress lietošana, Bootstrap joprojām ir derīga alternatīva vietnes izveidošanai.

    Tagad jūs zināt, kā iestatīt un instalēt Bootstrap un tā komponentus, izveidot vienkāršu galveno lapu, iekļaut pamata saturu un to stilizēt. Varat izveidot navigācijas izvēlnes, iestatīt fona attēlus, iekļaut pogas, kolonnas un kontaktu formas.

    Protams, ir vēl ko mācīties.

    Pateicoties šai pamata sāknēšanas apmācībai, jūs tagad zināt pietiekami daudz, lai pats turpinātu virzīties uz priekšu. Ja vēlaties ienirt dziļāk ietvarā, labs sākumpunkts ir W3skolas. Bez tam, mēs ceram, ka jums patika šī apmācība iesācējiem un mēs vēlētos dzirdēt jūsu domas un pieredzi par to.

    Atjaunināšana: mēs izveidojām arī sāknēšanas krāpšanās lapu iesācējiem .pdf un .png versijās.

    Vai jums ir kādas domas par iepriekš minēto Bootstrap apmācību? Jautājumi, komentāri, pieprasījumi? Paziņojiet mums komentāru sadaļā zemāk!

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