Kā izmantot pamata CSS Bootstrap

Viena no sarežģītākajām lietām darbā ar tīmekļa dizainu ir pārvarēt sīkās atšķirības starp pārlūkprogrammām, lai gan teorētiski katrai pārlūkprogrammai ir jāatbilst standartiem, un vairumā gadījumu tā ir, ir ļoti smalkas nelielas atšķirības, kas var radīt mūsu dizainu ir grūti īstenot.

Pirms pastāvēšanas Bootstrap fails ar nosaukumu reset.cssŠajā gadījumā tika skaidri noteiktas visas pamata un galveno elementu vērtības, piemēram, spilventiņi, piemales, noklusējuma fonts utt. Tādējādi mēs neļāva pārlūkprogrammai darīt to, ko tā vēlējās, definējot elementus, kurus mēs neesam mainījuši savos pielāgotajos stilos.

Mūsdienās Bootstrap rūpējas par šīm detaļām mūsu vietā, tas tiek panākts ar failu ar nosaukumu bootstrap.css kas tautā pazīstams kā bāzes fails.

PrasībasLai varētu izpildīt šīs apmācības piemērus un vingrinājumus, mums ir jābūt projektam ar Bootstrap jau lejupielādēts vai, ja tas nav iespējams, interneta savienojums, lai varētu izmantot bibliotēkas tieši no jūsu CDN. Mums ir nepieciešams mūsdienīgs pārlūks Chrome vai Firefox jaunākajās versijās, un visbeidzot mums ir vajadzīgs tāds teksta redaktors kā Cildens teksts vai NotePad ++, lai veidotu HTML saturu draudzīgākā veidā, lai gan, ja vēlamies, lai gedit vai piezīmju grāmatiņa kalpotu mūsu mērķiem.

Galvenes
Viena no lietām, kas visvairāk piesaista uzmanību vietnē, ir satura nosaukumi un subtitri, protams, tā ir šo elementu funkcija, CSS bāze Bootstrap ir interesants veids, kā to apstrādāt, pirmkārt, tam ir daži izmēri un elementam noteikts fonts h jebkurā numurā no 1 līdz 6, bet tam ir arī klases, kas atbilst katram elementam, lai mēs varētu piemērot šos pašus stilus div vai tomēr laidums.

Vēl viena interesanta lieta ir tā, ka mēs varam izmantot elementu mazs lai samazinātu virsraksta sadaļas lielumu, bet saglabātu proporciju attiecībā pret elementu vai elementu, kas izmanto atbilstošo klasi.

Tas nozīmē, ka, ja mums ir vairākas pārlūkprogrammas, tiek saglabāta mūsu dizaina viendabība, tāpēc nosaukumiem nav jāizskatās citādi, piemēram, Safari uz Firefox, kad mēs zinām, ka abas pārlūkprogrammas pēc noklusējuma darbojas ar dažādiem fontiem.

Iemācīto pielietot praksē
Mēs izveidosim nelielu lapu, kurā izveidosim nosaukumu sarakstu, abas nogāzes novietosim vienu virs otras, lai mēs varētu redzēt, kā atšķirības vairs nepastāv, pateicoties Bootstrap. Vispirms apskatīsim kodu un pēc tam redzēsim, kā tas izskatās mūsu pārlūkprogrammā.

 Base Bootstrap faila izmantošanaTas ir divs ar klasi H1, avots mazs
Šis ir H4 nosaukums ar mazo fontu
Tas ir divs ar klasi H4, avots mazs

Šeit mēs redzam, kā mēs ķermenī esam paveikuši dažādus elementus, kurus mēs izmantosim kā nosaukumus, turklāt mēs parādām, kā elements darbojas, lai mēs varētu apvienot to ar nosaukumiem, lai panāktu ļoti interesantus efektus. Mēs arī iekļaujam papildu stilu, lai pievienotu dažus polsterējumi papildu, lai mums būtu tāds rezultāts, kādu redzēsim nākamajā attēlā:

PALIELINĀT

Punkti
Kad esam piesaistījuši lasītāja vai lietotāja uzmanību ar mūsu lietojumprogrammas nosaukumiem, mums parasti ir vajadzīgs kāds saturs, ko var patērēt, parasti tas ir teksts, ko ievietojam rindkopā, lai gan tas var būt arī attēls, audio vai video.

Atgriežoties pie rindkopas, tas jau ir elements

piedāvā stilu, ko iepriekš definējis pamata CSS, tomēr šī bāze piedāvā arī īpašu rindkopas veidu, ko sauc vadīt, pievienojot šo klasi rindkopai, mēs nekavējoties padarīsim to atšķirīgu no pārējām līdzīgajām, jo ​​tās lielums ir palielināts un dažas fontu īpašības tiek mainītas.

Turpmākajā kodā redzēsim, kā tas darbojas, ko mēs tikko paskaidrojām, šajā piemērā mēs izveidosim divas rindkopas, kurās pirmajai būs klase svina, šādā veidā mēs redzēsim, kā tas izcels, protams, tas viss darbojas, ja mums ir Bootstrap mūsu projektā apskatīsim mūsu kodu:

 Base Bootstrap faila izmantošana
Bacon ipsum pain amet in laboris magna ullamco, in stilbiņu sāpes boudin eiusmod andouille leberkas cūkgaļas vēdera vingrošana ex. Liellopa ribiņas magna sālīta liellopu gaļa incididunt id. Kevins rumpis astē. Filet mignon turkey quis, blaugznas brieža gaļa ullamco saraustīta bez voluptāta cūkgaļas fileja.
Bacon ipsum pain amet in laboris magna ullamco, in stilbiņu sāpes boudin eiusmod andouille leberkas cūkgaļas vēdera vingrošana ex. Liellopa ribiņas magna sālīta liellopu gaļa incididunt id. Kevins rumpis astē. Filet mignon turkey quis, blaugznas brieža gaļa ullamco saraustīta bez voluptāta cūkgaļas fileja.

Izpildīsim mūsu piemēru un apskatīsim, kā tas izskatās mūsu pārlūkprogrammā:

PALIELINĀT

Izlīdziniet tekstu
Viena no lietām, kas ir arī ļoti svarīga, ir teksta saskaņošana, jo dažreiz mums ir nepieciešams, lai mūsu teksts būtu pamatots, izlīdzināts pa labi, uz centru vai piespiedu kārtā būtu pa kreisi, lai gan CSS ir līdzvērtīgi klase šim nolūkam ietaupa mums daudz darba, kā arī palīdz mums nodrošināt koda konsekvenci.

Nākamajā piemērā mēs redzēsim, kā mēs izmantojam katru no šīm klasēm dažādiem elementiem un lai mūsu kodam būtu labāka lasāmība, mēs veidosim visu elementu rindkopas. Apskatīsim kodu:

 Base Bootstrap faila izmantošana
Bekons ipsum dolor amet in laboris magna ullamco, stilbā dolor boudin eiusmod andouille
leberkas cūkgaļas vēdera vingrošana ex. Liellopa ribiņas magna sālīta liellopu gaļa incididunt id.
leberkas cūkgaļas vēdera vingrošana ex. Liellopa ribiņas magna sālīta liellopu gaļa incididunt id. leberkas cūkgaļas vēdera vingrošana ex. Liellopa ribiņas magna sālīta liellopu gaļa incididunt id. Kevins rumpis
astē biltong. Filet mignon turkey quis, blaugznas brieža gaļa ullamco saraustīta bez voluptāta cūkgaļas fileja.

Tagad redzēsim, kā katra klase uzvedas mūsu pārlūkprogrammā, ir īpašs gadījums ar pamatot, kas ir ļoti smalks, tāpēc tā ietekme var nebūt daudz redzama.

PALIELINĀT

Saraksti
Saraksti bieži vien ir nepieciešami un ne tikai, lai uzskaitītu lietas, tie daudzkārt ir būtiskas dizaina sastāvdaļas. Bootstrap apstrādā tos pārredzamā veidā, tāpat kā iepriekšējos elementus, kurus esam redzējuši, sarakstiem ir stils, ko iepriekš nosaka CSS bāze, tomēr mums ir pāris varianti, piemēram, saraksts bez stiliem, lai izvairītos no aizzīmēm, un saraksts ar rindā, pēdējais padara sarakstu horizontālu.

Tālāk redzēsim katra šī saraksta piemēru, lai mēs varētu tos izmantot savā kodā:

 Base Bootstrap faila izmantošana
Iekļauts saraksts

Pirmais elements
Otrais elements
Trešais elements
Ceturtais elements
Piektais elements

Saraksts bez stiliem

Pirmais elements
Otrais elements
Trešais elements
Ceturtais elements
Piektais elements

Standarta saraksts

Pirmais elements
Otrais elements
Trešais elements
Ceturtais elements
Piektais elements

Tagad redzēsim, kā tas izskatās mūsu pārlūkprogrammā, kur redzam, ka atšķirības ir uzreiz pamanāmas:

Ar to mēs pabeidzam šo apmācību, mēs esam redzējuši, ka bāzes CSS no Bootstrap Tas dod mums standarta pamatu, lai nodrošinātu, ka elementi, kurus mēs neesam definējuši vai pielāgojuši, tiek parādīti noteiktā veidā tieši pārlūkprogrammā, tādējādi dodot mums pilnīgu kontroli pār mūsu lietojumprogrammu neatkarīgi no pārlūkprogrammas.