Če se ukvarjate s spletom, je verjetno, da ste že slišali za Bootstrap. Če do zdaj še vedno ne veste, kaj je Bootstrap, ali pa želite samo najti vadnico Bootstrap za začetnike, da dobite boljši pregled nad tem, kaj je in kaj najbolje počne, ste prišli na pravo mesto.
Bootstrap je zmogljiv komplet orodij - zbirka orodij HTML, CSS in JavaScript za ustvarjanje in ustvarjanje spletnih strani in spletnih aplikacij. Gre za brezplačen in odprtokodni projekt, ki ga gosti GitHub in prvotno ustvaril (in za) Twitter .
Zakaj se torej učiti Boostrapa?
Po odprtokodni izdaji leta 2011 je Bootstrap postal zelo hiter in ne brez razloga. Spletni oblikovalci in splet razvijalci, kot je Bootstrap ker je prilagodljiv in enostaven za delo. Njegove glavne prednosti so v tem, da se odziva po zasnovi, ohranja široko združljivost brskalnikov, ponuja dosledno zasnovo z uporabo sestavnih delov, ki jih je mogoče ponovno uporabiti, in je zelo enostaven za uporabo in hiter za učenje. Ponuja bogato razširljivost z uporabo JavaScript-a, z vgrajeno podporo za vtičnike jQuery in programskim API-jem JavaScript. Bootstrap se lahko uporablja s katerim koli IDE-jem ali urejevalnikom ter katero koli tehnologijo in jezikom na strani strežnika, od ASP.NET do PHP do Ruby on Rails.
zagon spletnega strežnika na Raspberry Pi
Z Bootstrapom, spletni razvijalci se lahko osredotoči na razvojno delo, ne da bi skrbel za oblikovanje, in hitro ustvari in zažene lepo spletno stran. Nasprotno pa daje spletnim oblikovalcem trdne temelje za ustvarjanje zanimivih tem Bootstrap.
Uvod v osnove Bootstrapa
Bootstrap je na voljo v dveh oblikah; kot vnaprej prevedena različica in kot različica izvorne kode. Različica izvorne kode uporablja Manj Predprocesor CSS, če pa ste bolj navdušeni nad Sassom, obstaja uradno pristanišče Sass v Bootstrapu na voljo tudi. Za lažjo uporabo predpon dobaviteljev CSS uporablja Bootstrap Autoprefixer .
Različica izvorne kode vsebuje izvorno kodo slogov, napisano v jeziku Less (ali Sass), vsem JavaScriptom in spremni dokumentaciji. To omogoča ambicioznejšim oblikovalcem in razvijalcem, da po lastni želji spremenijo in prilagodijo vse predvidene sloge ter ustvarijo svojo različico Bootstrapa. Če pa Less (ali Sass) ne poznate ali pa vas sprememba izvorne kode preprosto ne zanima, ne skrbite. Lahko uporabite samo vnaprej sestavljeni CSS iz vanilije. Vse sloge je mogoče pozneje preglasiti z uporabo slogov po meri.
Struktura datoteke
Osredotočili se bomo na vnaprej pripravljeno različico, ki jo lahko prenesete tukaj . Ko prenesete zip arhiv in ga stisnete, je osnovna struktura datotek videti tako:
bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2 Struktura Bootstrapa je precej preprosta in samoumevna. Vključuje vnaprej prevedene datoteke, ki omogočajo hitro uporabo v katerem koli spletnem projektu. Poleg prevedenih in pomanjšanih datotek CSS in JS vključuje tudi pisave iz Glifikoni in neobvezna začetna tema Bootstrap.
To strukturo je mogoče enostavno vključiti v strukturo datotek vašega projekta, tako da datoteke Bootstrap preprosto vključite natanko tako, kot izhajajo iz arhiva zip, ali če vaš projekt bolj ustreza, lahko te datoteke prerazporedite in postavite kamor koli želite. Prepričajte se, da je mapa pisav Glyphicons na isti ravni kot mapa CSS.
Osnovna predloga Bootstrap HTML
Osnovna predloga Bootstrap HTML bi morala izgledati nekako takole:
Bootstrap Template Pomembno je, da kateri koli HTML začnete z izjavo HTML 5 Doctype, da brskalniki vedo, kakšen dokument lahko pričakujejo. Glava vsebuje tri pomembne oznake, ki jih je treba najprej deklarirati, po njih pa je treba dodati vse dodatne oznake glave. Če želite podpirati starejše brskalnike, kot je IE8, lahko tudi vključite HTML 5 šim v glavi, kar bo omogočilo uporabo elementov HTML5 v starejših brskalnikih, in Respond.js , ki bo v starih različicah Internet Explorerja večkrat izpolnil CSS3 Media Queries.
... Čeprav to ni zelo pomembno, če ciljate samo na sodobne brskalnike.
Datoteke JavaScript se dodajo na konec telesa, da se spletna stran vidno naloži, preden se izvede kateri koli JavaScript. jQuery je potreben za vtičnike Bootstrap in se mora naložiti pred bootstrap.js Če ne uporabljate nobene interaktivne funkcije Bootstrapa, lahko te datoteke iz vira tudi izpustite.
To je najmanjši minimum, ki je potreben za osnovno postavitev Bootstrapa. Če ste razvijalec, si boste verjetno želeli ogledati nekaj naprednejših primerov na Stran s primeri Bootstrapa . Če ste oblikovalec ali iščete samo navdih, Bootstrap Expo prikazuje spletna mesta, ki so bila zgrajena z uporabo Bootstrapa. Kot bomo videli kasneje, lahko vsak del Bootstrapa enostavno prilagodite v CSS. Če pa to ni vaša stvar in iščete nekoliko drugačen videz in občutek predpakiranih tem Bootstrap, je na voljo veliko brezplačnih, odprtokodnih in premium tem iz virov, kot je Bootswatch in WrapBootstrap .
Predloge za zagon in komponente uporabniškega vmesnika
Bootstrap je priložen osnovnim predlogam za oblikovanje HTML in CSS, ki vključujejo številne pogoste komponente uporabniškega vmesnika. Sem spadajo tipografija, tabele, obrazci, gumbi, glifikoni, spustna menija, gumbi in vhodne skupine, navigacija, paginacija, nalepke in značke, opozorila, vrstice napredka, modali, zavihki, harmonike, vrtiljaki in mnogi drugi.
Mnogi od njih uporabljajo razširitve JavaScript in vtičnike jQuery.
Te predloge Bootstrap so na voljo kot dobro razčlenjeni razredi CSS, ki jih lahko uporabite za svoj HTML, da dosežete različne učinke. Zaradi tega je uporaba Bootstrapa zelo priročna. Z uporabo semantičnih imen razredov, kot so .success, .warning in .info, te komponente je enostavno ponovno uporabiti in razširiti. Toda medtem ko Bootstrap uporablja opisna imena razredov, ki imajo pomen, pri podrobnostih izvedbe to ni specifično. Vse razrede je mogoče preglasiti s slogom in barvo CSS po meri, pomen pouka pa bo ostal enak.
načela opredelitve poudarka oblikovanja
Mrežni sistem Bootstrap
Preden se bolj poglobimo v komponente Bootstrap in predloge za oblikovanje, je pomembno omeniti eno glavnih značilnosti, ki jo je Bootstrap predstavil v različici 3: a mobilni dizajn filozofijo, kar je povzročilo Bootstrap, ki se odziva po zasnovi. Končni rezultat je, da Bootstrap enostavno in učinkovito prilagaja z eno kodo, od telefonov, tabličnih računalnikov do namiznih računalnikov.
Ta odzivnost je dosežena z uporabo fluidnega mrežnega sistema Bootstrap, ki ga lahko uporabimo za ustrezno prilagoditev do 12 stolpcev glede na velikost naprave ali vidnega polja. Mreže zagotavljajo strukturo postavitve, ki določa vodoravne in navpične smernice za urejanje vsebine in uveljavljanje robov. Mreže ponujajo tudi intuitivno strukturo za gledalce, saj je enostavno slediti toku vsebine od leve proti desni ali od desne proti levi, ki se premika po strani. Pred mrežami in preden je bil CSS tako močan, so postavitve na osnovi mreže dosegali z uporabo tabel, kjer bi bila vsebina razporejena znotraj celic tabele. Ko je CSS postajal bolj zrel, so se začeli pojavljati številni okviri CSS za mrežne postavitve. Tej vključujejo YUI mreže , 960 GS in načrt , poimenovati jih nekaj.
Če želite uporabiti mrežni sistem Bootstrap, upoštevati je treba nekaj pravil . Elementi mrežnih stolpcev so nameščeni znotraj elementov vrstic, ki ustvarjajo vodoravne skupine stolpcev. Na strani lahko imate toliko vrstic, kolikor želite, stolpci pa morajo biti neposredni podrejeni vrstic. V polni vrstici bodo širine stolpcev poljubne kombinacije, ki seštejejo do 12, vendar ni obvezno uporabiti vseh 12 razpoložljivih stolpcev.
Vrstice je treba postaviti v ovoj s postavitvijo fiksne širine, ki ima .container razreda in širine 1170px, ali v ovoju postavitve celotne širine, ki ima .container-fluid razreda, ki omogoča odzivno vedenje v tej vrstici.
kaj je funkcionalno programiranje javascript
Mrežni sistem Bootstrap ima štiri razrede razredov: xs za telefone (<768px), sm za tablete (≥768px), md za namizja (≥992 px) in lg za večja namizja (≥1200px). Ti v bistvu določajo velikosti, pri katerih se stolpci zrušijo ali razširijo vodoravno. Razredi razredov se lahko uporabljajo v kateri koli kombinaciji, da se dobijo dinamične in prilagodljive postavitve.
Če želimo na primer dobiti dve vrstici, eno z dvema stolpcema in eno s štirimi, lahko zapišemo:
First column Second column First column Second column Third column Fourth column Lahko uporabimo tudi mešane širine stolpcev:
Wider column Smaller column Stolpce lahko celo premikamo z uporabo odmika, na primer za ustvarjanje bolj ozke in centrirane vsebine:
Centered column Stolpci se lahko ugnezdijo. Stolpcev je lahko manj kot 12, in kot že omenjeno, lahko z uporabo .container izberemo stolpce s fiksno širino ali polno širino. ali .container-fluid ovitke.
Parent fixed-width column Nested column Nested column Fluid .. .. and full-width .. .. example Če združimo različne stopnje razredov, bomo v pogledih na mobilnih napravah in namizjih dobili različen videz. V spodnjem primeru bodo na namizju v vrstici 4 stolpci, na mobilnih napravah pa bodo imeli polno širino in zloženi drug na drugega.
.col-xs-12 .col-md-3 .col-xs-12 .col-md-3 .col-xs-12 .col-md-3 .col-xs-12 .col-md-3 
Možno je onemogoči odzivnost strani popolnoma. To bo v bistvu onemogočilo vidike Bootstrapa z 'mobilnega mesta'. Upoštevajte le, da če onemogočite odzivnost, nobena komponenta s fiksno širino, na primer fiksna navbar, ne bo vidna, ko bo okno za ogled ožje od vsebine strani. Za neodzivni vsebnik to pomeni širino 970 slikovnih pik. Tudi v tem primeru se vrstice za krmarjenje ne bodo sesedale v pogledih za mobilne naprave, kot je opisano kasneje.
To so le osnovni primeri. Če si želite ogledati celoten potencial mrež, si oglejte Dokumentacija podjetja Bootstrap's Grids .
Bootstrap tipografija
Začetni razvijalci pogosto domnevajo, da bo njihov čisti in ne-oblikovani HTML videti enako v vseh brskalnikih. Na žalost ima vsak brskalnik svoj privzeti slog 'uporabniški agent', ki se uporablja za HTML, in noben brskalnik nima enakih privzetih vrednosti. Na primer, velikosti pisav naslovov v brskalnikih niso dosledne, nekateri neurejeni in urejeni seznami imajo leve robove, drugi pa levo oblazinjenje, brskalniki uporabijo obrobe in oblazinjenje po meri v telesu HTML in celo gumbi so v brskalnikih različno upodobljeni. Za odpravo vseh teh nedoslednosti so se rodila različna pravila za »ponastavitev« CSS, ki opredeljujejo dosledne privzete privzete nastavitve.
najboljše prakse oblikovanja tabele baze podatkov
Bootstrap poleg čiste ponastavitve CSS na mizo prinese še nekaj dobrot. Prihaja z normalizirati.css , alternativa ponastavitvi CSS, pripravljena za HTML5, in ima tudi nekaj lastno dobro zasnovanih privzetih nastavitev. Na primer, Bootstrap nastavi globalno privzeto font-size do 14 slikovnih pik, z višino črte 1,428. Privzeta pisava se spremeni v Helvetica / Arial, s sans serif nadomestno. Vsi ti slogi se uporabljajo za vse odstavke z dodatkom (odstavki) prejmejo spodnji rob polovice svoje izračunane višine črte (privzeto 10 slikovnih pik). Poleg teh privzetih nastavitev obstajajo tudi prilagodljivi slogi za standardne oznake HTML, ki besedilu zagotavljajo večjo skladnost, na primer poudarjeno besedilo (), izbrisano besedilo (in), podčrtano besedilo (), majhno besedilo () in krepko besedilo ( ). Razredi poravnave pomagajo lažje razporediti vsebino na strani z uporabo .text-left, .text-center, .text-right, .text-justify in .text-nowrap razredih. Obstajajo tudi vnaprej določeni slogi za blokovne narekovaje ter neurejeni in razvrščeni seznam z vgrajenimi možnostmi, če jih le naštejemo. Če želite dobiti celoten seznam, pojdite na Stran za tipografijo Bootstrap .
Zanimiva stvar, ki jo omogoča tudi Bootstrap, je ta, da lahko na primer uporabite naslove naslovov z uporabo ali .h1 razred. Slednja se bo ujemala s slogom naslovu, vendar bo omogočilo, da bo besedilo prikazano v vrstici.
Obrazci
Obrazci so skozi leta zelo napredovali in danes je uporaba spletnega obrazca ena najpogostejših dejavnosti, ki se izvajajo med brskanjem po spletu. Medtem ko je HTML5 predstavil številne nove atribute obrazcev, vrste vnosa in druge pomožne elemente, brskalniki vizualno niso veliko izboljšali obrazcev. To je eno področje, na katerem Bootstrap resnično sije, saj je poravnava in oblikovanje nalepk in vnosov, preverjanje obrazcev in prikazovanje sporočil o napakah lahko težavno brez pomoči.
Najprej Bootstrap nastavi vse besedilne vhodne elemente, na primer ,, in, na 100% širino nadrejenega elementa obrazca. Omogoča vam tudi izbiro med vrstnimi obrazci, ki bodo v isti vrstici upodobili več nalepk in vnosnih polj z uporabo .form-inline razreda ali vodoravne obrazce, ki uporabljajo mreže za poravnavo vsakega vnosa v svoji vrstici z uporabo .form-horizontal razred. Če morate namesto polja za vnos namesto navadnega polja postaviti navadno besedilo, mu lahko .form-control-static razred, da se ujema z vizualnim videzom obrazca.
Mogoče največja lastnost, ki jo Bootstrap prinese obrazcem, so slogi preverjanja veljavnosti za napake, opozorila in stanja uspešnosti. Ti se lahko uporabijo z .has-warning, .has-error in .has-success razredov. Če to združimo z ikonami, ki jih lahko namestimo v vhodne obrazce, lahko dobimo hitre in učinkovite učinke preverjanja obrazca, tudi brez uporabe besedilnega sporočila o napaki.
Delček kode za sledenje bo ustvaril vnosno polje z znakom @, ki označuje, da iščemo e-pošto, in z opozorilno ikono in rumenim obrisom, ki označuje, da je v vnosnem polju nekaj narobe.
Email address input field with warning @ (warning) 
Spet smo tukaj le opraskali površino. Za več primerov si oglejte Dokumentacija obrazcev Bootstrap .
Slike in ikone
Slike v Bootstrapu lahko naredite odzivne tako, da jim preprosto .img-responsive razred. To bo veljalo max-width:100%; height:auto; in display:block; na sliko, tako da se lestvica spremeni v nadrejeni element.
Poleg tega, da so slike odzivne, lahko enostavno dodamo različne učinke. Na primer, zaobljeni vogali se uporabijo z .img-rounded razreda, sliko pa lahko oblikujemo v krog z uporabo .img-circle ali v sličico z uporabo .img-thumbnail razred.
Bootstrap je v paketu z več kot 260 glifi v obliki pisave iz Glyphicons Halflings nastavite. Jan Kovařík, avtor in oblikovalec Glyphicons, jih je dal na voljo za Bootstrap brezplačno in pod isto licenco kot Bootstrap, kar je super. Pisava ikone imajo veliko prednosti pred navadnimi rastrskimi slikami, velika pa je ta, da so prilagodljive. Prav tako jih je mogoče enostavno prilagoditi samo s CSS-jem, zato je manipuliranje z velikostjo ali barvo ali celo dodajanje sence lahkoten vetrič.
Gumbi, skupine gumbov in spustna menija gumbov
Gumbi so ena izmed stvari, ki jih vsak brskalnik popolnoma drugače upodobi. Če želite imeti dosledno zasnovo v vseh brskalnikih, je to potencialno velik problem. Na srečo ima Bootstrap elegantno rešitev za gumbi tudi. In poleg tega, da so dosledni, prinaša veliko različic za igranje. Uporabite lahko .btn razred do andelementi. Ti lahko združite vrsto gumbov skupaj v eno vrstico z uporabo .btn-group razred na staršu. Z malo pomoči JavaScript lahko ustvarjate vedenja v slogu radia in potrditvenega polja na gumbih. Lahko pa spremenite gumbe spustnih menijev tako da ga postavite v .btn-group in zagotovite pravilno označevanje neurejenega seznama elementov v meniju.
Navbari
Navigacijska vrstica ali navbar je komponenta zagonskega traku, zasnovana posebej za izdelavo primarnega menija za krmarjenje na spletnem mestu. Na velikih zaslonih je prikazan vodoravno, na majhnih in mobilnih zaslonih (tisti pod 768px) pa se spremeni v Spustni meni 'hamburger' . Pod pokrovom je navbar v neurejenem vrstnem seznamu elementov menija z dodatnimi elementi HTML, ki so dodani po želji. Med možnimi dodatki so blagovna znamka (besedilo ali logotip), elementi obrazca, kot je iskalna vrstica, in spustni meniji. Izbirate lahko med dvema slogoma: svetlo in temno, obrnjeno. Elemente v vrstici za krmarjenje lahko poravnate levo ali desno tako, da uporabite .navbar-left ali .navbar-right razredov.
Navbarji imajo lahko 4 različna vedenja položaja. The privzeti plavajoči položaj ima med seboj vmesni prostor; statična navbar v celotni širini se pomakne stran, ko se uporabnik pomakne navzdol po strani, in fiksna navbar , ki je lahko na vrhu ali na dnu okna, je vedno viden na strani, ne glede na to, kam se je uporabnik pomaknil.
Zaključek
To zajema le nekaj odličnih komponent Bootstrap, ki postavlja Bootstrap pred podobne okvire, knjižnice in komplete orodij. Z Bootstrapom je potrebnih le nekaj preprostih razredov CSS, da lahko hitro in enostavno ustvarite popolnoma odziven in lep sprednji del. To je odlično izhodišče za vaš naslednji velik projekt ali zagon.
kako uporabiti react native
Razumevanje osnov
Kaj je Bootstrap?
Bootstrap je močan front-end okvir, ki se uporablja za ustvarjanje sodobnih spletnih mest in spletnih aplikacij. Je odprtokodna in brezplačna, vendar ima številne predloge HTML in CSS za elemente vmesnika UI, kot so gumbi in obrazci. Bootstrap podpira tudi razširitve JavaScript.
Zakaj potrebujemo Bootstrap?
Programski inženirji uporabljajo Bootstrap iz več različnih razlogov. Enostavno ga je nastaviti in obvladati, vsebuje veliko komponent, dober mrežni sistem, oblikovanje številnih elementov HTML, od tipografije do gumbov, pa tudi podporo vtičnikov JavaScript, zaradi česar je še bolj prilagodljiv.
Kakšne namene ima Bootstrap?
Bootstrap je odličen za ustvarjanje postavitev, saj je njegov odzivni CSS zasnovan tako, da ustreza različnim napravam. Uporablja se lahko za zagotavljanje doslednosti, odpravljanje težav med brskalniki itd.
Kaj je tema Bootstrap?
Tema Bootstrap je paket, ki vsebuje kodo CSS, HTML in JavaScript, ki se uporablja za oblikovanje. Teme zagonskega trapa vsebujejo tudi različne komponente uporabniškega vmesnika in postavitve strani, ki jih je mogoče uporabiti za ustvarjanje spletnih mest. Zanje si lahko predstavljate predloge spletnih mest, ustvarjene z mislijo na Bootstrap.
