Pred prenosom se prepričajte, da imate urejevalnik kode (priporočamo Sublime Text 3) in nekaj znanja o HTML in CSS. Tukaj se ne bomo dotikali izvornih datotek, vendar jih lahko vedno prenesete in preučite sami. Osredotočili se bomo na začetek uporabe prevedenih datotek Bootstrap.

Nalaganje prevedenih datotek

Najhitrejši način za začetek: pridobite prevedene in pomanjšane različice naših CSS, JS in slik. Ni dokumentov ali izvornih datotek.

2. Struktura datoteke

V prenesenih datotekah boste našli naslednjo strukturo in vsebino, ki sta logično razvrščeni po skupnih lastnostih in vsebujeta tako pomanjšane kot prevedene različice.

Po prenosu razpakirajte stisnjeno mapo, da vidite strukturo (prevedenega) Bootstrapa. Moralo bi biti nekaj takega:

bootstrap / +-- css / ¦ +-- bootstrap. css ¦ +-- bootstrap. min. css +-- js / ¦ +-- bootstrap. js ¦ +-- bootstrap. min. js +-- img / ¦ +-- glyphicons - halflings . png ¦ +-- glifikoni - polovičarji - beli . png L-- PREBERI ME. md

To je osnovna oblika Bootstrapa: prevedene datoteke za hitro in enostavno uporabo v skoraj vseh spletnih projektih. Ponujamo vam preveden CSS in JS (bootstrap.*) ter tudi preveden in pomanjšan CSS in JS (bootstrap.min.*). Slikovne datoteke so stisnjene z uporabo ImageOptima, Mac aplikacije za stiskanje slik v PNG.

Upoštevajte, da vsi vtičniki JavaScript zahtevajo jQuery.

3. Kaj je vključeno

Bootstrap je opremljen s HTML, CSS in JS za vse vrste dela, vsi so navedeni v kategorijah, ki jih najdete na vrhu strani.

Odseki dokumenta Podprti elementi

Pogosti slogi telesa za ponastavitev vrste in ozadja, slogi povezav, mreža predlog in dva preprosta označevalna elementa.

Slogi CSS

Slogi za običajne elemente HTML: oblikovanje, koda, tabele, obrazci in gumbi. Vključuje tudi Glyphicons, odličen nabor ikon.

Komponente

Osnovni slogi za preproste komponente vmesnika: zavihki in gumbi, navigacijske vrstice, sporočila, glave strani itd.

vtičniki Javascript

Tako kot komponente so ti vtičniki Javascript interaktivne komponente za namige orodij, informacijske bloke, modalne komponente in drugo.

Seznam komponent

Komponente in vtičniki Javascript skupaj vsebujejo naslednje elemente vmesnika:

• Skupine gumbov
• Seznami spustnih gumbov
• Navigacijski zavihki, gumbi in seznami
• Navigacijska vrstica
• Bližnjice
• Značke
• Glave strani in element junaka
• Miniature
• Sporočila
• Indikatorji procesa
• Modalni elementi
• Spustni seznami
• Namigi orodij
• Informacijski bloki
• Element "Harmonika"
• Element vrtiljaka
• Vnos s tipkovnico naprej

4. Osnovna predloga HTML

Po kratkem uvodu se bomo osredotočili na uporabo Bootstrapa. Za to bomo uporabili osnovno predlogo HTML, ki vključuje vse elemente, navedene v .

Tako izgleda tipična datoteka HTML:

Predloga Bootstrap 101

Pozdravljen, svet!

Če želite narediti takšno predlogo Bootstrap, preprosto priložite ustrezne datoteke CSS in JS:

Predloga Bootstrap 101

Pozdravljen, svet!

In vse je pripravljeno! Če dodate ti dve datoteki, lahko razvijete spletno stran ali aplikacijo z uporabo Bootstrapa.

Zdravo! V tem članku vam bom povedal, kako namestiti in povezati ogrodje Bootstrap. Preberete lahko, kaj je Bootstrap.

Standardna namestitev okvirja

O standardni namestitvi sem že veliko povedal v prejšnjih člankih. Tukaj je vse preprosto. Pojdimo na uradno spletno stran getbootstrap.com, kliknemo na element Getting Started in izberemo prvo možnost. Tako prenesemo polno različico bootstrapa z vsemi komponentami js in css.

Bootstrap CDN je priložnost za povezavo ogrodja iz pomnilnika CDN brez prenosa njegovih datotek v vaš računalnik. Seveda v tem primeru ni govora o kakršni koli prilagoditvi.

Prilagajanje okvirja

Dejstvo pa je, da bootstrap privzeto vsebuje veliko komponent in nekatere od njih vam morda preprosto ne bodo uporabne pri razvoju določenega mesta. Na primer, načrtujete spletno trgovino. Morda ne boste potrebovali načinov in opisov orodij in morda ne boste potrebovali veliko komponent css. V tem primeru bi bilo pametno teh komponent ne vključiti v okvir.

Ali pa ustvarjate preprost blog. Recimo, da tam sploh ne potrebujete ničesar, tako da lahko pustite samo mrežo in nekaj najpomembnejših komponent.

Izbira samo tistega, kar potrebujete, je profesionalen pristop k ustvarjanju spletnih mest in uporabi Bootstrapa. Nestisnjena različica slogov CSS ogrodja v najnovejši različici privzeto tehta 143 kilobajtov. In skripti so večji od 60 kilobajtov. Da, če stisnete kodo, lahko zmanjšate težo za 20-40%, vendar datoteke še vedno ne bodo najlažje.

Če na primer onemogočite vse komponente in pustite samo mrežo (to se zelo pogosto naredi), bo teža css le 15-20 kilobajtov, v stisnjeni obliki pa še nekaj kilobajtov manj. Tako boste dosegli maksimalno hitrost in optimizacijo vašega projekta.

V redu, to je bila le teorija. Če želite prilagoditi okvir, obiščite isto uradno spletno mesto in pojdite na Prilagodi.

Izbira potrebnih komponent

Prvi korak tukaj je konfiguracija komponent, ki jih želite vključiti v svojo različico Bootstrapa. Začnimo s CSS:

Print Media Styles – medijske poizvedbe za tiskanje. Če ne nameravate tiskati strani spletnega mesta, ga lahko onemogočite.

Tipografija, koda, tabele, obrazci in gumbi so vse stvari, ki jih lahko sami oblikujete v CSS, če res želite. Seveda bo to trajalo nekaj časa, a če je zasnova vaših elementov zelo drugačna od tistega, kar okvir ponuja privzeto, lahko onemogočite vse te sloge CSS in jih napišete sami.

Mrežni sistem je pravzaprav mreža. Ne vidim smisla, da bi ga kdaj onemogočil, ker je to glavna moč ogrodja. Zahvaljujoč gridu lahko enostavno prilagodite predloge vsaki napravi, kar je danes v dobi mobilnega prometa izjemno pomembno. Pod nobenim pogojem ga ne izklopimo.

Odzivni pripomočki – prilagodljivi pripomočki, priporočam tudi, da jih nikoli ne onemogočite. O prilagodljivih pripomočkih bomo govorili v naslednjem članku, kjer si bomo podrobno ogledali mrežni sistem. To so razredi, ki vam omogočajo, da skrijete element ali ga naredite vidnega pri določeni širini zaslona. Zelo priročno in uporabno.

To so na primer stvari, kot so skupine seznamov, vrstice z gumbi, ikone, plošče, opozorila, označevanje strani, drobtinice itd. Prav tako lahko onemogočite pisavo ikone. To je vredno storiti v primeru, ko ikon na spletnem mestu sploh ne potrebujete ali pa povezujete drug niz. Pravzaprav bi morali sedeti in razmisliti, kaj od vseh predstavljenih komponent potrebujete in česa ne. Vsaka posamezna stran bo imela svoj nabor, saj ima vsaka drugačno obliko in funkcionalnost.

Komponente Javascript

To so spustni meniji, namigi orodij, modalna okna in drsniki. Če ničesar od tega ne potrebujete, ga izklopite. V nekaterih primerih lahko vse komponente res pridejo prav, ko ima vaše spletno mesto spustni meni, drsnik na glavni strani in modalna okna. V nekaterih primerih sta lahko uporabni največ 1-2 komponenti, potem ni treba podaljšati kode, onemogočiti nepotrebne komponente.

Vtičniki Jquery

Tukaj lahko onemogočite vtičnike knjižnice jquery, ki pomagajo komponentam javascript pravilno delovati. V skladu s tem, če na svojem spletnem mestu ne uporabljate drsnika, potem ne potrebujete vtičnika za ustvarjanje vrtiljakov, če ne potrebujete opisov orodij, onemogočite tooltips.js itd.

Vtičnik scrollspy spremlja položaj besedila in glede na to osvetli enega ali drugega elementa menija. Običajno je takšna funkcija potrebna na ciljnih straneh; na navadnih spletnih mestih je praktično še nisem videl. In tako naprej. Dobro poglejte, kaj potrebujete in česa ne.

Manj spremenljivk

Nato se bo pred vami odprla ogromna postavka, v kateri bo veliko podpostavk z nastavitvami za spremenljivke Manj. Tukaj lahko spremenite skoraj vse: barve, velikosti pisave, prelomne točke, število stolpcev v mreži, zamike itd.

Seveda morate za to poznati vsaj osnove Lessa ali pa vsaj intuitivno krmariti po teh obrazcih.

Na primer, če vidite spremenljivko @font-family-base, potem morate vsaj intuitivno razumeti, da je odgovorna za ime pisave, ki je osnovna pisava na spletnem mestu. No, spremenljivka @font-size-base nastavi osnovno velikost pisave. Privzeto je v zagonskem sistemu 14 slikovnih pik.

Vsa ta polja lahko urejate. Samo spremenite 14 v 20 in zdaj lahko prenesete okvir, v katerem je privzeta velikost pisave 20 slikovnih pik. V skladu s tem lahko takoj prilagodite velikost naslovov itd.

Postavitev mreže

Zelo zanimive so nam tudi nastavitve mrežnega sistema, tukaj so:

Kot lahko vidite, lahko v nekaj sekundah spremenite število stolpcev in širino zamikov med njimi. Spremenljivka grid-float-breakpoint nastavi točko, na kateri se mobilni meni strne v ikono.

Če spremenite vrednost, na primer na @screen-md-min, potem že pri širini 991 slikovnih pik ali manj pride do strnjevanja. To spremenljivko lahko tudi odstranite in vrednost zapišete v slikovnih pikah. Na primer 520 slikovnih pik. Nato se bo strnitev menija zgodila samo na pametnih telefonih in mobilnih telefonih.

Pravzaprav ima stran za prilagajanje Bootstrap veliko nastavitev, vendar na splošno ta način prilagajanja (z uporabo strani Customize na uradni spletni strani) ni najhitrejši in najbolj priročen. Nato vam bom pokazal najhitrejši način.

Stran za prilagajanje uporabite, ko morate narediti 2-10 sprememb ogrodja ali pa preprosto onemogočite potrebne komponente. Če nameravate spremeniti veliko več vrednosti, morate uporabiti drugo metodo.

Pravzaprav, ko konfigurirate svojo različico ogrodja, kliknite velik gumb na samem dnu strani. Za vas bo prevedel različico programa Bootstrap in jo prenesel v vaš računalnik. Nato se morate samo povezati in uporabljati. O povezavi sem že govoril v prejšnjih člankih (vključno s tem, kako to narediti na WordPressu).

Prenos virov Less in njihovo urejanje

Kot sem že rekel, če morate veliko urejati izvorno kodo ogrodja in želite spremembe videti takoj, potem boste potrebovali manj virov. Prenesete jih lahko na istem mestu kot polno različico ogrodja – v razdelku Kako začeti.

Za delo z viri Less in njihovo urejanje potrebujete:

Vsaj nekaj znanja o css in manj ali drug predprocesor

Less prevajalnik (lahko ga prenesete brezplačno)

Pravzaprav se ne bom podrobno ukvarjal s prilagajanjem prek manj virov, vendar je to najboljša metoda, saj vam ne bo treba 100-krat obiskati strani Prilagajanje in sestavljati vedno več novih različic ogrodja.

Bootstrap tematiziranje ali spreminjanje videza elementov

Privzeto lahko v polni različici ogrodja najdete tudi datoteko bootstrap-theme.css v mapi css. Ni ga potrebno povezati s spletnim mestom. Katere funkcije opravlja? Datoteka je potrebna izključno za spreminjanje slogov elementov, ki jih potrebujete, če je potrebno.

To isto vlogo lahko izpolni vaš lastni style.css, v katerem lahko tudi preglasite sloge. Bootstrap-theme ni obvezna datoteka, uporablja se bolj za naročilo. Na primer, imate 3 datoteke:

bootstrap.css – seveda je to koda samega okvira;

bootstrap-theme.css – tukaj preglasite sloge za elemente bootstrap;

style.css – v to datoteko zapišite sloge za svoje elemente.

Potem boste imeli red v kodi in strukturi projekta. Toda nihče vam ne prepoveduje, da vse operacije izvajate v eni sami datoteki - style.css in sploh ne uporabljate datoteke teme.

Najpomembneje je, da datoteko teme in lasten css vključite v oznako html pozneje kot datoteko z okvirno kodo, tako da se slogi uspešno preglasijo.

Primer delovanja tematizacije

Kot sem že rekel, Bootstrap privzeto vključuje datoteko bootstrap-theme. Poskusite ga povezati. Opažam, povežite se po glavni datoteki.

Privzeto so gumbi v programu Bootstrap videti takole:

In tako se spremeni njihov videz po povezovanju datoteke s temo:

Kot lahko vidite, se pojavi rahel gradient. V skladu s tem lahko prepišete kodo v datoteki bootstrap-theme in dobite lastne sloge za gumbe. Lahko pa se vprašate, zakaj ne bi teh sprememb naredili neposredno v bootstrap.css? No, dejstvo je, da nenehno izhajajo nove različice ogrodja in če se boste odločili za nadgradnjo, boste svoje spremembe težko implementirali v novo različico. Za razvijalca velja, da se ne dotika izvorne kode, če lahko ustvarite ločeno datoteko in tam opišete spremembe. Je veliko pametnejši in udobnejši.

Kako namestiti nove teme Bootstrap, prenesene z interneta?

Obstaja kar nekaj strani, večinoma tujih, kjer lahko brezplačno prenesete kup tem in predlog. Da bi se izognili zmedi, razmislimo o spletnem mestu, oblikovanem z uporabo Bootstrapa kot predloge, in temo kot nizu pravil CSS, ki preglasijo standardni videz elementov.

Takšne teme lahko na primer prenesete s strani bootswatch.com/, z iskalnikom pa najdete na desetine drugih.

Splošno načelo namestitve takšnih tem je odvisno od mesta, kamor jih prenesete. Če ga lahko prenesete v formatu bootstrap-theme, super, prenesite ga in povežite. Na bootswatch, na primer, morate prenesti bootstrap.css in z njim zamenjati vašo standardno datoteko sloga ogrodja. Obstaja tudi možnost z manj viri.

Začenši s tem člankom bomo začeli preučevati ogrodje Twetter Bootstrap 3, ki se najpogosteje uporablja za izdelavo spletnih strani, skrbniških plošč, ciljnih strani in spletnih aplikacij, saj zagotavlja enostavnost razvoja, jasno strukturo in prilagodljivost strani.

Namestitev osnovne predloge Bootstrap 3

Če želite uporabljati orodja in metode Bootstrap 3, morate iti na http://getbootstrap.com in prenesti arhiv z mapami css, fonts, js in ustreznimi datotekami v njih.

Če ne veste, kako povezati sloge CSS in skripte js, priporočam, da si ogledate ta in ta članek, v našem primeru pa so slogi CSS povezani v razdelke

in skripti pred zaključno oznako

na dnu strani.

Prav tako želim opozoriti, da bo uporaba datotek bootstrap.min.css in bootstrap.min.js koristila vašemu spletnemu mestu, saj so te datoteke manjše in bodo pozitivno vplivale na hitrost nalaganja.

Povezovanje pisav pisav lahko izvedete na dva načina:

Neposredno v razdelku HEAD pred zaključno oznako

V ločeni datoteki CSS, ki se nahaja v mapi css

Druga možnost je boljša, vendar ne glede na to, katero metodo izberete, bo povezava potekala tako

@font-face( družina pisav: glyphicons-halflings-regular; src: url(/fonts/glyphicons-halflings-regular.eot); src: local(glyphicons-halflings-regular), url(fonts/glyphicons-halflings- regular.ttf); ) h2( družina-pisav: glyphicons-halflings-regular,sans-serif; )

oziroma v oznaki sloga za prvo metodo in vstavite vse besedilo znotraj nje v datoteko css za drugo.

namestitev jquery

Da bo Bootstrap 3 pravilno deloval, boste morali dodatno prenesti datoteko knjižnice jquery z uradne spletne strani jquery.com preko povezave in jo postaviti v mapo js na vašem spletnem mestu.

Povezava jquery se zgodi pred zaključno oznako

Piškotki nam olajšajo zagotavljanje naših storitev. Z uporabo naših storitev nam dovoljujete uporabo piškotkov.

, vendar pred datoteko bootstrap.js

ker bi se moral jquery naložiti pred zagonom.

Velikosti mreže in zaslona Bootstrap 3

Osnova Bootstrapa je nabor razredov, na katerih je zgrajena mreža z 12 stolpci (col-). Znotraj mreže je podprtih 5 vrst zaslonov -xs- -sm- -md- -lg- -xl-.

• -xs- velikost zaslona manjša od 575 slikovnih pik;
• -sm- velikost zaslona večja od 576px in ne večja od 767px;
• -md- velikost zaslona več kot 768px in ne več kot 991px;
• -lg- velikost zaslona večja od 992 px in ne večja od 1199 px;
• -xl- velikost zaslona več kot 1200px;

Tako div z razredom col-lg-12 pomeni, da bo na velikem zaslonu stolpec div zavzemal 12 stolpcev ali 100 % širine, podobno bo div col-sm-6 na zaslonu pametnega telefona zavzemal 6 stolpcev oz. 50 % širine.

Vrste mrežastih posod. Postavitev gumijaste postavitve

Glavne vrste posod za mrežo so posoda in razredi tekočine za posodo.

Ko jo uporabljate znotraj vsebnika, bo vaša mreža vizualno zasedla tretjino zaslona na sredini, vseh 12 stolpcev pa bo na tem območju.

Z umestitvijo mreže v razred posode-tekočine bodo vsi elementi postavitve nameščeni čez celoten zaslon, kot gumijasti, z zmanjševanjem širine pa se bodo premikali drug proti drugemu.

Posebnega priporočila za uporabo kontejnerja in kontejnerske tekočine ni, saj je vse odvisno od zasnove in namena postavitve, vendar je primerno uporabiti kontejnersko tekočino za skrbniško ploščo spletnega mesta in vsebnik.

Poleg tega je razred -fluid mogoče uporabiti ne samo za razred vsebnika, ampak tudi za vrstični niz, da razporedite elemente v vrsti. Če pa tekočino za vrstico postavite v običajno posodo, ne boste opazili razlike. To kombinacijo je najbolje uporabiti zunaj div.container, kot je ta:

Živjo, jaz sem Bootstrap 3 predloga

Moja posoda ni tekoča!

In jaz sem tečen!

Vrstice za postavitev elementov

Razred vrstice se uporablja za postavitev mrežnih elementov v eno vrstico, kar vam omogoča, da jih razporedite vodoravno, vendar morate upoštevati, da vsota indeksov v vrstici ne sme biti večja od 12, sicer bo zadnji element prestavljen v drugo vrsto.

Naslov 1 Naslov 2 Naslov 3

Če zmanjšate velikost strani brskalnika, se bodo naslovi poravnali v navpičnem seznamu iz vodoravne vrstice.

Razredi vidnosti elementov

Sistem postavitve Bootstrap 3 ponuja dodatne razrede za prikazovanje ali skrivanje elementov na različnih napravah in zaslonih. Označeni so kot vidni-*-* in skriti-*.

Razred za prikaz visible-*-* za prvim pomišljajem je običajno identifikator vrste zaslona (xs, sm, md, lg, xl), za drugim pomišljajem pa velikost stolpca (1-12). Na primer, visible-lg-6 - element je viden na velikem zaslonu, širokem 6 stolpcev.

Hiding class hidden-* Za pomišljajem je identifikator vrste zaslona (xs,sm,md,lg,xl), na primer označevalni element z razredom hidden-xs ne bo viden na majhnih napravah (velikost zaslona manjša od 575 slikovnih pik).

Če združite te elemente, boste lahko prikazali ali skrili vsebnike div:

Naslov 1 Naslov 2

Prvi naslov bo viden na velikih napravah, drugi pa bo izginil na majhnih zaslonih. Če želite to narediti, zmanjšajte velikost okna brskalnika, tako da bo po širini podobna velikosti zaslona mobilne naprave.

Tudi v vsebniku div v razredu določite prikaži ali skrito, vendar se v tem primeru lastnosti prikaza ne bodo spremenile, ko se zaslon spremeni: če je viden, je viden, če je skrit, bo samo odstranitev besede skrito iz razreda omogočajo ogled želenega elementa.

Medijske poizvedbe v Bootstrap 3

Če želite uporabljati predstavnostne poizvedbe CSS, morate v datoteki css določiti poseben simbol @media in v oklepaju najmanjšo in/ali največjo širino zaslona. Če morate v navadnem označevanju css zapisati velikosti zaslona v slikovnih pikah, lahko v bootstrap 3 napišete naslednjo konstrukcijo:

@media(min-width: @screen-sm-min)( ... ) @media(min-width: @screen-md-min)( ... ) @media(min-width: @screen-lg- min)( ... )

Premik vrstnega reda elementov

Še en zanimiv razred, ki vam omogoča premikanje blokov znotraj vsebnika, razred potiskanja bo premaknil element v desno, razred vlečenja pa v levo.

Pri kombiniranju iz sosednjih vsebnikov lahko spremenite vrstni red slednjih pri spreminjanju velikosti zaslona. V tem primeru je na velikem zaslonu (-lg-) naslov 2 na levi in ​​naslov 1 na desni; ko se širina zaslona zmanjša na srednjo velikost (-md-), se bodo elementi premaknili in vrstni red postanejo zaporedne.

Naslov 1 Naslov 2

Naj zaključim to prvo spoznavanje sistema postavitve Bootstrap 3; naučili ste se namestiti sloge predlog in skripte, osnovne elemente mreže, medijske poizvedbe, vrste vsebnikov itd. V naslednjih člankih si bomo ogledali pomožne in dodatne elemente: menije, gumbe, drsnike, ikone in še veliko več.

24. februar 2012 ob 21:25 Uporabniški vmesnik Twitter Bootstrap za začetnike

• oblikovanje spletnih strani

Povzetek V tem članku bom poskušal govoriti o tem, kako lahko na podlagi Twitter Bootstrapa zelo enostavno implementirate lep uporabniški vmesnik za majhno (enostransko) spletno aplikacijo, če imate le osnovno znanje html-ja. Takoj vas opozorim, da strokovnjakov ne bo zanimalo, govorili bomo o osnovni standardni funkcionalnosti.
Uvod V prostem času kot hobi razvijam enostranski agregator zanimivih naslovov novic. Na neki točki je bila osnovna funkcionalnost prototipa pripravljena, manjkalo je le potrditveno polje poleg naloge »Oblikovanje« Izjava problema Če želite dobiti lep uporabniški vmesnik, ne da bi obvladali čare oblikovalca (imate samo osnovne poznavanje painta) in programerja (imate le osnovno znanje html in css) .
Stran je sestavljena iz naslednjih elementov

• Ime
• Obrazec za pošiljanje povezave do novice
• Obrazec za pošiljanje unikatne kode bralca po elektronski pošti
• Edinstveni obrazec za vnos kode bralca
• Seznam novic razvrščen po datumu (datum, ura, naslov-povezava, število klikov, novica je lahko prebrana ali nova)
• Povezava do rss
• Povezava do razširitve za chrome
• id izdaje
• e-pošta s povratnimi informacijami

Proces Po nekajdnevnem sproščenem iskanju že pripravljene predloge (css template) sem prišel do zaključka, da to ni pot pravega Jedija, saj... vse, kar je šlo skozi estetski filter, se je zataknilo v tehničnem filtru (glej izjavo o problemu, preprosto nisem mogel prilagoditi kompleksne kode svojim potrebam). In potem sem skoraj po naključju odšla v nebesa. Ne bom podrobno opisal Bootstrapa, podrobnosti si lahko ogledate s klikom na povezavo, naštel bom glavne elemente, za katere obstajajo že pripravljeni slogi (včasih več):

Standardni elementi oblikovanja html

Seznami

Delčki kode

Mize

Obrazci

Gumbi

Navigacijski elementi

Paginacija

Miniature

Informacijska sporočila

Vrstice napredka

Po mojem mnenju je to zelo kul. Vse, kar potrebujete za oblikovanje prototipa. Nato vam bom povedal, kako sem s seznama uporabil elemente 1,4,5 in 7. Torej, korak 1. Povežite Bootstrap.Prenesite in razpakirajte arhiv z Bootstrapom v korensko mapo našega spletnega mesta, povežite css:
... ...
Druga vrstica je potrebna za samodejno prilagoditev vmesnika napravam, ki jih podpira Bootstrap Korak 2. Oblikujte "meso". Z "mesom" mislim na seznam novic. Najlažji način za to je uporaba tabele z onemogočenimi okvirji. Prvi stolpec je datum (samo enkrat na skupino), drugi stolpec čas, tretji naslov in število prehodov. Vse to je treba po pravilih Bootstrapa zapakirati v vsebnik:

(Datum)

(čas)

(Naslov) ((Število prehodov))

Za prebrane novice navedemo poseben razred:
(Naslov) Korak 3. Obrazec za pošiljanje povezave do novice. Tukaj je spet vse preprosto, Bootstrap ponuja več že pripravljenih slogov obrazcev: običajni obrazec, enovrstični obrazec, iskalni obrazec ... Potrebujemo drugega, dodajte ga v naš vsebnik pred tabelo:
Dodaj ...
class="span10" - Bootstrap predvideva izdelavo vmesnika, ki temelji na mreži 12 stolpcev; naše elemente je mogoče poravnati vzdolž nje. Z znanstveno metodo poskusov in napak sem prišel do širine vnosnega polja 10. Korak 4,5,6. Kapa. Moje predstave o tem, kako naj bi izgledala uporabniku prijazna spletna stran, nakazujejo minimalističen stil: vse nepotrebno je skrito, vse, kar se ni dalo skriti, je bledo. Obrazce skrijemo v spustni meni, povezave do rss in chrome razširitve naredimo blede. Vse to zapakiramo v glavo, ki jo prilepimo na vrh strani (class = “navbar navbar-fixed-top”):
***

• rss
• chrome razširitev

• Vaša edinstvena koda bralca (Koda)
  • Poslano prek emaila
  • Vnesite drugo kodo

...
Sami obrazci:
... × Pošljite edinstveno kodo po e-pošti

Prekliči pošiljanje × Vnesite edinstveno kodo bralca

Omogoča sinhronizacijo prebranih novic na različnih računalnikih.

Prekliči pošiljanje

Pomembna točka. Da bo to delovalo, morate povezati nekaj skriptov:
...

Korak 7. Noga. Dodajanje glavnega vsebnika:
...

izdaja 2012/02/19 23:49 *****

ResultEpilogue Twitter Bootstrap je omogočil, da brez velikega truda in znanja, brez pisanja ene vrstice CSS in brez velikega razbijanja html kode, dobimo zelo lep prototip vmesnika, ki ga ni sram pokazati ljudem. Če vas zanima, vam bom v naslednjem članku povedal, kako lahko brez poglobljenega znanja PHP + MySQL (samo z osnovnimi programerskimi veščinami) implementirate funkcionalnost, ki vam omogoča, da svojo milijonsko idejo prikažete ne le na papirju, ampak v obliki delujočega prototipa.
Hvala za vašo pozornost!
UPD: Ne želim odstraniti teme v "Jaz sem PR", odstranil sem vse nepotrebne povezave

Fantje, mislim, da je Bootstrap zelo kul stvar. Zakaj je temu tako, bom poskušal pojasniti v tem članku. Pa pojdimo. Takoj se opravičujem, ker je skoraj celotna prva polovica članka napisana brez slik, obstaja le teorija, razlaga delovanja mreže. Ampak to je zelo pomembno! Kdor jo potrebuje, jo bo vzel v roke, prebral in, upam, razumel. Druga polovica članka je že zaznana bolj preprosto, več je primerov s posnetki zaslona.

Bootstrap - kaj je to?

Pa začnimo s pomembnim vprašanjem. Bootstrap je okvir CSS in JS, v bistvu nabor datotek z že pripravljeno pisno kodo. Cilj razvijalcev skoraj vsakega ogrodja je poenostaviti razvoj spletne strani zase in za druge, ki bodo imeli dostop do orodja. V primeru Bootstrapa je popolnoma brezplačen, tako da ga lahko uporabljate na kakršenkoli način, urejate izvorno kodo in prilagajate okvir poljubno. Popolno je.

Namestitev programa Bootstrap

Če morate le povezati datoteke ogrodja z dokumentom HTML (na primer za vajo), samo prenesite ogrodje z uradne spletne strani getbootstrap.com, kopirajte njegove datoteke v projekt in povežite tiste, ki jih potrebujete. Naj podam kratek pregled teh datotek:

bootstrap.css in bootstrap.min.css - nestisnjeni in stisnjeni različici kode CSS ogrodja. Priporočljivo je, da svojemu delujočemu projektu priložite stisnjeno datoteko, na ta način boste nekoliko izboljšali hitrost nalaganja. Če pa si nameravate kodo ogledati v datoteki, povežite nestisnjeno različico.

bootstrap.js in bootstrap.min.js - datoteka s skripti

mapa s pisavami in datoteke glifikonov v njej so pisava ikone Bootstrap. Ima okoli 200 ikon. V večini primerov jih boste imeli dovolj, včasih morate povezati druge. O pisavi ikon bomo govorili kasneje.

To je standardni nabor ogrodja. Pravzaprav ga lahko preprosto prilagodite in spremenite tako, da vam ustreza. Na primer, sploh ne uporabljajte skriptov ali povežite samo eno mrežo. Na splošno bomo o tem tudi govorili.

Ruska dokumentacija Bootstrap

Ko obiščete getbootstrap, ste verjetno opazili, da je tukaj vse v angleščini. Uporabili bi lahko rusko pomoč pri ogrodju. To je enostavno najti. Če želite to narediti, pojdite z glavne strani na razdelek Kako začeti. Pomaknite se do samega dna, tam bo povezava do prevodov. Tam poiščite ruščino in kliknite nanjo. To je to, zdaj ste na ruski različici spletnega mesta. Res je, da tukaj ni vse prevedeno, ampak nekje 70-80% je točnega, tako da boste razumeli vse.

Bootstrap mreža

Karkoli lahko rečemo, glavni element Bootstrapa je odzivna mreža. Na splošno bi brez njega okvir izgubil skoraj vso svojo vrednost, saj lahko zahvaljujoč mreži hitro ustvarite prilagodljive predloge. Hkrati morda sploh ne poznate medijskih poizvedb, jih ne potrebujete, saj ogrodje skrbi za implementacijo prilagodljivosti, blokom morate samo dodeliti pravilne razrede.

Kateri so ti razredi? Pojdimo k dokumentaciji, zelo nam bo pomagala. Pojdite na razdelek CSS - Grid System. Splošna pravila za delo z mrežo so preprosta, zdaj jih bom naštel.

Kako delati z mrežo?

Predstavljajte si to kot tabelo html. Če ste kdaj pisali kodo HTML za tabele, veste, da je vsa vsebina postavljena v oznako tabele, ena vrstica je postavljena v oznako tr, nato pa so vanjo postavljene celice - td .

Torej, v mreži je vse podobno. Razred vsebnika služi kot splošni vsebnik za mrežo. Obstajata 2 možnosti za zagonsko mrežo - popolnoma gumijasta in še vedno s končno največjo širino. Torej, ko se splošnemu bloku dodeli razred vsebnika, bo imelo spletno mesto največjo širino 1170 slikovnih pik. Ne bo se več širil. Seveda bo vsebina na sredini.

Če nastavite razred posode-tekočine, bo mreža popolnoma gumijasta, kar pomeni, da ne bo nobenih omejitev velikosti. Na primer, če oseba odpre spletno stran na monitorju s širino 1920 slikovnih pik, jo bo videla v polni širini.

V skladu s tem je prva stvar pri razvoju spletne strani odločitev, kakšna bo predloga - popolnoma gumijasta ali pa je treba njeno širino še omejiti.

Odlično, vsebniški blok mora vsebovati vrsto mreže. Vanj morate postaviti vse bloke, ki so v eni vrstici. To pomeni, da če vzamemo najbolj tipično predlogo: glava, glavni del, desni stolpec in noga, potem obstajajo 3 stolpci. Prvi bo imel samo glavo, drugi vsebino in stransko vrstico, zadnji pa nogo. Oznaka za tako spletno stran bi bila približno takole:

Vsebina glave ... in stranska vrstica noge

Toda za zdaj je to napačna oznaka, ker manjka ... kaj? Tako je, celice! V primeru Bootstrapa se imenujejo tudi stolpci. Bootstrap mreža je sestavljena iz 12 stolpcev. Lahko se vgradi v kateri koli blok poljubne širine, vsaj 1200 slikovnih pik, vsaj 100. Vse to je zato, ker širina stolpcev ni določena v slikovnih pikah, ampak v odstotkih.

Kako deluje ta sistem z 12 stolpci?

Tako smo prišli do najpomembnejšega vprašanja v zvezi z okvirjem. Verjemite, če to razumete, je vse ostalo nesmisel. Glavna stvar je razumeti, kako deluje mreža, in pot do hitre prilagodljive postavitve vam bo odprta.

Če želite to narediti, se pomaknite po spodnji dokumentaciji, tam boste našli tabelo, ki vsebuje pomembne lastnosti mreže.

Mimogrede, sami stolpci so v Bootstrapu označeni z razredom col-, vendar je to sestavljen razred, zato nikoli ne napišejo preprosto col-. Bootstrap ima 4 posebne razrede, ki so zasnovani za nadzor velikosti blokov različnih širin, tukaj so:

ld - za velike zaslone, široke več kot 1200 slikovnih pik (namizni računalniki);

md - za srednje velike zaslone, širina od 992 do 1199 (računalniki, netbooki);

sm - za majhne zaslone, širina od 768 do 991 slikovnih pik (tablični računalniki);

xs - izjemno majhni zasloni, širina manjša od 768 slikovnih pik.

To so 4 razredi, vendar se za nadzor velikosti elementov uporabljajo številke od 1 do 12, saj je, kot se spomnite, v mreži točno 12 stolpcev.

Glava Vsebina Stranska vrstica Noga

To je precej enostavno razumeti. Najprej ustvarimo glavo, ki je sploh ni treba postaviti v mrežo, saj bo v vsakem primeru zasedla 100% širine (običajno). Ampak ga bomo vseeno vložili. Kaj je ta razred col-md-12? Kot sem vam že povedal, nihče ne piše preprosto col-, s tem razredom brskalniku v bistvu povemo:
To je celica | stolpec
Na srednjih napravah (razred md) mora biti njegova širina 12 stolpcev od 12, to je 100% širine vrstice.
Kaj pa širina na drugih napravah? Na velikih (lg) zaslonih bo tudi 100%, ker so vrednosti za velike zaslone podedovane, za manjše pa ne. Preprosto je: če bi napisali col-xs-4, bi bila širina stolpca 33% na vseh napravah, in če bi napisali col-lg-4, potem samo na velikih. To je funkcija, zapomnite si jo.

No, kaj se zgodi, če se vrednost širine ne shrani na manjših zaslonih? Ponastavi se. Takole se zgodi:
col-sm-4 - na majhnih zaslonih bo blok zasedel 33% širine, enako bo na zaslonih md in lg, na xs, torej najmanjših, pa bo širina ponastavljena na 100%. Torej, zapomnite si še eno preprosto pravilo: če za manjše zaslone ni nič določeno, bo na njih blok prikazan v 100% širini.

Stranska vrstica vsebine

Brskalniku v bistvu sporočamo:
Naj bo blok vsebine širok 8 od 12 stolpcev in ta situacija bo na majhnih, srednjih in velikih zaslonih (dovolj je določiti za majhne, ​​za velike zaslone, kot se spomnite, je vrednost podedovana). Toda na najmanjših zaslonih bo blok zaseden 100%. To je pravilno; običajno se na mobilnih napravah spletna mesta prikažejo v 1 stolpcu.
Naj bo stranski stolpec ena tretjina širine vrstice na istih malih, srednjih in velikih zaslonih.No, na najmanjših, kot ste že razumeli, je tudi njegova širina ponastavljena na 100%. Tako preprosto je.

No, z nogo se ni treba ukvarjati. No, pokrili smo osnovna načela delovanja omrežja, vendar moramo še videti, kako deluje ...

Bootstrap ugnezdena mreža

Dejstvo je, da smo zdaj predlogo razdelili le na glavne bloke, znotraj pa jih je mogoče razdeliti tudi na stolpce. Na primer, vsebina lahko prikazuje izdelke v več stolpcih. Kaj naj naredim? Zelo preprosto je - znotraj ustvarimo popolnoma enako mrežo. Bo ugnezdena, vendar vsebuje tudi 12 stolpcev. Če vse to povzamemo, potem pridemo do naslednjega zaključka:
V vsakem bloku je lahko neomejeno število mrež. Na primer, v bloku z izdelki je mreža za ločevanje izdelkov, v samem bloku z enim izdelkom pa lahko ustvarite drugo mrežo, na primer za ločevanje cen, informacij o razpoložljivosti in dodatnih informacij. informacije.

Zdaj bomo poskušali narediti še eno mrežo znotraj vsebinskega bloka, da bomo izdelke razporedili v 3 stolpce. Torej, vzemimo blok, v katerem imamo vsebino:

Vsebina

In vanj zapišemo:

Katalog izdelkov: Ime izdelka

Opis izdelka

Kot lahko vidite, smo znotraj vsebine ustvarili novo mrežo - notri smo postavili vrstico in v vrstici bodo že 3 bloki z izdelki. Samo kopirajte blok col-sm-4 s kartico izdelka in ga prilepite še 2-krat, to je tisto, kar dobite (lahko posnamete katero koli sliko izdelka, jaz sem posnel veliko):

Pogrešil sem še eno pomembno točko: da se slike prilagodijo blokom, v katerih se nahajajo, je treba vsaki od njih dodeliti img-responsive razred. Če tudi vi, tako kot jaz, mislite, da je to početje neprijetno, potem preprosto napišite v svojem style.css takole:

Img (največja širina: 100 %; višina: samodejno; zaslon: blok; )

To je to, shranite to kodo in povežite svojo datoteko css s projektom. Zdaj bodo slike privzeto prilagodljive.

No, je šlo čisto gladko? Da, ampak brez bootstrapa bi morali dlje trpeti. Edina stvar je, da vam pri ustvarjanju mreže znotraj katerega koli bloka ni več treba ustvariti bloka z razredom vsebnika v njem. Zakaj to ni potrebno? Da, ker blok, v katerem je ustvarjena mreža, služi kot vsebnik.

Tako lahko v katerem koli bloku ustvarite poljubno število stolpcev in naredite predlogo katere koli zahtevnosti. In vse to je veliko hitreje kot brez Bootstrapa, ker moraš ves css napisati iz nič.

Odzivni pripomočki

To je še ena odlična lastnost bootstrapa. Sestoji iz dejstva, da lahko skrijete ali naredite vidne poljubne bloke želene širine. Na primer, popolnoma skrijete stranski stolpec na ozkih zaslonih, dodate nekaj novih elementov na mobilnih napravah, dodate stolpec na širokih zaslonih itd.

Obstaja veliko možnosti uporabe, vendar vam nisem povedal o najpomembnejši stvari: kako uporabljati te pripomočke? Če želite to narediti, samo dodajte razrede v želeni blok. Če ga želite skriti, samo določite naslednji razred:

Noga

Kaj bo v tem primeru naredil razred hidden-xs? Skril bo nogo na zelo majhnih napravah. Na vseh drugih bo blok viden.

Če pa ga morate, nasprotno, prikazati samo na najmanjših zaslonih, morate uporabiti razred visible-xs-block. V tem primeru bo blok skrit na vseh zaslonih, razen na najožjih. Torej so prilagodljivi razredi uporabnosti zapisani takole:

Beseda skrita ali vidna, odvisno od tega, kaj potrebujete

Okrajšava xs, sm, md ali lg, ki označuje, na katerih zaslonih naj se blok skrije ali prikaže.

Za visible morate dodati tudi eno od treh vrednosti: block - element prikaže kot element bloka, inline-block - kot element inline-block, inline - inline.

No, nekaj primerov, da bo jasno:

hidden-xs hidden-lg - skrije element na najmanjšem in največjem zaslonu. Kot lahko vidite, lahko določite več razredov, ločenih s presledkom.

visible-xs-inline visible-md-block - na malih in velikih zaslonih element sploh ne bo prikazan. Na zelo majhnih bodo male črke, na srednjih pa blok.

visible-lg-block - element bo viden samo na največjih zaslonih, na vseh ostalih bo skrit

Takole vse deluje. Točno tako in nikakor drugače. Upam, da to razumeš. Uporabimo to v praksi. Imamo testno predlogo, čeprav zelo primitivno.

Naloga: izginiti stranski stolpec na majhnih zaslonih in en izdelek na najmanjših zaslonih. In tako, da so na napravah xs izdelki že v 2 stolpcih, ne v 3.

Poskusite to narediti sami in uredite samo kodo html. Kaj je treba narediti? Najprej si poglejmo stolpec, če ga želite skriti na sm zaslonih, mu morate le dodati razred hidden-sm.

Super, zdaj mora tretji izdelek dodati razred hidden-xs in izginil bo na najmanjših zaslonih. No, razredi preostalih dveh dobrin bodo naslednji:

To pomeni, da bo na srednjih napravah blok zasedel 4 stolpce od 12, kar je mogoče prevesti v 33,33% širine, na zelo majhnih napravah pa 50%. In ker bo pri tej širini en blok z izdelkom izginil, bosta oba bloka z izdelki lepo razporejena v 1 vrstici, takole:

Super! Ko to razumete, lahko že manipulirate z bloki na spletni strani na skoraj kakršen koli način. Poskusite si sami zamisliti naloge in jih izvajati.

Premakni me do konca

Nato vam bom pokazal še en zelo dober trik - možnost premikanja bloka v desno ali levo. Recimo, da nimamo 3 izdelkov v vrsti, ampak 1. In ne zasede celotne širine. In vaša naloga je, da ga poravnate na sredino. To je enostavno narediti, če upoštevate, da delate s sistemom 12 stolpcev.

Pustimo en blok z izdelkom:

Dovolj je, da naredite preproste izračune, da razumete, koliko morate premakniti blok, da ga centrirate. Na srednjih in velikih zaslonih ga je treba premakniti za 4 stolpce v levo, na majhnih pa za 3 stolpce. Takole izgleda:

Razred col-md-offset-4 pravi: na srednjih in velikih zaslonih zamik bloka v levo za 33 % širine nadrejenega vsebnika (1/3 levega odmika, 1/3 širine bloka, ⅓ desnega odmika, kar povzroči centriranje).
Razred col-xs-offset-6: Na izjemno majhnih in majhnih zaslonih premaknite levo za 25 % (¼ odmik levo, ½ širine bloka, ¼ odmik desno).

Upam, da razumete bistvo in po potrebi uporabite te razrede.

Bootstrap komponente in primeri njihove uporabe

čestitam ti. Pravkar smo obravnavali najpomembnejšo temo, povezano z okvirjem. Pomembna je mreža in delo z njo. Delo s komponentami že pomeni, da preprosto greste v dokumentacijo, tja kopirate kodo želene komponente in jo po potrebi spremenite po svojih željah. Vendar bom spodaj navedel nekaj primerov uporabe komponent.

Hitro lebdenje in preklic zavoja

Razreda pull-left in pull-desno vam omogočata, da kateri koli blok hitro naredite lebdeči, tako da ga pošljete v levo ali desno. Ne pozabite na prekinitev toka. Za to lahko uporabite razred clearfix.

Bootstrap: Vodoravni odzivni (mobilni) meni

Naslednje komponente bomo dodali neposredno predlogi, tako da, če želite delati s kodo in ne samo brati, sledite vsem korakom za mano.

Pravzaprav lahko z Bootstrapom zelo preprosto naredite ne le prilagodljiv meni, ampak tako imenovanega mobilnega, ki je na majhnih zaslonih popolnoma strnjen in skrit pod enim gumbom. To tehniko je mogoče videti v številnih odzivnih predlogah in je dejansko zelo enostavna za implementacijo. Primer kode mobilnega menija je v dokumentaciji, vzel jo bom od tam in jo malo ponovil.

Torej, prva stvar, ki jo bom naredil, je, da odstranim blok z glavo, ker bo naš meni pravzaprav glava v primeru moje predloge. Koda menija mora biti postavljena pred vso vsebino spletnega mesta, tudi pred vsebniškim blokom. Zakaj? Da, zdaj se boste sami prepričali, da je mreža že vgrajena v navigacijsko vrstico. Torej, tukaj je koda:

Logo/ime stikalnega gumba

• Kolesarjenje
• Motošporti
• Oprema za vadbo
  • Tekalne steze
  • Eliptični trenažerji
  • Klopi

Iskanje

Naj vas ne skrbi dejstvo, da je kode veliko. Takole izgleda stran zdaj:

Če pa vaš meni ne zavzema celotne širine zaslona, ​​ga je smiselno postaviti na sredino. Če želite to narediti, morate nato ustvariti dodaten ovojni blok za meni, ki naj bo postavljen za blokom z razredom kontejnerske tekočine. Ne pozabite zapreti tega bloka. Dal sem mu razred navbar-wrap. Tu so slogi zanj:

To pomeni, da lahko preprosto omejite širino in jo centrirate. Ali pa najprej zamenjajte posodo-tekočino s posodo.

Kot lahko vidite, smo v meni dodali logotip, dva preprosta elementa, spustni element in iskalni obrazec. Se pravi, bilo je veliko elementov. Meni lahko preprosto prilagodite sebi tako, da mu dodate svoje razrede. Toda za zdaj je moj cilj preprosto pokazati to komponento.

Tako bo izgledal meni na napravah s širino zaslona manjšo od 768 slikovnih pik:

Kot lahko vidite, se je meni zrušil. Odpre se, ko kliknete na gumb v zgornjem desnem kotu. Na zaslonu je ostal samo logotip.

Spustni meni

Hkrati lahko iz zgornjega primera razumete, kako je element spustnega menija ustvarjen v Bootstrapu; izvlečimo to kodo za podrobnejši pogled:

Oprema za vadbo

• Tekalne steze
• Eliptični trenažerji
• Klopi

Vsebnik za spustni element je torej običajna postavka seznama s spustnim razredom. V njej je glavna povezava, s klikom na katero se odpre spustni meni. Zelo pomembno je, da mu dodelite podatkovni atribut, ki ga vidite v kodi, brez njega nič ne deluje. Prepričajte se tudi, da je datoteka bootstrap.js povezana s spletnimi stranmi.

Razpon z razredom kazalke ni nič drugega kot puščica, zahvaljujoč kateri lahko razumete, da je element spustni element, spodaj pa je sam meni oblikovan s standardnim označenim seznamom. To je to, vse je precej preprosto, to kodo lahko uporabite za implementacijo spustnih elementov.

Dodajanje krušnih drobtin (drobtin) z uporabo Bootstrapa

V mnogih trgovinah lahko najdete tako imenovani blok kruhovih drobtin, ki vsebuje celotno pot do trenutne strani. To je enostavno storiti tudi z uporabo ogrodja, glejte kodo:

domov

Katalog

Blago

Pravzaprav je dovolj, da določite razred drobtin za oštevilčen seznam in vanj vnesete običajne elemente seznama. Mimogrede, v predlogi bom centriral naslove druge ravni (to mora biti zapisano v css):

H2 (poravnava besedila: sredina; )

Če želite nekako spremeniti videz drobtin, preprosto uporabite izbirnik .breadcrumb v CSS. Na primer, tako lahko odstranite barvo ozadja:

Breadcrumb (ozadje: prozorno; )

Takole izgleda stran zdaj:

Bootstrap tabele

Tabela se privzeto razteza čez celotno okno, zato jo zavijte v okvir z omejeno širino, da omejite dimenzije. Privzeto je videti grozno, a če oznaki tabele dodate razred tabele, bo vse veliko lepše:

Upoštevajte, da imajo celice v tej različici jasne meje samo na dnu; če želite obrobe na vseh štirih straneh, morate dodati še en razred:

Načeloma so to vse možnosti tabel. O tem, kako narediti prilagodljivo tabelo, sem že napisal ločen članek, zato ga ne bom ponavljal. Edina stvar je, da lahko v vrstice in celice tabele dodate tudi razrede, kot so informacije, uspeh, opozorilo in drugi, da jih pobarvate v želeno barvo.

Seveda lahko preprosto napišete lastne razrede v style.css in jih uporabite.

Spodnja črta

Upam, da je bil članek koristen in ste lahko razumeli najpomembnejše. S komentarji lahko postavite kakršna koli vprašanja.

Svet brezplačnih programov in koristnih nasvetov
2024 whatsappss.ru