Seksjon 1


Bootstrap Oversikt

Bootstrap er det mest populære rammeverket for nettutvikling. Bootstrap gjør det enkelt for alle med arbeidskunnskap om HTML og CSS og en webhotellkonto veldig raskt å utforme og publisere et avansert, mobil responsivt nettsted. Du kan få den nyeste versjonen (Bootstrap 4.0.0 på tidspunktet for denne artikkelen ble publisert) her.

Denne artikkelen er for alle som har kunnskap om HTML og CSS og tilgang til en webhotellkonto som ønsker å designe et nytt nettsted eller redesigne et eksisterende nettsted.

Denne artikkelen vil også være til nytte for eller for en websideeier eller -sjef som vil føre tilsyn med utformingen av nettstedet deres. En grunnleggende forståelse av alternativene som er tilgjengelige ved bruk av Bootstrap, det mest populære nettutviklingsrammeverket, vil hjelpe en nettstedssjef med å forstå alternativene og kommunisere mer effektivt med webdesigneren.

Bootstrap og webhotell

Det er to grunnleggende måter å bruke Bootstrap på. Det ene er tilgang til via Bootstraps Content Delivery Network (CDN), slik at du kan koble til Bootstrap fra HTML-dokumentene dine. En CDN er et system med distribuerte servere som gir innhold til brukere. Bootstraps CDN gir en enkel måte å bruke Bootstrap på uten å installere den på webserveren.

Koble til Bootstrap CDN CSS-filer fra HTML-dokumenter er den enkleste og vanligste metoden for å bruke Bootstrap. Mange temaer og maler antar standard for denne metoden for å bruke Bootstrap, da den fungerer med hvilken som helst webhotellkonto og ikke krever rottilgang til serveren..

Den andre metoden for å bruke Bootstrap er å installere den på serveren din eller den virtuelle serveren (hvis du har VPS-hosting). Dette gir deg større kontroll over Bootstrap, noe som muliggjør mer tilpasning og kontroll over infrastrukturen, noe som kan være viktig hvis du har et nettsted med veldig høy trafikk.

For å installere Bootstrap på webserveren, trenger du enten kontroll over den dedikerte serveren eller VPS-serveren (dvs. root-tilgang) for å installere Bootstrap, eller webhotell-tjenesten din må ha en mekanisme som du kan installere Bootstrap i en delt hosting-konto. Delte hostingkontoer har vanligvis ikke root-tilgang, selv om webhotell-tjenesten din kan tilby Bootstrap som et alternativ med ett klikk. Sjekk dokumentasjonen for webhotellstjenesten for Bootstrap-installasjonsfunksjoner.

Ellers tilbyr noen av de beste webhotellene som er omtalt i Hostadvice "ett klikk" Bootstrap installer, eller du kan ganske enkelt installere det fra c-panelet ved å bruke Softaculous .

Hvis du har en dedikert server eller VPS-hosting og ønsker å installere Bootstrap, se ressursdelen nedenfor for en kobling til Bootstraps offisielle dokumentasjon, inkludert detaljert for installering av Bootstrap.

Noen webhotell-tjenester har til og med Bootstrap webhotellpakker, som er webhotellpakker spesielt for hosting av Bootstrap-nettsteder.

Hva du trenger å vite for å bruke Bootstrap

Bootstrap er veldig populært blant alle nettutviklere fra nybegynner til ekspertnivå. Grunnleggende kunnskap om HTML, CSS og hvordan du publiserer nettstedet til webhotellkontoen din er alt du trenger for å bruke Bootstrap.

Selv om du har tenkt å ansette noen til å designe et nettsted for deg, er det nyttig for nettstedseiere å lære det grunnleggende om det mest populære nettdesignrammeverket, slik at du kan kommunisere mer effektivt med designere.

Bootstrap henter sin funksjonalitet fra standardverktøy som er tilgjengelig for alle webhotellkunder: HTML, CSS, JavaScript og JQuery (et JavaScript-bibliotek). Mens Bootstrap bruker JavaScript for noe av den interaktive funksjonaliteten, trenger du ikke å være programmerer for å designe nettsteder med Bootstrap.

Hvorfor Bootstrap

Mobil responsiv – Bootstrap er en “mobile-first” -rammeverk, noe som gjør det enkelt å lage mobile responsive nettsteder.

Konsistent design på hele nettstedet ditt – Bootstrap bruker et sentralt bibliotek med designmaler og stiler for å hjelpe deg med å lage og opprettholde et jevn designutseende.

Gratis og åpen kildekode – Bootstraps gratis for alle å bruke, og utviklere kan bidra til selve Bootstrap-prosjektet.

Lett å bruke – Alle med arbeidskunnskap om HTML og CSS kan lage et vakkert, funksjonelt nettsted ved hjelp av Bootstrap. Arbeidskunnskap om JavaScript og JQuery ville være nyttig for å gjøre nettstedet ditt mer interaktivt.

Enkelt å publisere på hvilken som helst webhotellkonto – Du trenger bare å bruke en FTP-klient (File Transfer Protocol) for å publisere nettstedet til webhotellkontoen din.

Avsnitt 2

Få Bootstrap for prosjektet ditt

Selv om du kan laste ned og installere Bootstrap hvis du har en dedikert server eller Virtual Private Server (VPS) webhotell, kobler vi for denne primeren til Bootstrap CDN, som er mye enklere enn å installere Bootstrap på serveren.

Hvis du har en dedikert server eller VPS-hosting med rottilgang til serveren, kan du installere Bootstrap direkte på din dedikerte server eller virtuelle server. Dette krever betydelig mer tekniske ferdigheter enn nødvendig for å bare koble til Bootstrap fra HTML-filene dine.

Dette er hva du trenger i hvert HTML-dokument for å bruke Bootstrap. Merk at hvis du begynner med en mal eller et tema, vil alle disse elementene allerede være til stede i HTML-dokumentene. Det er mange maler og temaer tilgjengelig (se ressursdelen nederst i denne artikkelen).

Legg til HTML5-doktypen helt til toppen av HTML-dokumentet og sett språket til språket ditt.

boostrap-kodeeksempel 1

Legg til metatsett for tegnsett rett under elementet.

boostrap-kodeeksempel 2

Siden Bootstrap først er mobil, må du angi metafornavnet for visningen som følger, sørge for at nettlesere gjengir nettstedet ditt ordentlig, og aktiverer berøringszoom på enheter.

boostrap-kodeeksempel 3

Kobling til Bootstrap 4.0.0 CSS, og gjør all CSS-styling tilgjengelig for deg.

boostrap-kodeeksempel 4

Legg til noe plassholderinnhold som du kan erstatte senere med det virkelige innholdet på nettstedet.

Bootstrap-kodeeksempel 5

Link til Bootstrap JavaScript nederst i elementet.

bootstrap-kodeeksempel 6

Det er alt som trengs for å komme i gang med å bruke Bootstrap 4.0.0! Bootstrap har omfattende dokumentasjon og et aktivt samfunn. Tillegget til denne artikkelen inneholder lenker til dokumentasjon, opplæringsprogrammer og andre nyttige ressurser.

Avsnitt 3

Å bygge et nettsted med Bootstrap

Beholdere: byggesteinene til Bootstrap

Beholdere er de grunnleggende byggesteinene til et Bootstrap-nettsted. En fast beholder (svarer til skjermstørrelse) forblir den samme størrelsen til nettleseren når visse bruddpunkter, som representerer visningen av de forskjellige enhetene folk bruker for å se nettsteder.

Det er en hovedcontainer som du plasserer containere for hver komponent på nettstedet ditt, inkludert alt fra navigasjonsfeltbeholderen ned til bunntekstcontaineren og alt derimellom. Tenk på en container som en boks som inneholder innholdet.

Beholdere med fast bredde

Her er en beholder med fast bredde som bruker Bootstraps beholderklasse for fast bredde.

containerkodeeksempel 1

Væskebeholdere

En væskebeholder spenner over hele bredden på visningsområdet uavhengig av hvilken enhet som brukes. En typisk bruk for en væskebeholder ville være for en navstang eller en bunntekst. Her er et eksempel på en enkel væskebeholder.

Mobile responsive breakpoints

Bootstrap starter med antagelsen om at en besøkende besøkende bruker en mobiltelefon for å se nettstedet ditt, og endrer utformingen av nettstedet avhengig av enheten som brukes av besøkende og dine spesifikasjoner..

Du spesifiserer hvilket brytepunkt, punkt der oppsettet endres, tilpasser oppsettet etter enhetsvisningsstørrelse. Bootstrap tar seg av mediesøkene for deg, bestemmer hvilken visningsport (enhetsskjermstørrelse) hver besøkende bruker, gjør justeringer som indikert. Du må bare fortelle Bootstrap hvor du skal angi brytepunktene.

For alle størrelser over ekstra små (xs) bestemmer Bootstrap visningsstørrelsen gjennom mediesøk, som oppdager enhetsvisningsstørrelsen til hver besøkende på nettstedet ditt og svarer riktig.

tabell 1 bootstrap størrelser

Stabling for mobil respons

Stabling er et grunnleggende konsept for å få nettstedet ditt til å oppføre seg slik du vil ha det i forskjellige skjermstørrelser. Når du setter noen rader i en beholder, angir du også bruttepunktet, noe som betyr størrelsesvisningsområdet der kolonnene begynner å stable oppå hverandre i stedet for side om side.

Ideen her er at det er vanskelig om ikke umulig å lese et nettsted med flere kolonner i et mindre utsiktspunkt, så kolonnene stabler den ene på den andre for å gjøre lesing og bla gjennom innholdet veldig enkelt for besøkende på nettstedet..

Hvis du for eksempel opprettet en to-kolonneoppsett i en container, og angir brytepunktet til sm, noe som betyr at for små (telefoner på liggende) og ekstra små enheter (inkludert uten å være spesifisert siden ekstra liten er Bootstraps standard), vil kolonnene stakke en oppå hverandre. For bærbare datamaskiner og andre større enheter vil de to kolonnene vises ved siden av hverandre.

Hvis du ikke spesifiserer et brytepunkt, vil Bootstrap som standard være det ekstra lille utsiktspunktet som brytepunktet (dvs. mobiltelefoner). Her er HTML for en to-kolonneoppsett med et bruddpunkt av liten (sm), som vil starte stabling av de to kolonnene dine for de som ser på nettstedet ditt ved å bruke en telefon på liggende og mindre (xs).

stabling av eksempelkode

Det tolvkolonnede rutenettet

Bootstrap deler siden inn i et 12-kolonnes rutenett (ligner på hvordan de fleste CSS-rammer), noe som gjør det enkelt å utforme nettstedet ditt.

Du kan endre layout og brytepunkter slik at de passer dine behov, og angi antallet av de tolv tilgjengelige Bootstrap-kolonnene dine layoutkolonner skal spenne over. For eksempel kan du spesifisere en venstre kolonne som skal spenne over åtte kolonner og den høyre kolonnen for å spenne over fire kolonner, sammen med å spesifisere brytepunktet når de to kolonnene skal starte stabling. Vær oppmerksom på at 8 + 4 = 12. Når du legger ut nettstedet ditt, må du sørge for at antall kolonner legger opp til 12.

12 kolonnen rutenettkode

De to første kolonnene tar opp to kolonner, og den siste kolonnen tar opp 8 kolonner med tilgjengelige Bootstraps 12. Jeg har opprettet en grense i mine egne stiler rundt disse kolonnene for å gjøre kontrasten lettere å se.

Her er de tre kolonnene på en stor skjerm:

3 kolonner stor skjerm

Og her er de samme 3 kolonnene som vises på en telefon (brytepunktet ble satt til “sm”), kolonnene stablet responsivt den ene på den andre for å være tilgjengelige med en telefon eller nettbrett.

3 rader stablet responsivt

Navigasjonslinje

Hjørnesteinen på de fleste nettsteder er navigasjonslinjen. Vanligvis plasserer du hovednavigeringslinjen for nettstedet ditt øverst på siden. Det er mange alternativer for navigasjonsfelt, men vi vil bare fokusere på en enkel navigasjonsfelt her for å komme i gang.

Her er en navigasjonslinje basert på et eksempel gitt på nettstedet Get Boot Strap. Denne navigasjonslinjen inneholder en rullegardinliste som er tilgjengelig for større skjermstørrelser (bærbare datamaskiner og stasjonære PCer) og en såkalt “Hamburger-meny” som lett kan brukes fra en mobil enhet. Det er et navigeringslinjemerke på venstre side og et inline søkeskjema på høyre side (for besøkende å søke på nettstedet ditt).

navigasjonsstrekkode

Slik ser denne navigasjonslinjen ut på stasjonære maskiner.

stor navigasjonslinje

Og slik ser denne navigasjonslinjen ut på nettbrett og telefoner. En “hamburgermeny” erstatter navigeringen, og alle elementene er stablet for enklere tilgang fra et nettbrett eller telefonutsikt.

responsive navigasjonsfelt på mobilen

Bootstrap Typography

Bootstrap 4.0.0 har, som tidligere Bootstrap-versjoner, standard typografistiler som du kan overstyre med CSS.

Kroppstekst

Bootstrap 4 bruker en standardtekststil for HTML-elementet er 16px, og bruker 1rem (lik HTML-elementet) skriftstørrelse på elementet.

Fordi Bootstrap bruker den opprinnelige fontstacken (standardbesøk for nettstedbesøkende), faller standardverdiene tilbake til Helvetica Neue, Arial og sans-serif.

HTML-overskrifter

Bootstrap støtter .h1 (Semibold 36px) til h6 (Semibold 12px) som standard.

Display overskrift

Bootstrap tar overskrifter et skritt utover vanlige HTML-overskrifter med “Display Headings, beregnet på å skille seg ut fra vanlige overskrifter, og støtter fire størrelser: .display-1, .display-2, .display-3 og .display-4.

Lead-setningen og Mark

Bruk Bootstraps .lead-klasse for å få de “føre” setningene til å skille seg ut. Bruk elementet til å fremheve viktige punkter.

typografi kodeeksempel

typografi føre og merke

Blockquotes

Elementet er standard i HTML5, selv om du kan bruke Bootstraps styling på det ved å bruke .blockquote-klassen..

Du kan inkludere og -elementene i blokka.

eksempel på blockquote-kode

blockquote

lister

Du kan bruke Bootstraps .liste-unstyled klasse for lister uten listestil og venstre marg. For å vise lister inline kan du bruke .list-inline og .list-inline-element

lister kodeeksempel

Selvfølgelig kan du bruke ordinære bestilte og uordnede lister, i tillegg enten blokkere eller inline.

skjemaer

For Boostrap-skjemaer bruker du .form-control-klassen ved hjelp av tekstlige, og elementer. Den beste fremgangsmåten for å få avstanden riktig er å pakke inn etikettene og kontrollene i en bruker Bootstraps .formgruppeklasse, selv om du kan bruke en hvis du foretrekker det.

Det er mange skjemaalternativer tilgjengelig gjennom Bootstrap 4.0.0 (se offisiell dokumentasjon for alle alternativene), men å lage et enkelt inline-skjema vil gi deg en følelse av hvordan du oppretter et skjema ved hjelp av Bootstrap.

former kodeeksempel

Det er mye mer å danne. Se lenken til Bootstraps omfattende dokumentasjon i ressursdelen nedenfor.

Bootstrap 4: Ni knappestiler

Bootstrap 4 tilbyr ni knappestiler ved å bruke .btn-klassen etterfulgt av den spesifikke klassen. Her er alle ni knappestiler.

knappen skriver inn kode

bootstrap knapptyper

Mobile responsive bilder

Bootstrap gjør det enkelt å enkelt stille inn bilder slik at de automatisk skaleres riktig på tvers av alle enheter ved å bruke .img-fluid (erstatter Bootstrap 3s .img-responsive) klasse, bruker maks bredde: 100% og høyde: auto til bildet, skalering av bilde for å skalere til overordnet element.

responsive bildekode

Her er det flytende bildet gjengitt på en stor skjerm.

bilder på skrivebordet

Og her skaleres bildet riktig og gjengis på en liten skjerm.

responsive bilder skalert for mobil

Avrundede hjørner, sirkler og miniatyrer

Lag avrundede hjørner eller sirkler ved å bruke .rounded- * funksjonsklassene, bruk .img-thumbnail for å gi bildene dine en kant med 1 piksel.

eksempel på avrundede hjørner

avrundede hjørner sirkler miniatyrbilder

Bootstrap-komponenter

Bootstrap har noen nyttige komponenter for å legge til funksjonalitet og stil på nettstedet ditt. Her vil vi dekke et par eksempler. Du finner mye mer i Bootstraps offisielle dokumentasjon koblet til i ressursdelen nedenfor.

Jumbotron

En Bootstrap Jumbotron er en stor melding som er ment å trekke besøkende til nettstedets besøkende. Nettutviklere bruker ofte Jumbotrons for handlinger på nettsteder og destinasjonssider. Bruk klassen .jubotron for å lage en Jumbotron. Du kan også style den etter ønske.

eksempel på jumbotronkode

jumbotron med knapp

kort

Kort er en måte å organisere innhold for å skille seg ut. Bootstrap tilbyr mange stylingalternativer, men her viser vi et grunnleggende kort.

eksempel på kortkode

bootstrap-kort

Avsnitt 4

Bootstrap Resources

Bootstrap har et sterkt fellesskap, utmerket dokumentasjon og mange temaer og maler av høy kvalitet. Her er noen nyttige Bootstrap-ressurser tilgjengelig online:

Get Bootstrap – Det offisielle stedet å få Bootstrap og den offisielle Bootstrap-dokumentasjonen. Dokumentasjonen er utmerket og omfattende.

Start Bootstrap – Et nettsted som er viet til å tilby gratis temaer og maler.

Bootsnipp – Et flott sted å finne nyttige kodebiter og designelementer du kan bruke i dine egne Bootstrap-prosjekter.

Font Awesome – Dette ikonsettet og verktøysettet som brukes i Bootstrap 4 erstatter Glyphicons brukt i Bootstrap 3.

Theme Forest – Dette er et bibliotek med temaer og maler, inkludert mange for Bootstrap 4.0.0.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me