Uporaba kontejnerskega zagona bo uporabniku omogočila zmogljivo osnovno mesto. In kar je resnično impresivno, je širok razpon komponent, ki jih lahko dodate na spletno mesto. Ker ima Bootstrap že vgrajen CSS in javascript, so razvite komponente in funkcionalne. Seveda jih lahko uporabnik še dodatno uredi in prilagodi stran po vaših željah.
Grid Princip
Ta nabor orodij za ustvarjanje spletnih strani in spletnih aplikacij je zasnovan na mreži, ki omogoča pravilno skaliranje komponent za gledanje na različnih zaslonih. Omrežni sistem kontejnerskega zagona je sestavljen iz posod, vrstic in stolpcev, ki se uporabljajo za določeno postavitev spletnega mesta. Bootstrap vsebniki se uporabljajo za določanje širine postavitve. Elementi se dodajo v vsebnike in vplivajo na njegovo širino. Je element z class = "container" in vpliva na vse elemente v njem.
Zabojniki imajo 15 slikovnih pik, ki mehča pogled od konca strani. Vrstice in stolpci se dodajo v vsebnike s fiksno privzeto širino vsebine Bootstrap Container, ki se razlikuje glede na velikost pregledovalnika. Širina naprave je prikazana v spodnji tabeli:
Ogled širine naprave
Širina vsebnika
Manj kot 768 px 18)
Auto
768px - 991 px
750 px
) 992px - 119px
970 px
1200 px in višje
1170 px
Pravila mreže:
Stolpci morajo bitineposredni podrejeni element linije.
Linije se uporabljajo samo za shranjevanje stolpcev in nič drugega.
Linije morajo biti nameščene znotraj posode.
Ta pravila so zelo pomembna. Vrstice in stolpci vedno delujejo skupaj in uporabnik ne sme uporabiti enega brez drugega.
Sprva se zdi, da je to zapleteno, vendar je res preprosto, razumeti morate samo, kako deluje Grid. Če uporabniki ne želijo spreminjati vsebine v fiksni širini, lahko uporabite class = "container-fluid" namesto class = "container". To bo povzročilo, da se vsebniki vedno ujemajo z vsebnikom Bootstrap na celotno širino zaslona in spremenijo velikost fiksne širine. Grid sistem omogoča do 12 stolpcev na stran. Uporabljajo se lahko ločeno ali skupaj. Če želite združiti stolpce skupaj, morate ustvariti vrstico, za katero dodate div z razredom = "vrstica", ki vsebuje kodo stolpca.
Nastavitev intervala
Če želite imeti čisto obliko, morate najprej razumeti, kako Bootstrap nastavi interval. Za vse obrazce morate postaviti oznako in kontrolni element v class = "form-group". Kontrolniki in nalepke imajo vmesni slog. Obvezno morajo biti v svojem razredu.
Razred za nadzor oblike nastavi širino vsebnika Bootstrap na 100% in ga prisili pokriti širino obrazca in ga spremeniti s pomočjo okna. Ta lastnost se uporablja za vnos in izbiranje kontrolnikov. Tako bo izbrani kontrolnik formatiran z vklopomnadzor nad obrazcem in bo izgledal kot možnost z razredom za nadzor oblike ali brez njega, upravljanje vnosov pa bo oblikovano z dodatkom obrazca za nadzor.
Krmilni elementi
Krmilni elementi, kot so besedilna polja, potrditvena polja, so deli, ki jih lahko enostavno dodate v obrazec. Prijava so polja, v katerih lahko uporabnik vnese besedilo. To je osnovno načelo za vnos kontejnerskega zagona z uporabo HTML5 atributa besedila. Tip razglasi videz vhoda. Polnilo določa besedilo, ki bo prikazano v vnosnem polju. Te tipe lahko deklariramo z dodajanjem vhodu. Če želite dodati e-pošto, jo spremenite v type = "email". Upoštevati je treba, da morate vrsto vnosa omogočiti, da je kontrolnik pravilno formatiran. Nadzor besedilnega območja je področje, ki vam omogoča uporabo velike količine besedila, na primer za odsek komentarjev. Ko dodate besedilno območje, lahko prilagodite velikost tako, da prijavite, koliko vrstic želite zajeti. Ker je Bootstrap vsebnika zgrajen na vrsticah in stolpcih, lahko besedilno območje povečate ali zmanjšate tako, da povečate ali zmanjšate število vrstic. Potrditvena polja omogočajo uporabnikom, da izberejo več možnosti. Privzeto so potrditvena polja prikazana navpično. Lahko pa spremenite potrditvena polja, da se prikažejo vodoravno, tako da spremenite tip type = "checkbox-inline".
Inline pisave so konfigurirane drugače kot osnovne. V vgrajenem elementu zastavice je razred dodeljen = "potrditveno polje-inline". Če pa pogledate osnovno kontrolno kodo, lahko viditeda je class = "checkbox" deklariran v elementu, ne v elementu. Stikalo je podobno kljukici. Hkrati se lahko izbere samo eno stikalo, medtem ko imajo lahko zastave več izbir. Kot pri zastavah so navpična stikala privzeto prikazana, čeprav lahko kodo spremenite tudi na zaslon in vodoravno.
Vrste nakladalnih oblik
Obstaja več vrst oblik: osnovni, vgrajeni in horizontalni. Vsak od njih se razlikuje na svoj način. Vdelani imajo komponente, imenovane kontrolni elementi, poravnane navpično. Za horizontalne oblike so kontrole nastavljene vodoravno. Glavni obrazec prihaja iz sloga globalne postavitve. Če želite ustvariti osnovni obrazec, morate v obliki HTML ustvariti obrazec z elementom
in nato dodati oznake Bootstrap
. Drugi dve vrsti oblik uporabljata razrede, da ju razlikujeta. Če razred ni podan, privzeti obrazec ustreza osnovnemu. Za izdelavo vgrajenega obrazca morate dodati element class = "form-inline"
. Samodejno prilagodi krmilne elemente oblike navpično. Kot v vrstnem redu je horizontalna oblika dobljena z dodajanjem razreda = "oblika-vodoravno" elementu. Samodejno prilagodi kontrole vodoravno.
Nastavitev vrstic in stolpcev
Vrstice pokrivajo širino zagonskega zaboja za zabojnike. Imajo negativno 15-pikselsko zalogo na koncu, nameščeno s posodo. To je posledica dejstva, da ima vsak od njih svoj 15-pixelzaloge, ki nadomešča oznako zabojnika. Stolpci, ki so poravnani drug ob drugem, bodo imeli 15-kratni rob, kar bo vodilo do 30-pikselnega roba med dvema stolpcema.
Vrstice imajo registracijo -15 px, ki prekliče dodajanje 15 px vsebnika. Vsebina v stolpcu bo odvisna od polja 15 pikslov stolpca. Stolpci imajo registracijo 15 slikovnih pik. Stolpci ob drugem bodo imeli 15-pikselni zamik, kar bo imelo 30 px pufra.
Zamenjajte predpono in številko stolpca s prevladujočo velikostjo in številom stolpcev. Predpone določajo, katera naprava je dodeljena stolpcu Bootstrap 4 in višini vsebnika. Xs je na primer zasnovan za majhne zaslone, kot so telefoni.
Predpona
Za
xs
= 1200 px (notesniki )
Če je stolpec podan s predpono za manjšo napravo, bo prikazan na podoben način na večjih napravah. Z drugimi besedami, stolpec, ki je definiran kot sm, bo deloval za naprave z velikostjo tablet ali več. Prednosti uporabe stolpcev:
Ustvarite vodoravne odseke iz prikaza.
Lahko imajo različne širine.
Lahko se razlikuje po širini pri različnih širinah zaslona.
Možnost zlaganja vodoravno od leve proti desni, nato navpično navzgor in navzdol.
Lahko spremenijo položaj (ureditev) bratov in sester v isti liniji.
Imajo enako višino kot drugi bratje in sestre v eni vrstici.
Lahko "raste" ali "stisne" v širino.
Lahko samodejno "zavije" aliPo potrebi "odcedite" ali pri različnih širinah zaslona.
Lahko vsebuje več vrst in vrst. Vstavljanje stolpcev__.
Posodobitev strukture css
Po mnogih letih čakanja je bil Bootstrap 4 izdan januarja 2018. Bootstrap je bila prva razširjena struktura css. Nova različica programa temelji na tej uspešni osnovi in ima številne izboljšave, ki omogočajo lažjo uporabo omrežij. Bootstrap 4 je OG ustreznih postavitev. Nova konfiguracijska datoteka angular.json ima popolnoma drugačno strukturo kot originalni angular-cli.json. Če se uporabnik namerava osredotočiti na uporabo mreže za ustvarjanje prožnih postavitev v aplikacijah Angular, mora uporabiti samo pakete bootstrap-grid in bootstrap-reboot. Datoteke Bootstrap kontejnerskega CSS lahko dodate neposredno v lastnost »styles« angular.json. Uvažanje mreže v glavno datoteko style.scss ima eno pomembno prednost pred uvozom v datoteko angular.json. Omogoča vam spreminjanje katere koli spremenljivke, ki jo uporabljajo definicije s stilom Bootstrap. V praksi je lahko koristno ustvariti datoteko styles-variables.scss poleg styles.scss v mapi src z občutljivimi točkami prelomov, kot je definirano v Bootstrapu privzeto. Uporaba styles-variables.scss vam omogoča, da preglasite privzeto mrežo in uveljavite svoje lastne sloge po meri. Zato jo lahko uvozite v prvi vrstici - styles.scss, ki se bo uporabljala z zagonskim trakom, pa tudi v kateri koli drugi datoteki slog komponente za dosledno izvajanje selektivnega odgovora.
Navodila za začetnike
Bootstrap je zelo uporabna vmesniška platforma zahitrejši in lažji spletni razvoj. Uporabniku ne bo treba skrbeti, da bodo imeli praktične izkušnje, ki bodo imeli zmogljiv vmesnik pri uporabi. Priročnik za zaganjalnika Bootstrap zajema naslednje postopke, ki zahtevajo:
Dodajte podporo IE8 za HTML5 in multimedijske poizvedbe.
Dodajte navigacijsko vrstico.
Dodajte vsebino na stran vsebnika.
Dodajte naslov.
Dodajte tabelo.
Dodajte obrazec znotraj tabele.
Glifikonu dodajte gumb za zagon.
Dodajte okno z dobrim iskanjem.
Demo končnega koda v živo.
Spletni viri.
Naslednji razdelki bodo postali korak za korakom za prvi razvoj spletnih strani z uporabo Bootstrap.
Prenesi CDN in HTML5
Bootstrap lahko uporabljate na več spletnih straneh. Ena izmed njih je uporaba CDN-ja ali omrežja za dostavo vsebine. Uporaba zagonskega CD-ja pomeni, da uporabnik ne bo prenesel in shranil začetnih zagonskih datotek na strežniku ali lokalnem računalniku. To naredite tako, da ustvarite novo datoteko index.html. Odprite datoteko, vnesite naslednjo kodo in jo shranite. Če želi uporabnik uporabiti svojo kopijo, napišite:
Preverite, ali je datoteka prenesena. Nato jo postavite v isti imenik kot index.html, na primer v mapo "bootstrap-4". jQuery je potreben za funkcijo javascript Bootstrap. Če želite uporabiti svojo kopijo jQuery:
Preden se prepričate, da je jQuery naložen in nameščen v istem imeniku kot je index.html, je ime datoteke jQuery "jquery-300.min.js". Tekočina za kontejnerje je glavni element s 100% širino lastne postavitve, izvaja stranske vdolbine za oblikovanje kolon. Tekočina Bootstrap Container ustvarja polno širino, kot je tekočina za posodo, na manjših napravah.
javascript in podpora za IE8
Funkcije zagonskega traku, kot je navigacijska vrstica, zahtevajo javascript bootstrap datoteko. To naredite tako, da za kodo prejšnjega oddelka postavite naslednjo kodo:
Dodati morate tudi podporo za IE8 za HTML5 in medijske poizvedbe. Bootstrap je osnova, ki je povezana z mobilno tehnologijo in se zato odziva na različne naprave in velikosti zaslona. Navigacijske plošče so zelo kul. Uporabniki ne bodo iskali podatkov na spletnem mestu, če je vsebnik Bootstrap pravilno uporabljen. To naredite tako, da v oznako postavite naslednjo kodo.
Domov
Vse
Demo
Kontakt
Oznaka DIV bo vsebovala spletno stran. To je pomembno, ker določa širino strani z vsebino. Ne bo raztreseno, če obiskovalec uporablja velik velikost zaslona. Če želite dodati vsebinski vsebnik, postavite naslednjo kodo v kodo prejšnjega razdelka.
Izdelava glave tabele
Naslov je pomemben, ker govori uporabniku, na kateri strani se nahaja. Naslednjo kodo postavite med oznake "kontejner div" v prejšnjem razdelku.
Vzorčna stran z obliko
V tem primeru je tabela, v katerishranite elemente obrazca, kot je polje z besedilom. Namizje izgleda dobro, nima visečega učinka in se odziva na dejanja uporabnikov. To naredite tako, da v prejšnjem razdelku postavite naslednjo kodo.
)
Seznam
)
Primer tega obrazca bo vseboval več besedilnih polj, območje z besedilom in pomožno polje seznamu. V ta namen nadomestite kodo prejšnjega razdelka z naslednjim.
)
Naslov
Seznam
)
Dodajanje gumba GLYPHICON
Glifikon je knjižnica enobarvnih ikon in simbolov, ustvarjenih s poudarkom na preprostosti in priročni orientaciji. Ikone gumbov lepo izgledajo, knjižnica pa uporabniku sporoča, za kaj je gumb namenjen. Ikone in barvne tipke lahko enostavno označijo, kaj naredi gumb v spletni aplikaciji. To naredite tako, da med "zadnjo oznako" prejšnjega razdelka postavite naslednjo kodo.
Dodate lahko tudi opombe z uporabo zagonskega zapisa tako, da pred odpiranjem oznake dev v prejšnjem razdelku vstavite naslednjo kodo.
Glave gor!codeofaninja.com!
Če uporabnik naloži kodo, bo poleg prvotne prejel naslednje sporočilo:
Artikel
Opis
Index-cdn.html
UporabeBootstrap struktura v CDN. Deloval bo, če je vaš računalnik na spletu.
Index-local.html
Uporablja preneseno strukturo brez CDN. Deluje na lokalnem gostitelju. V zagonskem traku 4 bo slika ozadja velikosti vsebnika delovala tudi, če je računalnik izklopljen.
Očitno je, da Bootstrap uporabniku ponuja številna odlična orodja, ki pospešujejo razvoj programskih aplikacij. Pri oblikovanju in kodiranju čudnega uporabniškega vmesnika prihranite več ur in celo dni. Programske komponente in vtičniki so najbolj podrobno dokumentirani, napolnjeni z živimi primeri in kodnimi bloki za uporabnika. Bootstrap je zelo spodobno orodje za razvoj in oblikovanje mobilnih spletnih strani, ki vam omogoča, da najprej oblikujete strukturo, kasneje pa tudi pisave, barvo in slog. Moraš nekaj časa preživeti v učenju značilnosti metode in jo najbolje uporabiti.
