Eenvoudige manieren om Bootstrap te installeren: 10 stappen (met afbeeldingen)

Inhoudsopgave:

Eenvoudige manieren om Bootstrap te installeren: 10 stappen (met afbeeldingen)
Eenvoudige manieren om Bootstrap te installeren: 10 stappen (met afbeeldingen)

Video: Eenvoudige manieren om Bootstrap te installeren: 10 stappen (met afbeeldingen)

Video: Eenvoudige manieren om Bootstrap te installeren: 10 stappen (met afbeeldingen)
Video: How To Save TikTok Videos To Gallery | TikTok Guide 2024, Mei
Anonim

Deze wikiHow leert je hoe je de Bootstrap-bestanden naar je computer kunt downloaden en ze kunt koppelen aan je HTML-teksten om Bootstrap-elementen in je code te gebruiken. Nadat u de Bootstrap-bestanden hebt gedownload en gekoppeld, kunt u alle stylesheet- en JavaScript-elementen van Bootstrap in uw webontwerp gaan gebruiken.

Stappen

Installeer Bootstrap Stap 1
Installeer Bootstrap Stap 1

Stap 1. Open de Bootstrap-website in uw internetbrowser

Typ https://getbootstrap.com in de adresbalk en druk op ↵ Enter of ⏎ Return op uw toetsenbord.

Installeer Bootstrap Stap 2
Installeer Bootstrap Stap 2

Stap 2. Klik op de knop Downloaden

Hierdoor wordt de pagina "Download" geopend.

Installeer Bootstrap Stap 3
Installeer Bootstrap Stap 3

Stap 3. Klik op de knop Downloaden onder "Gecompileerde CSS en JS

" Hiermee worden de volledige Bootstrap-bestanden naar uw computer gedownload als een ZIP-archief.

Selecteer desgevraagd een opslaglocatie voor de Bootstrap ZIP

Installeer Bootstrap Stap 4
Installeer Bootstrap Stap 4

Stap 4. Pak de bestanden uit het ZIP-archief

Zoek het ZIP-bestand dat u zojuist hebt gedownload en dubbelklik erop om alle bestanden erin uit te pakken in dezelfde map.

  • Dit zal twee mappen uitpakken met de naam " css" en " js."
  • Als je unzipper-app de bestanden niet automatisch uitpakt, lees dan dit artikel om alle manieren te zien waarop je een ZIP-archief kunt exporteren.
Installeer Bootstrap Stap 5
Installeer Bootstrap Stap 5

Stap 5. Verplaats de uitgepakte mappen naar dezelfde map als de HTML-bestanden van uw website

Open de map die alle HTML-bestanden van uw website bevat en sleep de " css" en " js" mappen hier om ze naar dezelfde map te verplaatsen als uw websitedocumenten.

U kunt nu de bestanden aan uw HTML-bestanden koppelen en Bootstrap in uw code gaan gebruiken

Installeer Bootstrap Stap 6
Installeer Bootstrap Stap 6

Stap 6. Klik met de rechtermuisknop op het HTML-bestand dat u met Bootstrap wilt gebruiken

U kunt Bootstrap in slechts één van uw HTML-bestanden gebruiken, of in alle.

Installeer Bootstrap Stap 7
Installeer Bootstrap Stap 7

Stap 7. Beweeg over Openen met in het rechtsklikmenu

Er verschijnt een submenu met compatibele apps.

Installeer Bootstrap Stap 8
Installeer Bootstrap Stap 8

Stap 8. Selecteer uw teksteditorprogramma

Dit opent het geselecteerde HTML-bestand in uw teksteditor.

U kunt een eenvoudige teksteditor gebruiken zoals Kladblok of TekstBewerken evenals een speciale code-editor zoals Atoom (https://atom.io) of Coda (https://panic.com/coda).

Installeer Bootstrap Stap 9
Installeer Bootstrap Stap 9

Stap 9. Voeg de Bootstrap-links toe aan de header van uw HTML-bestand

Voordat u Bootstrap-code in uw HTML gebruikt, moet u de onderstaande regels typen of plakken in de koptekst van uw code:

Als u enkele van de andere bestanden uit de css- en js-mappen wilt koppelen en gebruiken, voegt u gewoon nieuwe regels toe aan de koptekst en vervangt u de onderdelen css/bootstrap.css en js/bootstrap.js door de namen van de bestanden die u wilt koppelen

Installeer Bootstrap Stap 10
Installeer Bootstrap Stap 10

Stap 10. Controleer de plaatsing van uw Bootstrap-links in de code

In de koptekst van de HTML moeten beide regels tussen de regels en de regel staan.

  • Nadat u deze regels aan de koptekst hebt toegevoegd, kunt u Bootstrap-elementen in dit HTML-bestand gaan gebruiken.
  • U kunt een volledige lijst van alle Bootstrap-elementen vinden op https://getbootstrap.com/docs/4.3/getting-started/introduction. Klik gewoon op een categorie zoals Lay-out of Componenten in het linkermenu.
  • Nadat u Bootstrap hebt geïnstalleerd, kunt u elk stukje code van hier invoegen of kopiëren/plakken naar uw eigen code.

Aanbevolen: