TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Komme i gang med Bootstrap

15

For ti år siden var det en drøm å ha et nettsted og bare mulig for de tekniske nørdene. I dag kan hver vanlige mann starte et nettsted eller en blogg takket være populariteten til gratis nettstedbyggerverktøy og UI -rammer. Siden byggebransjen er veldig konkurransedyktig, må hvert selskap fokusere på å tilby bedre enn andres for å tiltrekke seg sluttbrukere. Bootstrap er en av de populære rammene, og vi vil forklare hvordan du kan begynne å lære Bootstrap for å bygge nettsteder.

Det er tre slags verktøy for brukere og utviklere for å komme i gang med nettstedet sitt:

  • Selvstyrt innholdshåndteringssystemer med åpen kildekode som WordPress.org, Drupal og Joomla.
  • Gratis plattformer som WordPress.com, Weebly og Wix.
  • Uavhengige brukergrensesnitt (UI) rammer som Bootstrap og Google Material Design.

Omfanget av selvbaserte plattformer er stort og ikke egnet for de fleste sluttbrukerne som ikke har tid til å investere. Gratis vertsplattformer er enkle å bruke, men har store avhengigheter som bare vil begrense mulighetene dine til den plattformen. Det siste alternativet er å ha en blanding av selvvert, utvikling og friheten til å gjenbruke frontend-elementblokker. I denne artikkelen, la oss utforske mer om hvordan du kommer i gang med Bootstrap frontend -rammeverk.

Komme i gang med Bootstrap

Lær Bootstrap

Hva er Bootstrap?

Bootstrap er en av de populære brukergrensesnittrammer som er tilgjengelige på dette tidspunktet. Dette er et frontend -rammeverk laget med HTML, CSS og JavaScript uten involvering av serversideskript som PHP. Det ble opprinnelig utviklet av Twitter med navnet "Twitter Blueprint" for å forbedre konsistent synlighet på tvers av flere enheter og verktøy. Senere ble det omdøpt til Bootstrap og utgitt som et åpen kildekode -prosjekt i løpet av august 2011.

Bootstrap er et av de populære prosjektene som er tilgjengelige på GitHub med 100k+ stjerner. Den siste informasjonen om Bootstrap -utgivelser og oppdateringer er tilgjengelig på det offisielle nettstedet getbootstrap.com. Populariteten til Bootstrap økes over tid med den første mobile tilnærmingen og den enkle konverteringen av Bootstrap -temaer til populære innholdshåndteringstemaer som WordPress. Det er også populære Bootstrap-nettstedbyggere som Mobirise for å starte nettstedet ditt uten kodingskunnskaper.

Bootstrap -versjoner

Tabellen nedenfor viser versjonsoppdateringen av Bootstrap, den var på V4 alpha 6 da denne artikkelen ble skrevet.

Versjon Dato Store endringer
Versjon 1 19 august 2011 Åpen kilde
Versjon 2 31 januar 2012 Stor oppdatering med 12 kolonner rutenettoppsett og Glyphicons.
Versjon 3 19 august 2013 Flat design og mobil første tilnærming.
Versjon 4 19 august 2015 Stor oppdatering i CSS -klasser, bruk av Sass og fjerning av Glyphicons, tether.js droppet og popper.js lagt til.
Versjon 5 5 mai 2021 Fri for jQuery, Bootstrap -ikoner, ny logo og RTL -støtte.

Generell bruk

For øyeblikket er den stabile versjonen Bootstrap 5.01, og du må migrere til den nyeste versjonen hvis du bruker tidligere versjoner 3 eller 4. Så hvis du utvikler et nettsted som skal publiseres snart, bør du ideelt sett bruke versjon 5.01 som er stabil. Sluttbrukere kan laste ned forhåndskompilerte CSS / JS -filer direkte og bruke dem på nettstedet ditt. Last ned versjon 3.4.1 her, V4.6 her og V5.01 her. Hvis du utvikler prosjekter for kunder eller deg selv, kan du laste ned hele kildekoden med Sass -filer fra GitHub.

Merk: Installering av Bootstrap på din Windows -baserte PC eller macOS er en komplisert oppgave, siden den har mange avhengigheter. Kort sagt bør du ha Node.js og NPM installert på datamaskinen din sammen med Grunt for kompilering. Videre kan du bruke Harp.js til å generere statiske nettstedfiler ved å bruke partials eller inkluderer.

Tillatelse

Bootstrap -filene distribueres under MIT -lisens med et enkelt krav, da opphavsrettsinformasjonen bør beholdes i alle Bootstrap -kildefiler.

Behold lisens og opphavsrettsmerknad inkludert i Bootstraps CSS- og JavaScript -filer når du bruker dem i verkene dine.

Du kan se hele lisensen i GitHub.

Starter nettstedet ditt

Du har to måter å begynne å bygge nettstedet ditt med Bootstrap. Den ene er å laste ned og hoste CSS- og JS -filer på vertsserveren, og den andre er å bruke CDN -koblinger. Vi anbefaler å bygge en startmal og deretter begynne å bruke alle Bootstrap -komponenter inne i en startmal. Du kan få mer informasjon om Bootstrap 5 -startmalseksjonen.

Nedenfor er CDN -koblingene for bruk på nettstedet ditt:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </body> </html>

Sørg for å bruke Popper og deretter Bootstrap JS -filen i rekkefølge, ellers kan du bruke en enkelt skriptfil som inneholder Popper -script. På samme måte kan du legge til egendefinerte CSS -stilark etter Bootstrap CSS, slik at den ikke har forrang fremfor rammedefinisjonene. Bootstrap 5 bruker border-box for boks-størrelse eiendom som kan påvirke oppsettene. Du kan endre dette til innholdsboks hvis det bare er nødvendig for de bestemte elementene ved å erklære inline CSS.


Lær Bootstrap 5 (indeks )


Opptakskilde: www.webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon