Bootstrap-zelfstudie


bootstrap 4-zelfstudie


Bootstrap is een front-end framework waarmee u sneller en gemakkelijker mobiele responsieve websites kunt bouwen. Voor het eerst ontwikkeld door Twitter, wordt Bootstrap nu gebruikt voor alles, van het ontwikkelen van webapplicaties tot WordPress-thema’s. Het is ook helemaal gratis, veelzijdig en intuïtief.

Met Bootstrap kunt u complexe webpagina’s uit standaard HTML oproepen en deze naar uw wensen aanpassen. Bootstrap wordt ook geleverd met een aantal jQuery-plug-ins die extra functionaliteit kunnen bieden, zoals carrousels, knoppen, tooltips en meer.

Last but not least biedt het u veel snelkoppelingen voor het maken van webpagina’s die u tijd en energie besparen. Het enige dat u nodig hebt, is een basiskennis van HTML en CSS om te creëren die responsief zijn, eerst mobiel en compatibel met alle moderne browsers.

P.S.. Bootstrap is geen perfecte optie voor complete beginners. Enige kennis van HTML en CSS zou nuttig zijn. Als alternatief kunt u websitebouwers of WordPress gebruiken om een ​​website te maken.

Een website maken met Bootstrap (inhoudsopgave):

  1. Stap 1: Installatie en overzicht
    1. Maak een HTML-pagina
    2. Laad Bootstrap via CDN of host het lokaal
    3. Voeg jQuery toe
    4. Laad Bootstrap JavaScript
    5. Voeg alles samen
  2. Stap 2: Ontwerp uw bestemmingspagina
    1. Voeg een navigatiebalk toe
    2. Voeg aangepaste CSS toe
    3. Maak een container voor pagina-inhoud
    4. Voeg een achtergrondafbeelding en aangepast JavaScript toe
    5. Voeg een overlay toe
    6. Voeg een paginatitel en hoofdtekst toe
    7. Maak een CTA-knop
    8. Stel een sectie met drie kolommen in
    9. Voeg een contactformulier toe
    10. Maak een voettekst met twee kolommen
    11. Voeg mediaquery’s toe
    12. Breng uw website live

Totale tijd om een ​​website te maken met Bootstrap: 3-4 uur.
Vaardigheidsniveau: Beginner tot gemiddeld

Stap 1: installatie en overzicht


Om Bootstrap te gebruiken, moet je het eerst integreren in je ontwikkelomgeving, ook wel webpagina genoemd. Daarvoor heb je twee verschillende mogelijkheden: laad het op afstand of download en gebruik Bootstrap lokaal. Voor beide heb je echter eerst iets nodig om het in te laden.,

1. Maak een HTML-pagina

Als eerste stap zullen we een eenvoudige HTML-sjabloon maken als basis waar we Bootstrap zullen gebruiken. Daarvoor is het eerste dat u wilt doen een map op uw computer of server maken voor de projectbestanden. In dit geval noem ik het gewoon bootstrap. Maak hier een nieuw tekstbestand en noem het index.html. Open het met een teksteditor naar keuze (bijv. Kladblok++) en plak de onderstaande code erin.





Voorbeeldpagina Bootstrap-zelfstudie








Vergeet niet je bestand op te slaan voordat je verder gaat!

2a. Laad Bootstrap via CDN

Zoals al uitgelegd, bestaat Bootstrap voornamelijk uit style sheets en scripts. Als zodanig kunnen ze worden geladen in de kop- en voettekst van uw webpagina, net als andere middelen zoals aangepaste lettertypen. Het framework biedt daarvoor een CDN-toegangspad (Content Delivery Network). Je kunt het vinden op de Bootstrap downloadpagina, verder hieronder.

Om Bootstrap op uw pagina te krijgen, plakt u eenvoudig de onderstaande code in de sectie van uw sjabloon.

Wanneer u het bestand nu opslaat, laadt elke browser die het opent automatisch de Bootstrap-middelen.

Het gebruik van de externe methode is een goed idee, omdat veel gebruikers het framework al in de cache van hun browser hebben. Als dat het geval is, hoeven ze het niet opnieuw te laden wanneer ze naar uw site komen, wat leidt tot een snellere laadtijd van de pagina. Daarom is dit de aanbevolen methode voor live sites.

Als u echter wilt experimenteren en ontwikkelen, of als u onafhankelijk wilt zijn van een internetverbinding, kunt u ook uw eigen exemplaar van Bootstrap krijgen. Dit is wat ik doe voor deze tutorial omdat het ook resulteert in minder code om te posten.

2b. Host Bootstrap lokaal

Een alternatieve manier om Bootstrap in te stellen, is door het naar uw harde schijf te downloaden en de bestanden lokaal te gebruiken. U vindt downloadopties op dezelfde plaats als de links naar de externe versie. Zorg ervoor dat u de gecompileerde CSS- en JS-bestanden ophaalt. Je hebt de bronbestanden niet nodig.

Zodra je dit hebt gedaan, pak je het bestand uit en kopieer je de inhoud naar dezelfde map als index.html. Daarna kunt u de Bootstrap CSS als volgt in uw project laden:

U zult merken dat dit het bestandspad bevat waar u het Bootstrap-bestand kunt vinden. Zorg er in uw geval voor dat uw pad overeenkomt met uw daadwerkelijke configuratie. De namen van de mappen kunnen bijvoorbeeld verschillen als u een andere versie van Bootstrap hebt gedownload.

3. Voeg jQuery toe

Om de volledige functionaliteit van Bootstrap te krijgen, moet je ook de jQuery-bibliotheek laden. Ook hier heb je de mogelijkheid om het op afstand te laden of lokaal te hosten.

In het eerste geval vind je de link naar de nieuwste versie van jQuery hier. Je kunt het gebruiken om de bibliotheek in je pagina te laden door de regel met code hieronder te plaatsen vlak voor waar het staat op jouw pagina.

alternatief, jQuery downloaden (klik met de rechtermuisknop op> Link opslaan als…), pak het uit en plaats het in de projectmap. Voeg het op deze manier op dezelfde plaats toe als uw bestand:

Nogmaals, zorg ervoor dat het pad overeenkomt met uw opstelling.

4. Laad Bootstrap JavaScript

De laatste stap bij het instellen van Bootstrap is het laden van de Bootstrap JavaScript-bibliotheek. Deze zijn opgenomen in de gedownloade versie van het framework en u vindt ook links naar externe bronnen op dezelfde plaats als voorheen. We laden het echter op een andere plaats dan het stijlblad. In plaats van de koptekst gaat deze naar de voettekst van de pagina, direct na de aanroep van jQuery.

Je kunt het op afstand zo noemen:

Of lokaal zoals:

5. Zet het allemaal samen

Als u de bovenstaande stappen correct hebt gevolgd, zou u een bestand moeten krijgen dat er als volgt uitziet voor de externe oplossing:

   Voorbeeldpagina Bootstrap-zelfstudie         

Als alternatief, als u lokaal host, zou uw paginasjabloon op de onderstaande code moeten lijken:

   Voorbeeldpagina Bootstrap-zelfstudie         

Als dat is wat je hebt en je hebt je werk opgeslagen, ben je nu klaar om door te gaan naar de volgende stap.

Stap 2: Ontwerp uw bestemmingspagina


Oké, dat was weliswaar veel voorbereidend werk. Het was echter niet zo moeilijk, toch? Bovendien begint nu het plezier.

Op het moment dat u naar uw voorbeeldsite navigeert, zou u gewoon een lege pagina moeten zien. Tijd om daar verandering in te brengen.

1. Voeg een navigatiebalk toe

Het eerste dat we willen doen, is een navigatiebalk bovenaan de pagina toevoegen. Hierdoor kunnen uw bezoekers uw site verkennen en de rest van uw pagina’s ontdekken.

Daarvoor gebruiken we de navigatiebalk klasse. Dit is een van de standaardelementen van Bootstrap. Het creëert een navigatie-element dat standaard responsief is en automatisch zal samenvouwen op kleinere schermen. Het biedt ook ingebouwde ondersteuning voor het toevoegen van branding, kleurenschema’s, spatiëring en andere componenten.

We gebruiken het zoals hieronder en plaatsen het net onder de label:

 Logo   

Enkele uitleg van de code:

  • navbar-expand-md – Dit geeft aan op welk punt de navigatiebalk uitzet van verticaal of hamburgerpictogram naar een horizontale balk op volledige grootte. In dit geval hebben we het ingesteld op middelgrote schermen, wat in Bootstrap iets groter is dan 768px.
  • navbar-merk – Dit wordt gebruikt voor de branding van uw website. U kunt hier ook een logo-afbeeldingsbestand opnemen.
  • navbar-toggler – Geeft de schakelknop aan voor het samengevouwen menu. Het stuk data-toggle = "collapse" definieert dat dit zal veranderen in een hamburgermenu, niet in een vervolgkeuzelijst, wat de andere optie is. Het is belangrijk dat u een. Definieert data-target met een CSS-id (gedefinieerd door de #) en wikkel een div met dezelfde naam rond de feitelijke navigatiebalk element.
  • navbar-toggler-pictogram – Zoals u waarschijnlijk wel kunt raden, wordt hierdoor het pictogram gecreëerd waarop gebruikers klikken om het menu op kleinere schermen te openen.
  • navbar-nav – De klas voor de
      lijstelement dat de menu-items bevat. Deze laatste worden aangegeven met nav-item en nav-link.

    Waarom leg ik dit zoveel uit?

    Omdat dat het punt is van Bootstrap. Je hebt al deze standaarden waarmee je snel elementen kunt maken met een aantal HTML- en CSS-klassen. Je hoeft geen CSS te schrijven om styling te bieden, alles is al ingesteld in Bootstrap. Bovendien is alles direct mobiel responsief! Begint u in te zien hoe nuttig dit is?

    Het bovenstaande is voldoende om een ​​navigatiebalk aan uw site toe te voegen. Op dit moment ziet het er echter nog steeds heel weinig uit.

    bootstrap tutorial voeg navigatiebalk toe

    Dat komt omdat er niet veel styling aan is gekoppeld. Terwijl u kunt toevoegen standaardkleuren (bijvoorbeeld door de navigatiebalk een klasse als te geven bg-dark navbar-dark), we willen in plaats daarvan onze eigen toevoegen.

    2. Voeg aangepaste CSS toe

    Als u de standaardstijl wilt wijzigen, hoeft u gelukkig niet door een grote bibliotheek met stijlbladen te bladeren en de wijzigingen handmatig aan te brengen. In plaats daarvan kunt u, net als bij een WordPress-kindthema, uw eigen CSS-bestanden toevoegen die u kunt gebruiken om bestaande styling te overschrijven.

    Daarvoor maak je gewoon een leeg bestand met je teksteditor en noem het main.css. Sla het op en voeg het als volgt toe aan het hoofdgedeelte van uw Bootstrap-site:

    Dit is de code voor een stylesheet die zich in de hoofddirectory bevindt. Als je besluit om je binnen de css map, zorg ervoor dat u het juiste pad in de link opneemt.

    Vanaf hier kunt u aangepaste CSS aan uw site toevoegen. Als u bijvoorbeeld de navigatiebalk en zijn elementen wilt opmaken, kunt u opmaak als volgt gebruiken:

    lichaam { opvulling: 0; marge: 0; achtergrond: # f2f6e9; } /*--- navigatiebalk ---*/ .navbar { achtergrond: # 6ab446; } .nav-link, .navbar-merk { kleur: #fff; cursor: aanwijzer; } .nav-link { margin-right: 1em! belangrijk; } .nav-link: hover { kleur: # 000; } .navbar-collapse { rechtvaardigen-inhoud: flex-end; }

    En hier is het resultaat:

    bootstrap tutorial stijl navigatiebalk

    Ziet er beter uit dan voorheen, nietwaar?

    3. Maak een container voor pagina-inhoud

    Na de navigatiebalk is het volgende dat u wilt een container voor de pagina-inhoud. Dit is heel eenvoudig in Bootstrap, want alles wat je daarvoor nodig hebt, is dit onder de navbar-tag:

    Let op de container-vloeistof klasse. Dit is weer een van die standaard Bootstrap-klassen. Het toepassen op de div element past er automatisch een heleboel CSS op toe.

    De -vloeistof deel zorgt ervoor dat de container zich uitstrekt over de gehele breedte van het scherm. Er is ook gewoon een houder, waarop vaste breedtes zijn aangebracht, zodat er altijd ruimte is aan beide zijden van het scherm.

    Als u de pagina nu echter opnieuw laadt, ziet u nog steeds niets (tenzij u de ontwikkelaarstools gebruikt). Dat komt omdat je alleen een leeg HTML-element hebt gemaakt. Dit gaat nu veranderen.

    4. Voeg een achtergrondafbeelding en aangepast JavaScript toe

    Als volgende stap in deze Bootstrap-zelfstudie willen we een achtergrondafbeelding op volledig scherm opnemen voor de koptekst van onze bestemmingspagina. Daarvoor zullen we wat jQuery moeten gebruiken om de afbeelding helemaal over het scherm uit te rekken.

    U doet dat op dezelfde manier als u aangepaste CSS opneemt. Maak eerst een tekstbestand met de naam main.js en plaats het in uw sitemap. Bel het dan voor de sluiting tag binnen index.html.

    Daarna kunt u dit stuk code kopiëren en plakken om het te maken

    element strekt zich uit over het hele scherm:
    $ (document) .ready (function () { $ ('. header'). height ($ (window) .height ()); })

    Het enige dat dan overblijft, is het instellen van een achtergrondafbeelding. Je kunt dit zo van binnen doen main.css:

    .koptekst { background-image: url ('images / header-background.jpg'); achtergrondformaat: omslag; achtergrondpositie: midden; positie: relatief; }

    Als u een afbeelding van voldoende grootte plaatst op de locatie die wordt aangegeven door het bovenstaande pad, behaalt u een resultaat dat er ongeveer als volgt uitziet:

    bootstrap-zelfstudie bevat achtergrondafbeelding van koptekst

    5. Voeg een overlay toe

    Om de achtergrondafbeelding extra stijlvol te maken, voegen we ook een overlay toe. Daarvoor maak je een ander div-element aan binnen het element dat je zojuist hebt opgenomen.

    Vervolgens kunt u het volgende toevoegen aan uw aangepaste CSS-bestand:

    .overlay { positie: absoluut; min hoogte: 100%; min-breedte: 100%; links: 0; top: 0; achtergrond: rgba (0, 0, 0, 0,6); }

    Dit maakt deze mooie overlay voor de afbeelding die je eerder hebt ingevoerd:

    bootstrap tutorial overlay toevoegen

    6. Voeg een paginatitel en hoofdtekst toe

    Nu wilt u waarschijnlijk een paginatitel toevoegen in de vorm van een kop plus wat hoofdtekst. Zo weten uw bezoekers direct op welke site ze zich bevinden en wat ze ervan kunnen verwachten.

    Om deze te maken, voegt u dit fragment toe aan de container die u in de laatste stap heeft ingesteld, onder de overlay:

    Welkom op de bestemmingspagina!

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Suspendisse consectetur mi id libero fringilla, in pharetra sem ullamcorper.

    Voeg daarna de volgende opmaak toe aan main.css.

    .Omschrijving { links: 50%; positie: absoluut; bovenkant: 45%; transformeren: vertalen (-50%, -55%); text-align: center; } .beschrijving h1 { kleur: # 6ab446; } .beschrijving p { kleur: #fff; lettergrootte: 1.3rem; lijnhoogte: 1,5; }

    Wanneer u dat doet, ziet de bestemmingspagina er nu als volgt uit:

    bootstrap tutorial voeg paginatitel en beschrijving toe

    Het begint echt samen te komen, nietwaar?

    7. Maak een CTA-knop

    Geen enkele bestemmingspagina is compleet zonder een call-to-action, meestal in de vorm van een knop. Om die reden zouden we het niet goed vinden om niet op te nemen in deze Bootstrap-zelfstudie.

    Het framework biedt tal van tools om snel en eenvoudig knoppen te maken. Je kunt veel voorbeelden vinden hier. In mijn geval voeg ik de volgende opmaak toe direct onder de pagina-inhoud in de houder:

    Daarnaast voeg ik deze CSS aan toe main.css:

    .beschrijvingsknop { border: 1px solid # 6ab446; achtergrond: # 6ab446; grensradius: 0; kleur: #fff; } .beschrijving knop: hover { border: 1px solid #fff; achtergrond: #fff; kleur: # 000; }

    Na het opslaan en opnieuw laden ziet het er als volgt uit:

    bootstrap-zelfstudie call-to-action-knop toevoegen

    8. Stel een sectie met drie kolommen in

    Ik ben al redelijk tevreden over hoe de zaken verlopen. We zijn echter nog niet klaar met de pagina. Vervolgens willen we drie kolommen onder de hoofdinhoud maken voor aanvullende informatie. Dit is een specialiteit van Bootstrap omdat het op zijn kracht speelt: een raster maken. Zo doe je dat in dit geval:

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Het eerste dat opvalt is de rij element. U hebt dit nodig wanneer u kolommen maakt om als container voor het raster te fungeren.

    Wat de kolommen betreft, ze hebben allemaal verschillende klassen: col-lg-4, col-md-4 en col-sm-12. Deze geven aan dat we te maken hebben met kolommen en de grootte die ze op verschillende schermen zullen hebben.

    Om dit te begrijpen, moet je weten dat in een Bootstrap-raster alle kolommen in één rij altijd oplopen tot het getal 12. Dus als je ze de bovenstaande klassen geeft, betekent dit dat ze een derde van het scherm in beslag nemen op groot en medium schermen (12 gedeeld door 3 is 4) maar het hele scherm op kleine apparaten (12 van de 12 kolommen).

    Het is logisch, nietwaar?

    Je zult ook merken dat ik afbeeldingen heb toegevoegd en de .beeldvloeistof klasse voor hen. Dit is om ze responsief te maken, zodat ze meeschalen met een scherm waarop de pagina wordt bekeken.

    Daarnaast heb je de volgende styling op de gebruikelijke plaats:

    .Kenmerken { marge: 4em auto; opvulling: 1em; positie: relatief; } .feature-titel { kleur: # 333; lettergrootte: 1.3rem; font-weight: 700; margin-bottom: 20px; text-transform: hoofdletters; } .functies img { -webkit-box-shadow: 1px 1px 4px rgba (0, 0, 0, 0.4); -moz-box-shadow: 1px 1px 4px rgba (0, 0, 0, 0.4); box-shadow: 1px 1px 4px rgba (0, 0, 0, 0.4); margin-bottom: 16px; }

    Wanneer toegevoegd onder de hoofdinhoud en opgeslagen, ziet het er als volgt uit:

    bootstrap tutorial voeg drie kolomsectie toe

    9. Voeg een contactformulier toe

    Je zult merken dat een van de nieuwe velden nog leeg is. Dit was met opzet omdat we er een contactformulier aan willen toevoegen. Dit is een heel normale praktijk voor bestemmingspagina’s zodat bezoekers contact kunnen opnemen.

    Een contactformulier maken in Bootstrap is vrij eenvoudig:

    Neem contact op!

    Ik hoef de markup nu niet meer uit te leggen om kolommen te maken. Dit is wat de rest van de opmaak betekent:

    • vorm-groep – Wordt gebruikt om formuliervelden te omsluiten voor opmaak.
    • vormbeheersing – Geeft velden aan zoals invoer, tekstgebieden enz.

    Je kunt nog veel meer doen met formulieren, die je kunt vinden in de documentatie. Voor demonstratiedoeleinden is het bovenstaande echter voldoende. Plaats het in de resterende lege kolom en voeg deze styling toe main.css:

    .functies .form-control, .invoer van functies { grensradius: 0; } .functies .btn { achtergrondkleur: # 589b37; border: 1px solid # 589b37; kleur: #fff; margin-top: 20px; } .functies .btn: hover { achtergrondkleur: # 333; border: 1px solid # 333; }

    Wanneer u dit doet, krijgt u een formulier als dit:

    bootstrap tutorial inclusief contactformulier

    10. Maak een voettekst met twee kolommen

    Oké, we komen nu aan het einde van de Bootstrap-zelfstudie. Het laatste dat u aan uw bestemmingspagina wilt toevoegen, is een voettekstgedeelte met twee kolommen. Dit zou voor u geen probleem meer mogen zijn.

    Extra informatie

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Contact

    1640 Riverside Drive, Hill Valley, Californië
    [email beveiligd]
    + 01234567 88
    + 01234567 89

    Naast de gebruikelijke rastermarkeringen, belicht deze sectie enkele mogelijkheden om typografie met Bootstrap te wijzigen:

    • tekst in hoofdletters
    • font-weight-bold
    • tekstcentrum

    Het moet vrij duidelijk zijn uit de namen van de klassen die ze doen. U kunt meer informatie vinden over Bootstrap en typografie hier.

    Naast het bovenstaande kun je styling als volgt gebruiken:

    .pagina ondertekst { achtergrondkleur: # 222; kleur: #ccc; opvulling: 60px 0 30px; } .footer-copyright { kleur: # 666; opvulling: 40px 0; }

    Dit resulteert in een prachtige voettekst die er zo uitziet:

    bootstrap-zelfstudie bevat paginavoettekst

    11. Voeg mediaquery’s toe

    De pagina is nu eigenlijk klaar. Het is ook volledig verantwoordelijk. In de mobiele weergave van de browser komt het bovenste gedeelte echter nog niet helemaal goed uit.

    bootstrap-zelfstudiefout op mobiel ontwerp

    Maar maak je geen zorgen, je kunt dat vrij eenvoudig corrigeren met een simpele mediaquery. Tenzij u SASS gebruikt voor het compileren van uw Bootstrap-site, werken deze op dezelfde manier als in andere gevallen. U hoeft alleen maar rekening te houden met de vooraf ingestelde breekpunten opgenomen in Bootstrap.

    Als gevolg hiervan kunt u, om het bovenstaande probleem op te lossen, gewoon een stuk code als dit opnemen:

    @media (max-width: 575.98px) { .Omschrijving { links: 0; opvulling: 0 15px; positie: absoluut; top 10%; transformeren: geen; text-align: center; } .beschrijving h1 { lettergrootte: 2em; } .beschrijving p { lettergrootte: 1.2rem; } .Kenmerken { marge: 0; } }

    Daarna is alles zoals het hoort:

    bootstrap tutorial voeg mediaquery toe

    12. Upload uw website naar een webhost

    Als je hebt gevolgd, zou je nu moeten worden ingesteld met een voltooide website die ook op mobiel is en volledig responsief is.

    Maar tot nu toe kan niemand het zien. Om dat te veranderen, heb je een webhost en domein nodig. Op die manier kunnen mensen uw websiteadres invoeren in hun browserbalk en vervolgens online toegang krijgen tot uw nieuw geslagen Bootstrap-website.

    Om dit mogelijk te maken, moet u de site uploaden naar uw server. Je kunt dat doen met een FTP-client zoals FileZilla. Verzamel uw FTP-hostadres, gebruikersnaam en wachtwoord van uw hostingprovider om op afstand verbinding te maken met uw server. Wanneer u dat doet, zou u de bestanden en mappen die daar momenteel staan ​​moeten kunnen zien.

    upload bootstrap website naar server via ftp

    Navigeer naar de directory waarnaar uw domein verwijst (meestal de root-directory). Zodra u dat hebt gedaan, zoekt u eenvoudig de map met uw Bootstrap-bestanden op uw harde schijf, markeert u alle bestanden erin en sleept u ze vervolgens naar de server om het uploaden te starten. Het proces duurt even, afhankelijk van uw verbindingssnelheid en het aantal en de grootte van de bestanden.

    Zodra het echter is voltooid, zou u bij het openen van uw domein de voltooide site in uw browservenster moeten kunnen zien.

    bootstrap tutorial voltooide bestemmingspagina

    Niet slecht voor een paar regels code, toch?

    Daarover gesproken, als u de volledige code voor de pagina wilt hebben, inclusief de aangepaste CSS en JavaScript, kunt u ze hier allemaal downloaden. Hiermee heb je alles wat je nodig hebt om met Bootstrap een landingspagina te maken.

    Conclusie

    Bootstrap is een open-source, front-end ontwikkelraamwerk dat iedereen gratis kan gebruiken. Hiermee kunt u snel prototypen van ontwerpen maken, webpagina’s maken en over het algemeen snel beginnen.

    Zoals je in deze Bootstrap-zelfstudie voor beginners hebt gezien, heeft het alleen basiskennis van HTML, CSS en enkele optionele jQuery nodig. Hoewel Bootstrap niet zo comfortabel is als het gebruik van WordPress, is het nog steeds een geldig alternatief om een ​​website te maken.

    U weet inmiddels hoe u Bootstrap en zijn componenten moet instellen en installeren, een eenvoudige bestemmingspagina kunt maken, wat basisinhoud kunt opnemen en deze kunt vormgeven. U kunt navigatiemenu’s maken, achtergrondafbeeldingen instellen, knoppen, kolommen en contactformulieren opnemen.

    Er valt natuurlijk nog meer te leren.

    Dankzij deze eenvoudige Bootstrap-zelfstudie weet u nu genoeg om zelf verder te gaan. Als je dieper in het raamwerk wilt duiken, is een goed uitgangspunt W3Schools. Afgezien daarvan hopen we dat je deze beginnershandleiding leuk vond en je gedachten en ervaringen erover zou willen horen.

    Update: we hebben ook een bootstrap-spiekbriefje gemaakt voor beginners in .pdf- en .png-versies.

    Heeft u enige gedachten over de Bootstrap-zelfstudie hierboven? Vragen, opmerkingen, verzoeken? Laat het ons weten in de comments hieronder!

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map