Enkle måter å installere Bootstrap: 10 trinn (med bilder)

Innholdsfortegnelse:

Enkle måter å installere Bootstrap: 10 trinn (med bilder)
Enkle måter å installere Bootstrap: 10 trinn (med bilder)

Video: Enkle måter å installere Bootstrap: 10 trinn (med bilder)

Video: Enkle måter å installere Bootstrap: 10 trinn (med bilder)
Video: Wait For The Label Red! 2023 BMW XM Review 2024, Kan
Anonim

Denne wikiHow lærer deg hvordan du laster ned Bootstrap -filene til datamaskinen din, og kobler dem til HTML -tekstene dine for å bruke Bootstrap -elementer i koden din. Når du har lastet ned og koblet Bootstrap -filene, kan du begynne å bruke alle stilarkene og JavaScript -elementene i Bootstrap i webdesignet ditt.

Trinn

Installer Bootstrap Trinn 1
Installer Bootstrap Trinn 1

Trinn 1. Åpne Bootstrap -nettstedet i nettleseren din

Skriv https://getbootstrap.com i adressefeltet, og trykk på ↵ Enter eller ⏎ Return på tastaturet.

Installer Bootstrap Trinn 2
Installer Bootstrap Trinn 2

Trinn 2. Klikk på Last ned -knappen

Dette vil åpne "Last ned" -siden.

Installer Bootstrap Trinn 3
Installer Bootstrap Trinn 3

Trinn 3. Klikk på Last ned -knappen nedenfor "Kompilert CSS og JS

" Dette vil laste ned hele Bootstrap -filene til datamaskinen din som et ZIP -arkiv.

Hvis du blir bedt om det, velger du et lagringssted for Bootstrap ZIP

Installer Bootstrap Trinn 4
Installer Bootstrap Trinn 4

Trinn 4. Pakk ut filene fra ZIP -arkivet

Finn ZIP-filen du nettopp lastet ned, og dobbeltklikk på den for å pakke ut alle filene i den til den samme mappen.

  • Dette trekker ut to mapper med navnet " css"og" js."
  • Hvis pakken din ikke pakker ut filene automatisk, kan du se denne artikkelen for å se alle måtene du kan eksportere et ZIP -arkiv på.
Installer Bootstrap Trinn 5
Installer Bootstrap Trinn 5

Trinn 5. Flytt de ekstraherte mappene til den samme mappen som nettstedets HTML -filer

Åpne mappen som inneholder alle nettstedets HTML -filer, og dra " css"og" js"mapper her for å flytte dem til samme mappe som nettstedets dokumenter.

Du kan nå koble filene til HTML -filene dine og begynne å bruke Bootstrap i koden din

Installer Bootstrap Trinn 6
Installer Bootstrap Trinn 6

Trinn 6. Høyreklikk på HTML-filen du vil bruke med Bootstrap

Du kan bruke Bootstrap i bare en av HTML -filene dine, eller alle sammen.

Installer Bootstrap Trinn 7
Installer Bootstrap Trinn 7

Trinn 7. Hold markøren over Åpne med på høyreklikkmenyen

En undermeny vil dukke opp med kompatible apper.

Installer Bootstrap Trinn 8
Installer Bootstrap Trinn 8

Trinn 8. Velg tekstredigeringsprogrammet

Dette åpner den valgte HTML -filen i tekstredigereren.

Du kan bruke en enkel tekstredigerer som Notisblokk eller TextEdit samt en dedikert kodeditor som Atom (https://atom.io) eller Coda (https://panic.com/coda).

Installer Bootstrap Trinn 9
Installer Bootstrap Trinn 9

Trinn 9. Legg til Bootstrap -koblingene i HTML -filens topptekst

Før du bruker Bootstrap -koden i HTML -koden din, må du skrive eller lime inn linjene nedenfor i overskriften på koden:

Hvis du vil koble til og bruke noen av de andre filene fra css- og js -mappene, legger du bare til nye linjer i toppteksten og erstatter css/bootstrap.css og js/bootstrap.js -delene med navnene på filene du vil ha å koble sammen

Installer Bootstrap Trinn 10
Installer Bootstrap Trinn 10

Trinn 10. Kontroller plasseringen av Bootstrap -koblingene i koden

I HTML -overskriften skal begge linjene være plassert mellom linjene og linjen.

  • Når du har lagt til disse linjene i overskriften, kan du begynne å bruke Bootstrap -elementer i denne HTML -filen.
  • Du finner en fullstendig liste over alle Bootstrap-elementer på https://getbootstrap.com/docs/4.3/getting-started/introduction. Bare klikk på en hvilken som helst kategori Oppsett eller Komponenter på menyen til venstre.
  • Når du har installert Bootstrap, kan du sette inn eller kopiere/lime inn hvilken som helst kodebit herfra til din egen kode.

Anbefalt: