Twitter Bootstrap-basert brukergrensesnitt for nybegynnere. Installere bootstrap Velge nødvendige komponenter
Før du laster ned, sørg for at du har en kodeeditor (vi anbefaler Sublime Text 3) og litt kunnskap om HTML og CSS. Her skal vi ikke berøre kildefilene, men du kan alltid laste ned og studere dem selv. Vi vil fokusere vår oppmerksomhet på å komme i gang med kompilerte Bootstrap-filer.
Laster kompilerte filerDen raskeste måten å komme i gang på: få kompilerte og minifiserte versjoner av CSS, JS og bilder. Ingen dokumenter eller kildefiler.
2. FilstrukturI de nedlastede filene finner du følgende struktur og innhold, logisk gruppert etter vanlige egenskaper og inneholder både minifiserte og kompilerte versjoner.
Når den er lastet ned, pakk ut den komprimerte mappen for å se strukturen til (kompilert) Bootstrap. Det burde være noe slikt:
bootstrap / +-- css / ¦ +-- bootstrap. css ¦ +-- bootstrap . min. css +-- js / ¦ +-- bootstrap. js ¦ +-- bootstrap . min. js +-- img / ¦ +-- glyphicons - halflings . png ¦ +-- glyphicons - halflings - white . png L-- LESMIG. mdDette er den grunnleggende formen for Bootstrap: kompilerte filer for rask og enkel bruk i nesten alle nettprosjekter. Vi gir deg kompilert CSS og JS (bootstrap.*), og også kompilert og minifisert CSS og JS (bootstrap.min.*). Bildefilene komprimeres ved hjelp av ImageOptim, et Mac-program for å komprimere bilder til PNG.
Vær oppmerksom på at alle JavaScript-plugins krever jQuery.
3. Hva er inkludertBootstrap er utstyrt med HTML, CSS og JS for all slags arbeid, de er alle oppført i kategorier som du finner øverst på siden.
Dokumentseksjoner Støttede elementerVanlige kroppsstiler for å tilbakestille typen og bakgrunnen, lenkestiler, malrutenett og to enkle markeringselementer.
CSS-stilerStiler for vanlige HTML-elementer: design, kode, tabeller, skjemaer og knapper. Inkluderer også Glyphicons, et flott ikonsett.
KomponenterGrunnleggende stiler for enkle grensesnittkomponenter: faner og knapper, navigasjonslinjer, meldinger, sideoverskrifter, etc.
Javascript-pluginsI likhet med komponenter er disse Javascript-pluginene interaktive komponenter for verktøytips, informasjonsblokker, modale komponenter og mer.
Liste over komponenterSammen inneholder Javascript-komponenter og plugins følgende grensesnittelementer:
- Knappegrupper
- Dropdown-knapplister
- Navigasjonsfaner, knapper og lister
- Navigasjonslinje
- Snarveier
- Merker
- Sideoverskrifter og helteelementet
- Miniatyrer
- Meldinger
- Prosessindikatorer
- Modale elementer
- Nedtrekkslister
- Verktøytips
- Informasjonsblokker
- Element "trekkspill"
- Karusellelement
- Tastaturinngang foran
Etter en kort introduksjon vil vi fokusere på å bruke Bootstrap. For å gjøre dette bruker vi en grunnleggende HTML-mal som inkluderer alle elementene som er oppført i .
Slik ser en typisk HTML-fil ut:
For å lage en Bootstrap-mal som denne, legg ved de riktige CSS- og JS-filene:
Og alt er klart! Ved å legge til disse to filene kan du utvikle et nettsted eller en applikasjon ved hjelp av Bootstrap.
Hallo! I denne artikkelen vil jeg fortelle deg hvordan du installerer og kobler til Bootstrap-rammeverket. Du kan lese om hva Bootstrap er.
Jeg har allerede sagt mye om standardinstallasjonen i tidligere artikler. Alt er enkelt her. Vi går til den offisielle nettsiden getbootstrap.com, klikker på Komme i gang-elementet og velger det aller første alternativet. Dermed laster vi ned fullversjonen av bootstrap med alle js- og css-komponenter.
Bootstrap CDN er en mulighet til å koble rammeverket fra en CDN-lagring uten å laste ned filene til datamaskinen din. Naturligvis kan det i dette tilfellet ikke være snakk om noen tilpasning.
Tilpasning av rammeverkMen faktum er at bootstrap inneholder mange komponenter som standard, og noen av dem kan rett og slett ikke være nyttige for deg når du utvikler et spesifikt nettsted. For eksempel designer du en nettbutikk. Du trenger kanskje ikke modaler og verktøytips, og du trenger kanskje ikke mange av css-komponentene. I dette tilfellet vil det være lurt å ikke inkludere disse komponentene i rammeverket.
Eller du lager en enkel blogg. La oss si at du egentlig ikke trenger noe der i det hele tatt, så du kan bare la nettet stå og et par av de viktigste komponentene.
Å velge bare det du trenger er en profesjonell tilnærming til å lage nettsteder og bruke Bootstrap. Som standard veier den ukomprimerte versjonen av rammeverkets CSS-stiler i den nyeste versjonen 143 kilobyte. Og skript er mer enn 60 kilobyte. Ja, hvis du komprimerer koden, kan du redusere vekten med 20-40%, men fortsatt vil ikke filene være de letteste.
Hvis du for eksempel deaktiverer alle komponenter og lar bare rutenettet være igjen (dette gjøres veldig ofte), vil vekten av css-en bare være 15-20 kilobyte, og i komprimert form ytterligere et par kilobyte mindre. På denne måten vil du oppnå maksimal hastighet og optimalisering av prosjektet ditt.
Ok, det var bare en teori. For å tilpasse rammeverket, besøk det samme offisielle nettstedet og gå til Tilpass.
Velge de nødvendige komponenteneDet første trinnet her er å konfigurere hvilke komponenter du vil inkludere i din versjon av Bootstrap. La oss starte med CSS:
Print Media Styles – mediespørringer for utskrift. Hvis du ikke planlegger å skrive ut sidesider, kan du deaktivere det.
Typografi, kode, tabeller, skjemaer og knapper er alle ting du kan style i CSS selv hvis du virkelig vil. Selvfølgelig vil dette ta tid, men hvis utformingen av elementene dine er veldig forskjellig fra det rammeverket tilbyr som standard, kan du deaktivere alle disse CSS-stilene og skrive dem selv.
Grid System er faktisk et rutenett. Jeg ser ikke noe poeng i noen gang å deaktivere det, fordi dette er hovedkraften til rammeverket. Det er takket være rutenettet at du enkelt kan tilpasse maler til enhver enhet, og i dag i en tid med mobiltrafikk er dette ekstremt viktig. Vi slår den ikke av under noen omstendigheter.
Responsive verktøy – adaptive verktøy, jeg anbefaler også å aldri deaktivere dem. Vi vil snakke om adaptive verktøy i neste artikkel, hvor vi vil se på nettsystemet i detalj. Dette er klasser som lar deg skjule et element eller gjøre det synlig ved en viss skjermbredde. Veldig praktisk og nyttig.
Dette er for eksempel ting som listegrupper, knappelinjer, ikoner, paneler, varsler, paginering, brødsmuler osv. Du kan også deaktivere ikonfonten. Dette er verdt å gjøre i tilfelle du ikke trenger ikoner på nettstedet i det hele tatt, eller du kobler til et annet sett. Egentlig bør du sitte og tenke på hva du trenger av alle komponentene som presenteres og hva du ikke trenger. Hver enkelt side vil ha sitt eget sett, fordi hver side har forskjellig design og funksjonalitet.
Javascript-komponenter
Dette er rullegardinmenyer, verktøytips, modale vinduer og skyveknapper. Hvis du ikke trenger noe av dette, slå det av. I noen tilfeller kan alle komponenter virkelig komme til nytte når nettstedet ditt har en rullegardinmeny, en glidebryter på hovedsiden og modale vinduer. I noen tilfeller kan maksimalt 1-2 komponenter være nyttige, da er det ikke nødvendig å forlenge koden, deaktivere unødvendige komponenter.
Jquery-pluginsHer kan du deaktivere jquery library plugins som hjelper javascript-komponenter til å fungere riktig. Følgelig, hvis du ikke bruker en glidebryter på nettstedet ditt, trenger du ikke en plugin for å lage karuseller, hvis du ikke trenger verktøytips, deaktiver tooltips.js, etc.
Scrollspy-pluginen overvåker posisjonen til teksten og uthever, avhengig av dette, ett eller annet menyelement. Vanligvis er en slik funksjon nødvendig på landingssider; jeg har praktisk talt aldri sett den på vanlige nettsteder. Og så videre. Ta en god titt på hva du trenger og hva du ikke trenger.
Mindre variablerDeretter åpnes et stort element foran deg, der det vil være mange underelementer med innstillinger for Mindre variabler. Her kan du endre nesten alt: farger, skriftstørrelser, bruddpunkter, antall kolonner i rutenettet, innrykk osv.
For å gjøre dette må du i det minste kjenne til det grunnleggende om Less eller i det minste intuitivt navigere i disse skjemaene.
For eksempel, hvis du ser @font-family-base-variabelen, må du i det minste intuitivt forstå at den er ansvarlig for navnet på fonten, som er basisfonten på nettstedet. Vel, @font-size-base-variabelen setter grunnskriftstørrelsen. Som standard i bootstrap er det 14 piksler.
Du kan redigere alle disse feltene. Bare endre 14 til 20 og nå kan du laste ned et rammeverk der standard skriftstørrelse er 20 piksler. Følgelig kan du umiddelbart justere størrelsen på overskriftene osv.
Sette opp rutenettetInnstillingene til rutenettet er også veldig interessante for oss, her er de:
Som du kan se, kan du endre antall kolonner og bredden på innrykk mellom dem på noen få sekunder. Grid-float-breakpoint-variabelen setter punktet der mobilmenyen kollapser til et ikon.
Hvis du endrer verdien, for eksempel til @skjerm-md-min, vil det allerede ved en bredde på 991 piksler eller mindre skje en kollaps. Du kan også fjerne denne variabelen og skrive verdien i piksler. For eksempel 520 piksler. Da vil sammenslåing av menyen kun skje på smarttelefoner og mobiltelefoner.
Egentlig har Bootstrap-tilpasningssiden mange innstillinger, men generelt er ikke denne tilpasningsmetoden (ved å bruke Customize-siden på den offisielle nettsiden) den raskeste og mest praktiske. Neste vil jeg vise deg den raskeste måten.
Bruk Tilpass-siden når du trenger å gjøre 2-10 endringer i rammeverket, eller deaktiver de nødvendige komponentene. Hvis du skal endre mange flere verdier, må du bruke en annen metode.
Faktisk, når du konfigurerer din versjon av rammeverket, klikker du på den store knappen helt nederst på siden. Den vil kompilere en versjon av Bootstrap for deg og laste den ned til datamaskinen din. Da er det bare å koble til og bruke. Jeg har allerede snakket om tilkobling i tidligere artikler (inkludert hvordan du gjør det på WordPress).
Laste ned færre kilder og redigere demSom jeg allerede sa, hvis du trenger å gjøre mange endringer i kildekoden til rammeverket og du vil se endringene umiddelbart, trenger du færre kilder. Du kan laste dem ned på samme sted som den fulle versjonen av rammeverket - i Komme i gang-delen.
For å jobbe med Less-kilder og redigere dem trenger du:
I det minste litt kunnskap om css og mindre eller en annen forprosessor
Mindre kompilator (kan lastes ned gratis)
Egentlig vil jeg ikke dvele i detalj ved tilpasning gjennom færre kilder, men dette er den beste metoden, fordi du ikke trenger å gå til Tilpass-siden 100 ganger og kompilere flere og flere nye versjoner av rammeverket.
Bootstrap-tema eller endre utseendet til elementerSom standard, i fullversjonen av rammeverket, kan du også finne bootstrap-theme.css-filen i css-mappen. Det er ikke nødvendig å koble den til nettstedet. Hvilke funksjoner utfører den? Filen er kun nødvendig for om nødvendig å endre stilene for elementene du trenger.
Den samme rollen kan oppfylles av din egen style.css, der du også kan overstyre stiler. Bootstrap-tema er ikke en påkrevd fil, den brukes heller for bestilling. For eksempel har du 3 filer:
bootstrap.css – selvfølgelig er dette koden til selve rammeverket;
bootstrap-theme.css – her overstyrer du stiler for bootstrap-elementer;
style.css – skriv stiler for elementene dine i denne filen.
Da vil du ha orden i koden og i prosjektstrukturen. Men ingen forbyr deg å utføre alle operasjoner i en enkelt fil - style.css og ikke bruke temafilen i det hele tatt.
Det viktigste er å inkludere temafilen og din egen css i html-markeringen senere enn filen med rammekoden, slik at stilene blir vellykket overstyrt.
Et eksempel på hvordan tematikk fungererSom jeg allerede har sagt, inkluderer Bootstrap som standard en bootstrap-temafil. Prøv å koble den til. Jeg merker, koble til etter hovedfilen.
Som standard ser knapper i Bootstrap slik ut:
Og dette er hvordan utseendet deres endres etter å ha koblet filen til temaet:
Som du kan se, vises en liten gradient. Følgelig kan du skrive om koden i bootstrap-tema-filen og få dine egne stiler for knappene. Men du kan spørre, hvorfor ikke gjøre disse endringene direkte i bootstrap.css? Vel, faktum er at nye versjoner av rammeverket stadig blir utgitt, og hvis du bestemmer deg for å oppgradere, vil det være vanskelig å implementere endringene dine i den nye versjonen. Det anses som god form for en utvikler å ikke røre kildekoden når man kan lage en egen fil og beskrive endringene der. Det er mye smartere og mer praktisk.
Hvordan installere nye Bootstrap-temaer lastet ned fra Internett?Det er ganske mange nettsteder, for det meste utenlandske, hvor du kan laste ned en haug med temaer og maler gratis. For å unngå forvirring, la oss vurdere et nettsted designet med Bootstrap som en mal, og et tema som et sett med CSS-regler som overstyrer standardutseendet til elementer.
Slike temaer kan lastes ned for eksempel fra bootswatch.com/, og ved hjelp av en søkemotor kan du finne dusinvis av andre.
Det generelle prinsippet for å installere slike temaer avhenger av nettstedet der du laster dem ned. Hvis du kan laste det ned i bootstrap-tema-format, flott, last det ned og koble det til. På bootswatch, for eksempel, må du laste ned bootstrap.css og erstatte standard rammestilfil med den. Det er også et alternativ med færre kilder.
Fra og med denne artikkelen vil vi begynne å studere Twetter Bootstrap 3-rammeverket, som oftest brukes til å lage nettsider, administrasjonspaneler, landingssider og nettapplikasjoner, da det sikrer enkel utvikling, tydelig struktur og tilpasningsevne på sidene.
Installere en Basic Bootstrap 3-malFor å bruke Bootstrap 3-verktøy og metoder, må du gå til http://getbootstrap.com og laste ned arkivet med css, fonter, js-mappene og de tilsvarende filene i dem.
Hvis du ikke vet hvordan du kobler til CSS-stiler og js-skript, anbefaler jeg å se på denne og denne artikkelen, og i vårt tilfelle er CSS-stiler koblet sammen i seksjoner
og skript før den avsluttende taggen
nederst på siden.Jeg vil også merke meg at bruk av filene bootstrap.min.css og bootstrap.min.js vil være til nytte for nettstedet ditt, siden disse filene er mindre i størrelse og vil ha en positiv effekt på lastehastigheten.
Koble til fonter fonter kan gjøres på to måter:
Det andre alternativet er å foretrekke, men uansett hvilken metode du velger, vil tilkoblingen fortsette slik
@font-face( font-family: glyphicons-halflings-regular; src: url(/fonts/glyphicons-halflings-regular.eot); src: local(glyphicons-halflings-regular), url(fonts/glyphicons-halflings- regular.ttf); ) h2( font-family: glyphicons-halflings-regular,sans-serif; )
eller rettere sagt i stilkoden for den første metoden, og sett inn all teksten inni den i css-filen for den andre.
jquery installasjonFor at Bootstrap 3 skal fungere ordentlig, må du i tillegg laste ned jquery-biblioteksfilen fra den offisielle nettsiden jquery.com via lenken og plassere den i js-mappen på nettstedet ditt.
Jquery-tilkoblingen skjer før den avsluttende taggen
Informasjonskapsler gjør det enklere for oss å tilby deg våre tjenester. Med bruken av våre tjenester tillater du oss å bruke informasjonskapsler.
, men før bootstrap.js-filen
siden jquery skal lastes før bootstrap.
Bootstrap 3 rutenett og skjermstørrelserGrunnlaget for Bootstrap er et sett med klasser som et 12-kolonne rutenett (col-) er bygget på. Innenfor rutenettet støttes 5 typer skjermer -xs- -sm- -md- -lg- -xl-.
- -xs- skjermstørrelse mindre enn 575px;
- -sm- skjermstørrelse mer enn 576 px og ikke mer enn 767 px;
- -md- skjermstørrelse mer enn 768 piksler og ikke mer enn 991 piksler;
- -lg- skjermstørrelse mer enn 992 px og ikke mer enn 1199 px;
- -xl- skjermstørrelse mer enn 1200px;
Dermed betyr en div med klasse col-lg-12 at på en stor skjerm vil div-kolonnen ta opp 12 kolonner eller 100 % av bredden, tilsvarende vil en div col-sm-6 på en smarttelefonskjerm ta opp 6 kolonner eller 50 % av bredden.
Typer nettingbeholdere. Layout i gummiHovedtypene av beholdere for et rutenett er beholder- og beholder-væskeklassene.
Når det brukes inne i en beholder, vil rutenettet ditt visuelt okkupere en tredjedel av skjermen i midten, med alle 12 kolonnene plassert i dette området.
Ved å plassere rutenettet i container-fluid-klassen vil alle layout-elementer plasseres på tvers av hele skjermen, som en gummi, og etter hvert som bredden minker, vil de bevege seg mot hverandre.
Det er ingen spesifikk anbefaling for bruk av beholder og beholdervæske, siden alt avhenger av designoppsettet og hensikten med oppsettet, men det er hensiktsmessig å bruke beholdervæske for adminpanelet til et nettsted og en beholder.
I tillegg kan -fluid-klassen brukes ikke bare på containerklassen, men også på radstrengen, for å ordne elementer i en rad. Men hvis du plasserer radvæsken i en vanlig beholder, vil du ikke merke forskjellen. Denne kombinasjonen brukes best utenfor div.containeren, slik:
Hei, jeg er en Bootstrap 3-mal
Beholderen min er ikke flytende!
Og jeg er radflytende! Linjer for plassering av elementerRadklassen brukes til å plassere rutenettelementer i en rad, dette lar deg ordne dem horisontalt, men du må ta hensyn til at summen av indeksene i raden ikke skal være mer enn 12, ellers vil det siste elementet være flyttet til andre rad.
Overskrift 1 Overskrift 2 Overskrift 3
Hvis du reduserer nettleserens sidestørrelse, vil overskriftene stilles opp i en vertikal liste fra en horisontal rad.
ElementsynlighetsklasserBootstrap 3-layoutsystemet gir tilleggsklasser for å vise eller skjule elementer på forskjellige enheter og skjermer. De er utpekt som synlig-*-* og skjult-*.
Klassen for å vise synlig-*-* etter den første bindestreken er det vanligvis en skjermtypeidentifikator (xs, sm, md, lg, xl), og etter den andre streken kolonnestørrelsen (1-12). For eksempel visible-lg-6 - elementet er synlig på en stor skjerm, 6 kolonner bred.
Skjuler klasse skjult-* Etter bindestreken er det en skjermtypeidentifikator (xs,sm,md,lg,xl), for eksempel vil et markup-element med hidden-xs-klassen ikke være synlig på små enheter (skjermstørrelse mindre enn 575 piksler).
Ved å kombinere disse elementene kan du vise eller skjule div-beholdere:
Overskrift 1 Overskrift 2
Den første tittelen vil være synlig på store enheter, mens den andre vil forsvinne på små skjermer. For å gjøre dette, reduser størrelsen på nettleservinduet slik at størrelsen er lik bredden på skjermen på en mobilenhet.
Også i div-beholderen i klassen, spesifiser show eller hidden, men i dette tilfellet vil ikke visningsegenskapene endres når skjermen endres: hvis synlig, så er det synlig, hvis skjult, så vil bare fjerne ordet skjult fra klassen lar deg se ønsket element.
Mediespørringer i Bootstrap 3For å bruke CSS-mediespørringer, må du spesifisere spesialsymbolet @media i css-filen og minimum og/eller maksimal skjermbredde i parentes. Hvis du i vanlig css-markering trenger å skrive skjermstørrelser i piksler, kan du i bootstrap 3 skrive følgende konstruksjon:
@media(min-bredde: @skjerm-sm-min)( ... ) @media(min-bredde: @skjerm-md-min)( ... ) @media(min-bredde: @skjerm-lg- min)( ... )
Skifte rekkefølgen på elementeneEn annen interessant klasse som lar deg flytte blokker inne i en container, push-klassen vil flytte elementet til høyre, og pull-klassen til venstre.
Når du kombinerer fra tilstøtende beholdere, kan du endre rekkefølgen på sistnevnte når du endrer skjermstørrelser. I dette eksemplet, på en stor skjerm (-lg-) er overskrift 2 plassert til venstre og overskrift 1 til høyre, når skjermbredden reduseres til middels størrelse (-md-), vil elementene skifte og rekkefølgen vil bli sekvensiell.
Overskrift 1 Overskrift 2
La meg fullføre dette første bekjentskapet med Bootstrap 3-layoutsystemet; du har lært hvordan du installerer malstiler og skript, grunnleggende rutenettelementer, mediespørringer, beholdertyper, etc. I de følgende artiklene vil vi se på hjelpe- og tilleggselementer: menyer, knapper, skyveknapper, ikoner og mye mer.
24. februar 2012 kl. 21:25 Twitter Bootstrap-basert brukergrensesnitt for nybegynnere- webdesign
Innledende I fritiden min, som en hobby, utvikler jeg en ensides aggregator med interessante nyhetsstrømoverskrifter. På et tidspunkt var den grunnleggende funksjonaliteten til prototypen klar, det eneste som manglet var avkrysningsboksen ved siden av oppgaven "Design" Forklaring av problemet For å få et vakkert brukergrensesnitt uten å mestre magien til en designer (du har bare grunnleggende kunnskap om maling) og en programmerer (du har kun grunnleggende kunnskap om html og css) .
Siden består av følgende elementer
- Navn
- Skjema for å sende lenke til nyhetene
- Skjema for å sende unik leserkode på e-post
- Påmeldingsskjema for unik leserkode
- Liste over nyheter gruppert etter dato (dato, klokkeslett, tittellink, antall klikk, nyheter kan leses eller nye)
- Link til rss
- Link til chrome-utvidelsen
- utgivelses-ID
- tilbakemelding på e-post
... ...
Den andre linjen er nødvendig for å automatisk tilpasse grensesnittet til enheter som støttes av Bootstrap.Trinn 2. Design "kjøttet". Med "kjøtt" mener jeg nyhetslisten. Den enkleste måten å gjøre dette på er å bruke et bord med rammer deaktivert. Den første kolonnen er datoen (kun én gang per gruppe), den andre kolonnen er klokkeslettet, den tredje er tittelen og antall overganger. Alt dette, i henhold til Bootstrap-reglene, må pakkes i en beholder:
| (Dato) | (Tid) | (Tittel) ((Antall overganger)) |
For leste nyheter angir vi en spesiell klasse:
(Overskrift) Trinn 3. Skjema for å sende lenke til nyhetene. Her er alt enkelt igjen, Bootstrap tilbyr flere ferdige skjemastiler: et vanlig skjema, et enlinjeskjema, et søkeskjema... Vi trenger et annet, legg det til i beholderen foran bordet:
Legg til ...
class="span10" - Bootstrap forutsetter å bygge et grensesnitt basert på et rutenett med 12 kolonner; elementene våre kan justeres langs det. Gjennom den vitenskapelige metoden prøving og feiling kom jeg frem til inngangsfeltets bredde lik 10. Trinn 4,5,6. En lue. Mine ideer om hvordan en brukervennlig nettside skal se ut foreslår en minimalistisk stil: alt unødvendig er skjult, alt som ikke kan skjules er blekt. Vi skjuler skjemaene i en rullegardinmeny, gjør lenker til rss og chrome extension blekne. Vi pakker alt dette inn i en overskrift, som vi limer til toppen av nettstedet (class = "navbar navbar-fixed-top"):
*** ...
Selve skjemaene:
... × Send en unik kode på e-post Avbryt sending × Skriv inn en unik leserkode
Lar deg synkronisere nyheter lest på forskjellige datamaskiner.
Avbryt sendingViktig poeng. For at dette skal fungere, må du koble til et par skript:
...
...
utgivelse 2012/02/19 23:49 *****
ResultEpilogue Twitter Bootstrap gjorde det mulig, uten mye innsats og kunnskap, uten å skrive en eneste linje med CSS og uten mye brudd på html-koden, å få et veldig fint prototypegrensesnitt som du ikke skammer deg over å vise til folk. Hvis du er interessert, vil jeg i neste artikkel fortelle deg hvordan du, uten dyp kunnskap om PHP + MySQL (med bare grunnleggende programmeringsferdigheter), kan implementere funksjonalitet som lar deg vise million-dollar-ideen din ikke bare på papir, men i form av en fungerende prototype.Takk for din oppmerksomhet!
UPD: Jeg vil ikke fjerne emnet i "Jeg er PR", jeg fjernet alle unødvendige lenker
Gutter, jeg synes Bootstrap er en veldig kul ting. Jeg vil prøve å forklare hvorfor det er slik i denne artikkelen. Vel, la oss gå. Jeg beklager umiddelbart for at nesten hele første halvdel av artikkelen er skrevet uten bilder, det er bare en teori, en forklaring på hvordan rutenettet fungerer. Men dette er veldig viktig! Alle av dere som trenger det vil ta det i hans hender, lese det og, håper jeg, forstår. Den andre halvdelen av artikkelen oppfattes allerede enklere, det er flere eksempler med skjermbilder.
Bootstrap - hva er det?Så la oss starte med et viktig spørsmål. Bootstrap er et CSS- og JS-rammeverk, i hovedsak et sett med filer med ferdig skrevet kode. Målet for utviklere av nesten alle rammeverk er å forenkle nettstedutvikling for seg selv og andre som vil ha tilgang til verktøyet. Når det gjelder Bootstrap er det helt gratis, så du kan bruke det på hvilken som helst måte, redigere kildekoden og tilpasse rammeverket slik du vil. Det er perfekt.
Installerer BootstrapHvis du bare trenger å koble rammefilene til et HTML-dokument (for eksempel for praksis), laster du bare ned rammeverket fra den offisielle nettsiden getbootstrap.com, kopierer filene til prosjektet og kobler til de du trenger. La meg gi en kort oversikt over disse filene:
Dette er standardsettet for rammeverket. Faktisk kan du enkelt tilpasse den og endre den slik at den passer deg. For eksempel, ikke bruk skript i det hele tatt eller koble til bare ett rutenett. Generelt vil vi også snakke om dette.
Russisk Bootstrap-dokumentasjonNår du besøker getbootstrap, la du sikkert merke til at alt her er på engelsk. Vi kunne bruke russisk hjelp til rammeverket. Det er lett å finne. For å gjøre dette, gå fra hovedsiden til delen Komme i gang. Bla helt til bunnen, det vil være en lenke til oversettelser. Se etter russisk der og klikk på det. Det er det, nå er du på den russiske versjonen av nettstedet. Riktignok er ikke alt oversatt her, men et sted rundt 70-80% er nøyaktig, så du vil forstå alt.
Bootstrap rutenettUansett hva man kan si, er hovedelementet i Bootstrap det responsive rutenettet. Generelt, uten det, ville rammeverket mistet nesten all sin verdi, fordi takket være rutenettet kan du raskt lage adaptive maler. Samtidig er du kanskje ikke kjent med mediespørringer i det hele tatt; du trenger dem ikke, fordi rammeverket tar seg av implementering av tilpasningsevne; du trenger bare å tildele de riktige klassene til blokkene.
Hva er disse klassene? La oss gå til dokumentasjonen, det vil hjelpe oss mye. Gå til delen CSS - Grid System. De generelle reglene for å jobbe med et rutenett er enkle; jeg skal liste dem opp nå.
Hvordan jobbe med et rutenett?Tenk på det som en html-tabell. Hvis du noen gang har skrevet HTML-kode for tabeller, vet du at alt innholdet er plassert i tabell-taggen, en rad er plassert i tr-taggen, og deretter plasseres cellene i den - td .
Så alt er likt i rutenettet. Beholderklassen fungerer som en generell beholder for rutenettet. Det er 2 alternativer for bootstrap-gitteret - helt gummi og har fortsatt en begrenset maksimal bredde. Så når den generelle blokken er gitt containerklassen, vil nettstedet ha en maksimal bredde på 1170 piksler. Det vil ikke utvides ytterligere. Naturligvis vil innholdet være sentrert.
Hvis du angir beholder-væskeklassen, vil nettet være helt gummi, det vil si at det ikke vil være noen størrelsesbegrensninger. For eksempel, hvis en person åpner et nettsted på en 1920 piksler bred skjerm, vil han se den i full bredde.
Følgelig er det første når du utvikler et nettsted å bestemme hvordan malen skal se ut - helt gummi, eller bredden må fortsatt begrenses.
Flott, containerblokken skal inneholde en rad med rutenett. Du må plassere alle blokkene som er på en linje i den. Det vil si at hvis vi tar den mest typiske malen: topptekst, hoveddel, høyre kolonne og bunntekst, så er det 3 kolonner. Den første vil bare ha overskriften, den andre vil ha innholdet og sidefeltet, og den siste vil ha bunnteksten. Markeringen for et slikt nettsted vil være noe sånt som dette:
Topptekstinnhold... og bunntekstsidefelt
Men foreløpig er dette feil markering, fordi det mangler... hva? Det stemmer, celler! Når det gjelder Bootstrap, kalles de også kolonner. Bootstrap-nettet består av 12 kolonner. Den kan bygges inn i hvilken som helst blokk med hvilken som helst bredde, minst 1200 piksler, minst 100. Alt dette er fordi bredden på kolonnene er spesifisert ikke i piksler, men i prosenter.
Hvordan fungerer dette 12-kolonne systemet?Så vi kommer til det viktigste spørsmålet knyttet til rammeverket. Tro meg, hvis du forstår dette, er alt annet tull. Det viktigste er å forstå hvordan rutenettet fungerer, og veien til rask adaptiv layout vil være åpen for deg.
For å gjøre dette, bla gjennom dokumentasjonen rett under, der finner du en tabell som inneholder viktige rutenettegenskaper.
Selve kolonnene er forresten merket i Bootstrap med col-klassen, men dette er en sammensatt klasse, så de skriver aldri bare col-. Bootstrap har 4 spesialklasser som er designet for å kontrollere størrelsen på blokker i forskjellige bredder, her er de:
Dette er de 4 klassene, men for å kontrollere størrelsen på elementene brukes tall fra 1 til 12, fordi, som du husker, er det nøyaktig 12 kolonner i rutenettet.
Topptekstinnhold Sidefeltbunntekst
Det er ganske enkelt å forstå. Først av alt lager vi en overskrift; den trenger ikke å plasseres i rutenettet i det hele tatt, siden den uansett vil oppta 100% av bredden (vanligvis). Men vi legger det inn uansett. Hva er denne klassen col-md-12? Som jeg allerede har fortalt deg, er det ingen som bare skriver col-, med denne klassen forteller vi i hovedsak nettleseren:
Dette er en celle | kolonne
På mellomstore enheter (md-klasse) skal bredden være 12 kolonner av 12, det vil si 100 % av radbredden.
Men hva med bredden på andre enheter? På store (lg) skjermer vil det også være 100 %, fordi verdiene for store skjermer er arvet, men for mindre er de ikke det. Det er enkelt: hvis du skrev col-xs-4 , ville kolonnebredden være 33 % på alle enheter, og hvis col-lg-4 , så bare på store. Dette er funksjonen, husk den.
Vel, hvis breddeverdien ikke lagres på mindre skjermer, hva skjer da? Den tilbakestilles. Slik skjer det:
col-sm-4 - på små skjermer vil blokken oppta 33% av bredden, det vil være det samme på md- og lg-skjermer, men på xs, det vil si de minste, vil bredden tilbakestilles til 100%. Så husk en enkel regel til: Hvis ingenting er spesifisert for mindre skjermer, vil blokken vises med 100 % bredde på dem.
Innholdssidepanel
I hovedsak forteller vi nettleseren:
La innholdsblokken være 8 av 12 kolonner bred, og denne situasjonen vil være på små, mellomstore og store skjermer (det er nok å spesifisere for små, for store skjermer, som du husker, er verdien arvet). Men på de minste skjermene vil blokken være 100 % opptatt. Dette er riktig; vanligvis, på mobile enheter, vises nettsteder i én kolonne.
La sidekolonnen være en tredjedel av radens bredde på de samme små, mellomstore og store skjermene. Vel, på de minste, som du allerede har forstått, tilbakestilles også bredden til 100%. Så enkelt er det.
Vel, det er ingenting å forholde seg til bunnteksten. Vel, vi har dekket de grunnleggende prinsippene for hvordan rutenettet fungerer, men vi må fortsatt se hvordan det fungerer...
Bootstrap Nested GridFaktum er at nå har vi delt malen bare i hovedblokker, men inne kan de også deles inn i kolonner. Innholdet kan for eksempel vise produkter i flere kolonner. Hva burde jeg gjøre? Det er veldig enkelt - vi lager nøyaktig det samme rutenettet inni. Den vil bli nestet, men inneholder også 12 kolonner. Hvis vi oppsummerer alt dette, kommer vi til denne konklusjonen:
Det kan være et ubegrenset antall rutenett i enhver blokk. For eksempel, i en blokk med produkter er det et rutenett for å skille produkter; i blokken med ett produkt selv kan du opprette et annet rutenett, for eksempel for å skille priser, tilgjengelighetsinformasjon og tilleggsinformasjon. informasjon.
Nå skal vi prøve å lage et annet rutenett inne i innholdsblokken for å ordne produkter i 3 kolonner. Så, la oss ta blokken der vi har innhold:
Innhold
Og vi skriver i den:
Produktkatalog: Produktnavn 
Produktbeskrivelse
Som du kan se, har vi laget et nytt rutenett inne i innholdet - vi legger en rad inni, og i raden vil det allerede være 3 blokker med produkter. Bare kopier col-sm-4-blokken med produktkortet og lim den inn 2 ganger til, dette er hva du får (du kan ta hvilket som helst produktbilde, jeg tok et stort):
Jeg gikk glipp av et annet viktig poeng: for at bildene skal tilpasse seg blokkene de er plassert i, må hver av dem gis den img-responsive klassen. Hvis du, som meg, synes det er upraktisk å gjøre dette, så bare skriv i din egen style.css slik:
Img( maks-bredde: 100 %; høyde: auto; display: blokk; )
Det er det, lagre denne koden og koble css-filen til prosjektet. Nå vil bildene være adaptive som standard.
Vel, gikk det ganske greit? Ja, men uten bootstrap ville du måtte lide lenger. Det eneste er at når du oppretter et rutenett i en blokk, trenger du ikke lenger å lage en blokk med containerklassen i den. Hvorfor er ikke dette nødvendig? Ja, fordi blokken som rutenettet er opprettet i, fungerer som en beholder.
Dermed kan du lage så mange kolonner du vil i en blokk og lage en mal av hvilken som helst kompleksitet. Og alt dette er mye raskere enn uten Bootstrap, fordi du må skrive all css fra bunnen av.
Responsive verktøyDette er en annen flott funksjon ved bootstrap. Den består i at du kan skjule eller synliggjøre blokker i den bredden du trenger. Skjul for eksempel sidekolonnen helt på smale skjermer, legg til noen nye elementer på mobile enheter, legg til en kolonne på brede skjermer, etc.
Det er mange applikasjonsalternativer, men jeg fortalte deg ikke om det viktigste: hvordan bruker jeg disse verktøyene? For å gjøre dette, legg bare til klasser i ønsket blokk. Hvis du trenger å skjule det, spesifiser bare følgende klasse:
Bunntekst
Hva vil hidden-xs-klassen gjøre i dette tilfellet? Den vil skjule bunnteksten på ekstra små enheter. På alle andre vil blokken være synlig.
Hvis du tvert imot trenger å vise det bare på de minste skjermene, må du bruke visible-xs-block-klassen. I dette tilfellet vil blokken være skjult på alle unntatt de smaleste skjermene. Så adaptive verktøyklasser er skrevet slik:
Vel, et par eksempler for å gjøre det klart:
Slik fungerer det hele. Det er akkurat det og ingen annen måte. Jeg håper du forstår dette. La oss sette det i praksis. Vi har en testmal, om enn en veldig primitiv.
Oppgave: å få sidekolonnen til å forsvinne på små skjermer, og også ett produkt på de minste skjermene. Og slik at på xs-enheter er produktene allerede i 2 kolonner, ikke 3.
Prøv å gjøre det selv, og rediger bare html-koden. Hva må gjøres? Først, la oss se på kolonnen, for å skjule den på sm-skjermer, trenger du bare å legge til skjult-sm-klassen til den.
Flott, nå må det tredje produktet legge til hidden-xs-klassen og den vil forsvinne på de minste skjermene. Vel, klassene til de resterende to varene vil være som følger:
Det vil si at på mellomstore enheter vil blokken okkupere 4 kolonner av 12, som kan oversettes til 33,33% av bredden, og på ekstra små enheter - 50%. Og siden en blokk med et produkt vil forsvinne i denne bredden, vil begge blokkene med produkter være pent ordnet i 1 rad, slik:
Flott! Etter å ha forstått dette, kan du allerede manipulere blokkene på nettsiden på nesten hvilken som helst måte du vil. Prøv å komme opp med oppgaver for deg selv og implementer dem.
Beveg meg hele veienDeretter vil jeg vise deg et annet veldig godt triks - muligheten til å flytte en blokk til høyre eller venstre. La oss si at vi ikke har 3 produkter på rad, men 1. Og den opptar ikke hele bredden. Og din oppgave er å justere den i midten. Dette er enkelt å gjøre hvis du husker at du jobber med et 12-kolonne system.
La oss forlate en blokk med produktet:
Det er nok å gjøre enkle beregninger for å forstå hvor mye du trenger for å flytte blokken for å sentrere den. Den må flyttes 4 kolonner til venstre på mellomstore og store skjermer, og 3 kolonner på små. Slik ser det ut:
Klassen col-md-offset-4 sier: på mellomstore og store skjermer, forskyv blokken til venstre med 33 % av bredden til overordnet container (1/3 venstre forskyvning, 1/3 blokkbredde, ⅓ høyre forskyvning, resulterer i sentrering).
Klasse col-xs-offset-6: På ekstra små og små skjermer, skift til venstre med 25 % (¼ polstring til venstre, ½ blokkbredde, ¼ polstring til høyre).
Jeg håper du forstår hovedsaken og bruker disse timene om nødvendig.
Bootstrap-komponenter og eksempler på deres brukJeg gratulerer deg. Vi har nettopp dekket det viktigste temaet knyttet til rammeverket. Det er rutenettet og det å jobbe med det som er viktig. Arbeid med komponenter betyr allerede at du ganske enkelt går til dokumentasjonen, kopierer koden til ønsket komponent der og om nødvendig endrer den for å passe dine behov. Men jeg vil likevel gi nedenfor noen eksempler på hvordan du bruker komponentene.
Raske flyter og kansellering av innpakningTrekk-venstre og trekk-høyre-klassene lar deg raskt få hvilken som helst blokk til å flyte ved å sende den til venstre eller høyre. Ikke glem å kansellere flyten. Du kan bruke clearfix-klassen til dette.
Bootstrap: Horisontal responsiv (mobil) menyVi vil legge til følgende komponenter direkte i malen, så hvis du vil jobbe med koden og ikke bare lese, følg alle trinnene etter meg.
Egentlig kan du med Bootstrap veldig enkelt lage ikke bare en adaptiv meny, men en såkalt mobil, som er fullstendig kollapset på små skjermer og skjult under én knapp. Denne teknikken kan sees i mange responsive maler og er faktisk veldig enkel å implementere. Eksempelet på mobilmenykoden er i dokumentasjonen, jeg tar den derfra og gjør om litt.
Så det første jeg vil gjøre er å fjerne blokken med overskriften, fordi menyen vår faktisk vil være overskriften i tilfellet med malen min. Menykoden må plasseres før alt innhold på nettstedet, også før beholderblokken. Hvorfor? Ja, du vil nå selv se at rutenettet allerede er innebygd i navigasjonslinjen. Så her er koden:
Byttknapp Logo/navn
Søk
Ikke bli skremt av det faktum at det er mye kode. Slik ser siden ut nå:
Men hvis menyen ikke tar opp hele bredden av skjermen, er det fornuftig å sentrere den. For å gjøre dette, bør du deretter opprette en ekstra wrapper-blokk for menyen, som skal plasseres etter blokken med container-fluid-klassen. Ikke glem å lukke denne blokken. Jeg ga den navbar-wrap-klassen. Her er stilene for den:
Det vil si at du ganske enkelt kan begrense bredden og sentrere den. Eller bytt først beholdervæske med beholder .
Som du kan se, la vi til en logo, to enkle elementer, et rullegardinelement og et søkeskjema i menyen. Det vil si at det var mange elementer. Du kan enkelt tilpasse menyen for deg selv ved å legge til dine egne klasser til den. Men foreløpig er målet mitt ganske enkelt å vise deg denne komponenten.
Slik vil menyen se ut på enheter med en skjermbredde på mindre enn 768 piksler:
Som du kan se, har menyen kollapset. Den åpnes når du klikker på knappen i øvre høyre hjørne. Bare logoen ble igjen på skjermen.
NedtrekksmenyenSamtidig kan du fra eksemplet ovenfor forstå hvordan et rullegardinmenyelement opprettes i Bootstrap; la oss trekke ut denne koden for et mer detaljert utseende:
Så beholderen for et rullegardinelement er et vanlig listeelement med rullegardinklassen. Inne i den er hovedlenken, ved å klikke på den åpnes en rullegardinmeny. Det er veldig viktig å tilordne det et dataattributt, som du ser i koden; uten det vil ingenting fungere. Du bør også sørge for at bootstrap.js-filen er koblet til nettsidene.
Et spenn med caret-klassen er ikke noe mer enn en pil, takket være den kan du forstå at elementet er et rullegardinelement, og under selve menyen dannes ved hjelp av en standard punktliste. Det er det, alt er ganske enkelt, du kan bruke denne koden til å implementere rullegardinelementer.
Legge til brødsmuler (brødsmuler) ved hjelp av BootstrapI mange butikker kan du finne en såkalt blokk med brødsmuler, som inneholder hele veien til den aktuelle siden. Dette er også enkelt å gjøre ved å bruke rammeverket, se koden:
Faktisk er det nok å spesifisere brødsmuleklassen for en nummerert liste, og legge inn de vanlige listeelementene i den. Forresten, jeg vil sentrere overskriftene på andre nivå i malen (dette må skrives i css):
H2( tekstjustering: senter; )
Hvis du på en eller annen måte vil endre utseendet til brødsmuler, bruker du bare .breadcrumb-velgeren i CSS. Slik kan du for eksempel fjerne bakgrunnsfargen:
Brødsmule( bakgrunn: gjennomsiktig; )
Slik ser siden ut nå:
Som standard vil bordet strekke seg over hele vinduet, så pakk det inn i en boks med begrenset bredde for å begrense dimensjonene. Som standard ser det forferdelig ut, men hvis du legger til tabellklassen i tabellkoden, blir alt mye bedre:
