Bootstrap komponentu izmantošana

Bootstrap Tam ir divas lieliskas pamatnes, kas dod mums standarta sākumpunktu dažādiem tīmekļa dizaina risinājumiem, kas mums ir vajadzīgi vai kurus mēs vēlamies darīt, tie ir režģis un bāzes CSS, ar šiem diviem rīkiem mēs varam izveidot lielu centrālo bāzi, kur mēs varam novietojiet to atpūtai visos dažādajos elementos, kas veido mūsu saskarni.
Tāpat kā visas bāzes, tās pašas par sevi neveic pārējo konstrukciju, lai panāktu lielāku izsmalcinātību un detalizāciju, ir jāizmanto papildu komponenti, kas atrodas uz mūsu bāzes, un, protams, to spēku ietekmēs izturība. no pēdējiem.
Gadījumā, ja Bootstrap Mums ir vairāki komponenti, kas palīdz mums maksimāli palielināt mūsu dizaina detaļas, komponenti, sākot no ikonām, paneļiem un pat galvenēm. Elementi, kas palīdz mums atšķirt un izcelt savu lietojumu no citiem.
Sastāvdaļas iekšā Bootstrap Tos var izmantot mūsu lapās neatkarīgi no pārējām lapām, tas ir, mēs varam vienā dokumentā ģenerēt tik daudz komponentu, cik mums nepieciešams, un tie nav pretrunā ar citiem.
Turklāt pamata stils pēc noklusējuma jau ir iepriekš definēts, tāpēc mēs varam ātri un bez lielām pūlēm izveidot savu lietojumprogrammu, kur galu galā mēs varam pielāgot visu lietojumprogrammu, mainot mūsu pašu stilu bāzes stilu.
Sastāvdaļas var būt no CSS, JavaScript vai abi, tāpēc daži papildus Bāzes CSS tiem būs nepieciešamas trešo pušu bibliotēkas, piemēram jQuery, tas var šķist nedaudz neērti, bet realitāte ir tāda, ka ieviešana ir tik vienkārša, ka mēs pat neapzināsimies, ka izmantojam vairāk lietu nekā tas, kas tiek nodrošināts pēc noklusējuma Bootstrap.
Viena no pirmajām sastāvdaļām, kas mums jāsaprot, ir ikonas, jo ar šiem mazajiem attēla gabaliem mēs varam likt lietotājam saprast jebkuras mūsu dizaina daļas funkcionalitāti, tādēļ, kad mēs redzam lielas ikonas X mēs zinām, ka tas ir saistīts ar pašreizējās sadaļas slēgšanu vai gadījumā, ja redzam ikonu formā + mēs zināsim, ka tas ir kaut ko pievienot.
GlifikoniIn Bootstrap ir ikonu bibliotēka Glifikoni, kas ir ļoti populārs tīmekļa dizainā un kas mums piedāvā praktiski ikonu katrai darbībai, ko mēs varam veikt tīmekļa lapā, tas paver mums daudz darba, jo mums nav jādomā par to, lai meklētu kādu, kas kalpotu grafiskiem darbiem šiem mērķiem.
Nākamajā attēlā mēs varam redzēt ikonas, kas mums ir tieši vietnē Bootstrap:

PALIELINĀT

Šis ir tikai neliels mūsu pieejamo ikonu paraugs, taču, pārlūkojot oficiālo lapu, mēs redzēsim visas mūsu izmantojamās iespējas.
Šo ikonu izmantošana ir ļoti vienkārša, mums vienkārši jāpievieno klase glifikons uz elementu HTML un pēc tam pievienojiet atbilstošās ikonas klasi no pieejamā saraksta. Ikonas parasti tiek pievienotas tādiem vienumiem kā vai tā kā šādā veidā mēs pārliecināmies, ka tie ir tikai vizuāli, tādējādi iegūstot vislabāko iespējamo rezultātu. Tālāk redzēsim piemēru, kā izmantot šo komponentu HTML.

 Glifikonu izmantošana sāknēšanas siksnā
Iemaksājiet
Pasts
Lietotāji
Atkritne
Izlogoties

Šajā kodā mēs esam vienkārši ievietojuši iekļaušanu no mūsu bibliotēkām Bootstrap atbilstošs, pievienojot jQuery kā trešās puses bibliotēku un pēc tam pievienojiet bibliotēku js no Bootstrap, ir svarīgi saglabāt šo kārtību kopš js bibliotēkas Bootstrap vajadzība pēc jQuery un, ja tas ir iekļauts, tas mums radīs kļūdu ieviešanā.
Tad mūsu iekšienē esam izveidojuši dažas sadaļas, kurās esam pievienojuši GlifikoniMūsu nolūkiem pietika ar ikonu ievietošanu etiķetē. Veicot darbību mūsu pārlūkprogrammā, mēs iegūsim šādu rezultātu:

Kā redzam, ikonas papildina ziņojumus, piešķirot tām lielāku svaru un izpratni, piemēram, meklēšanas lodziņā, ja kāds nerunā angļu valodā, viņš nesapratīs ziņojumu MeklētBet, ja esat izmantojis datorsistēmas un uzreiz redzat palielināmā stikla ikonu, jūs zināt, ka tas attiecas uz meklējumiem, tā ir šī komponenta patiesā jauda.
Vēl viena svarīga sastāvdaļa ir navigācijas cilnes, kas ļauj mums sakārtot mūsu saturu vienā lapā, tādējādi izvairoties no daudz vietas patēriņa un tādējādi atvieglojot lietotāja dzīvi, jo mums nav jāapgūst liels skaits mūsu tīmekļa lietojumprogrammas sadaļu.
Lai izmantotu šīs cilnes, mums nepieciešama klases palīdzība nav, tas ir tas, kas noņem noklusējuma stilu HTML no elementiem un viņa dēli , tādējādi atvieglojot lietošanu un tās turpmāku pielāgošanu mūsu dizainam. Lai to izmantotu, mums vienkārši jāpievieno klases nav Y navigācijas cilnes uz elementu un ar to mēs iegūsim atbilstošu rezultātu.
Apskatīsim šo kodu, kur mēs ieviešam šo risinājumu, tāpat kā iepriekšējā piemērā mums ir jāiekļauj faili bootstrap.css, bootstrap-theme.css, bootstrap.js Y jquery.js, apskatīsim mūsu kodu:

 Glifikonu izmantošana sāknēšanas siksnā

Drošība
Ieraksti
Saturs

Kā mēs pamanām elementa izmantošanu ar šo klasi ļauj mums izveidot struktūru HTML normāli, bet rezultāts, kā mēs redzēsim zemāk, dod mums citu veidu, kā organizēt informāciju. Mēs varam izcelt vēl vienu interesantu mūsu koda aspektu, un tā ir kombinācija Glifikoni ar šo risinājumu, parādot, ko mēs izskaidrojam par elementu neatkarību.

PALIELINĀT

Vēl viena ļoti noderīga sastāvdaļa ir nolaižamās izvēlnes, kas ļauj mums apkopot daudzas iespējas nelielā vietā, it īpaši tām tīmekļa lapām, kurās ir daudz kategoriju, kas tām jāorganizē.
Nomest lejāSastāvdaļa Bootstrap kurš to risina, sauc Nomest lejā un tāpat kā iepriekšējais komponents tas tiek pielietots elementā tomēr tā uzbūve ir nedaudz sarežģītāka, lai gan tā nepārsniedz HTML darba stilu.
Vispirms mums ir jābūt elementam, kas ir nolaižamās izvēlnes galvene, pēc tam jābūt kurā būs redzamās opcijas. Šim nolūkam mēs noformulēsim iepriekšējo piemēru, lai cilnē Saturs pievienotu nolaižamo izvēlni, tādējādi mēs varētu labāk izprast mūsu piemēru.
Nedaudz rezumējot, mēs parādīsim tikai saturu, jo galvene būs tāda pati. Apskatīsim nolaižamās izvēlnes funkcionalitātes kodu:

Drošība
Ieraksti
Saturs

Video
Attēli
Audio

Tad mēs redzam, kā kādā elementā mēs esam sākuši nolaižamo darbību ar klasi nomest lejā, tad tajā mēs definējam elementu kā opcijas aktivizētāju, pievienojot klasi nolaižamā izvēlne un visbeidzot mēs izveidojām a kas ir klasē nolaižamā izvēlne lai noteiktu, ka tai ir visas iespējas, kuras mēs redzēsim. Izpildot savu piemēru pārlūkprogrammā, mēs iegūsim šādu rezultātu:

PALIELINĀT

Protams, tā ir tikai neliela daļa no tā, ko mēs varam sasniegt, jo ir iespējams iekļaut vairāk efektu un ar dažādiem stiliem mainīt to vizuālo izskatu. Ar to mēs pabeidzam šo apmācību, kurā esam redzējuši trīs visnoderīgākos komponentus, kurus varam izmantot Bootstrap, tādējādi panākot daudz lielāku mūsu lietojumprogrammas pielāgošanu.