Lai strādātu ar tīmekļa lapām, ir nepieciešams daudz vairāk nekā tikai to valodu zināšana, kuras mums jāizmanto, ir virkne atskaites punktu, kas mums jāievēro, lai izstrādātu produktu ar izcilu rezultātu. Viens no šiem atskaites punktiem ir ekrānā redzamo elementu dizains un izvietojums.
Iedomāsimies, ka mums ir jāprojektē tīmekļa lapa, ja mēs sākam no nulles, mums jāņem vērā, kādai vajadzētu izskatīties ēdienkartei, tabulām, pogām, tik vienkāršām lietām kā ikonas, kuras mēs izvietosim uz dažām darbību pogām utt.
Kā redzam, tas ir smags darbs, it īpaši, ja vēlamies, lai tas izskatītos optimāli un pievilcīgi, mums jābūt arī detalizētiem, lai vietnei piešķirtu personisku pieskārienu, ja nu mēs neesam dizaineri? Šis ir lielais jautājums, ir izstrādātāji, kuriem ir slikta acs attiecībā uz labu gaumi un dizainu, un šāda veida profili tiek aizliegti, lai kvalitatīvi parādītos tīmeklī. Vai ko darīt, ja mums ir laba gaume, bet maz laika projektēšanai?
Lai atrisinātu šīs divas lielās prasības, kas mums ir Bootstrap kas ir nekas vairāk kā a CSS ietvars tas ļauj mums uzreiz iegūt mūsu lapas pamataspektu, neciešot dizainu, bet turklāt tas mums palīdz arī ar pamata efektiem un ļoti īpašu veidu, kā strukturēt saturu, kuru mēs prezentēsim.
Bootstrap priekšrocībasMēs to jau zinām Bootstrap tas ir CSS ietvars un tas palīdz mums noteikt mūsu vietnes pamataspektus, bet papildus tam, ka tai ir noteiktas priekšrocības attiecībā uz tās izmantošanu, mēs turpmāk redzēsim dažas no pozitīvajām lietām, ko tā mums sniedz Bootstrap:
1. Atkārtota izmantošanaAr Bootstrap Mums ir daudz komponentu, kas izgatavoti pēc noklusējuma, lai mēs tos varētu izmantot bez izmaiņām dažādās mūsu vietnes daļās, tādējādi samazinot izmantotā koda laiku un daudzumu. Tas arī veicina mūsu lietojumprogrammu modulāro attīstību.
2. KonsekvencePateicoties tam, ka daudzi komponenti ir izgatavoti vispārīgā veidā, kods ir konsekvents, tas ir, tas apstrādā ļoti līdzīgas struktūras, tāpēc, lasot to vai saglabājot lietojumprogrammu, mēs jau zināsim, kā tas darbojas daudz vienkāršāk.
3. Elastīgs dizainsMobilais dizains ir oti svargs un Bootstrap tas tiek ņemts vērā jau no paša sākuma, mums ir elastība, ka mūsu vietne automātiski pielāgojas dažādām izšķirtspējām un ekrāna izkārtojumiem, ietaupot mums daudz darba no tā, ka no jauna jāveido mobilo ierīču skati.
4. KopienaVēl viens aspekts, kas jāņem vērā, ir dokumentācija, kad mēs izmantojam trešās puses sistēmu, ir ļoti svarīgi, lai mums būtu kur vērsties, ja mums ir šaubas un šajā ziņā Bootstrap Tam nav salīdzinājuma, jo bez lielām pūlēm mēs varam iegūt gandrīz jebkuru atbildi uz mūsu šaubām.
Bootstrap trūkumiLai gan gandrīz viss ir labi, mums ir jārunā arī par trūkumiem vai ne tik labiem aspektiem, ar kuriem mēs saskaramies, kad to izmantojam CSS ietvarsTālāk apskatīsim dažas tās vājās vietas.
1. Mazs oriģinālsJa mēs neņemam nedaudz laika, lai izveidotu savu dizainu, mēs varam palikt tikpat oriģināli, ja to izmantojam Bootstrap bez vairāk, lai gan šis ietvars tam ir paredzēts, tā lieliskās pieņemšanas dēļ mums ir nedaudz jāstrādā, lai neizskatītos pēc kopijas kopijas.
2. Mācīšanās līkneTāpat kā viss, mums ir jāiziet mācīšanās līkne, ja mēs vēlamies gūt maksimālu labumu, problēma ir tā, ka, ja mēs vēlamies no pamata aspekta pāriet uz progresīvo, šoks ir nedaudz spēcīgs.
3. Slikta saderība starp versijāmKad tiek mainīta versija, iepriekšējā versija zaudē daudz derīguma, un, ja mēs vēlamies to atjaunināt, tā mums izmaksās, it īpaši, ja esam veikuši svarīgas izmaiņas, lai mūsu vietne izskatītos citādi.
UzstādīšanaKad mēs zinām, kas tas ir Bootstrap, un tās izmantošanas priekšrocībām un trūkumiem savos projektos, mums ir jānokļūst apmācības praktiskajā daļā, tagad mēs uzzināsim, no kurienes mēs varam iegūt šo ietvaru un kā mēs to varam iekļaut savā projektā.
Bootstrap iegūšanaPirmā lieta, kas mums jādara, ir iegūt nepieciešamos iekļaujamos failus Bootstrap mūsu projektā, tāpēc mums jāapmeklē viņu vietne getbootstrap.com un jālejupielādē nepieciešamie faili, vai arī jāizmanto CDN lai izvairītos no failu mitināšanas mūsu serverī un samazinātu mūsu joslas platuma izmantošanu.
Neatkarīgi no opcijas mums ir jāatrodas lapā, kas ir līdzīga šai lapai, ja, apmeklējot ietvara lapu, noklikšķinām uz sākotnējās lejupielādes pogas:
PALIELINĀT
Lai atvieglotu darbu, pieņemsim, ka esam lejupielādējuši projektu, tas ir saspiests fails, kas mums ir jāizgūst vietā, kuru mēs varam izmantot, un tam vajadzētu būt kaut kas līdzīgs šim:
Kā redzam, mūsu projektā ir jābūt trim mapēm, no kurām viena ir paredzēta CSS, cits par izmantotajiem avotiem un, visbeidzot, par JS nepieciešams. Ar to mēs jau esam pieejami Bootstrap, kas ir nekas vairāk kā projekta kopēšana mūsu resursu mapē.
Sāciet darbu ar BootstrapTā kā mūsu rīcībā ir visi resursi, mums tas ir jāiekļauj mūsu dizainā, tāpēc mēs varam izveidot failu HTML un veicot nepieciešamos ieslēgumus, mēs to varam redzēt sīkāk šādā kodā:
Bootstrap instalēšanaKā redzam, vienīgais, ko mēs darījām, bija iekļaut trīs failus, īpaši divus .css un a .js, tas ir tas, kas mums nepieciešams, lai sāktu izmantot visu struktūru; ja mēs tagad atveram failu ar pārlūkprogrammu, mēs redzēsim, kā burtu fonts atšķiras no tā, ko mēs parasti redzētu ar etiķeti H1:
Bootstrap režģisLai panāktu mūsu dizaina organizāciju, Bootstrap izmantojiet režģi vai režģis, tas sastāv no 12 kolonnām, tāpēc viss, ko redzam mūsu ekrānā, ir jāorganizē šādā veidā, tādējādi tiek panākts, ka lapu var strukturēt tā, lai mēs varētu izmantot mums piedāvātos rīkus ļoti caurspīdīgā veidā.
Protams, tas ir pielāgošanās process, taču svarīgi ir tas, ka mēs varam izveidot slejas, kas grupē vairākas, kā arī strādājot ar tabulām HTML ka ar rekvizītu span varam izveidot kolonnas ar vairākiem savienojumiem. Lai izveidotu vietni, kas izmanto šo struktūru, mums ir jābūt tikai šādām:
Div ar klasi konteiners, iekšā div ar klasi rinda, un visbeidzot vienā vai vairākās divās klasēs kāposti, nākamajā kodā aplūkosim lapas ar 3 kolonnām piemēru, tāpēc katrai slejai ir jābūt grupai 4, lai kopā pievienotu 12, kas ir mūsu paskaidrotā noklusējuma vērtība Bootstrap.
Kolonnas BootstrapRezultātā tiek iegūta lapa, kurā trīs iekšējās sadaļas atrodas vienā rindā, kas ir sadalīta trīs vienādās kolonnās, kā redzams šādā attēlā:Piemērs, kā izmantot kolonnas bootstrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam atvieglo manu in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Integer aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam tikai ex, pieprasījums pēc efektivitātes, vietne sit amet purus. Cras id semper felis. Esiet ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Vesels skaitlis eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam atvieglo manu in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Integer aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam tikai ex, pieprasījums pēc efektivitātes, vietne sit amet purus. Cras id semper felis. Esiet ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Vesels skaitlis eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam atvieglo manu in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Integer aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam tikai ex, pieprasījums pēc efektivitātes, vietne sit amet purus. Cras id semper felis. Esiet ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Vesels skaitlis eu eleifend mauris.
PALIELINĀT
Šī struktūra, neskatoties uz mazliet kvadrātveida izskatu, ir ļoti elastīga, jo, lai sasniegtu vēlamos rezultātus, mums tikai jāizveido sava veida spēle ar konteineriem un to kolonnām. Ar to mēs pabeidzam šo apmācību, un esam efektīvi spēruši pirmos soļus Bootstrap un tagad mēs varam sākt izmantot tās priekšrocības tiešāk mūsu projektos vai tīmekļa lietojumprogrammās.
