html startpage Flashcards
“<body class="my-5">”
Definieert de inhoud van de pagina. class="my-5" voegt verticale marge (afstand) toe aan de boven- en onderkant van de body.
“<div class="container">”
Maakt een responsive container. Centreert de inhoud op grotere schermen.
“<div class="search">”
Een container voor de zoekfunctionaliteit.
””“<label>Zoekopdracht</label>”””
Een label “Zoekopdracht” dat is gekoppeld aan het zoekvak. fs-5 stelt de lettergrootte in, text geeft de text de standaard text color.
”“<input></input>””
Het zoekvak waar de gebruiker een zoekopdracht kan invoeren. placeholder geeft de grijze tekst weer. input-group zorgt voor de spacing. combineert een inputveld met andere elementen voor een nette lay-out.
Spacing: ruimte rond een element; padding is ruimte binnenin, margin is ruimte eromheen.p-2 zorgt voor padding. rounded rond de hoeken af.
“<h6 class="mb-3 fw-normal"></h6>”
Een ondertitel (kleiner dan h1) die instructies geeft over hoe de zoekopdracht te gebruiken. mb-3 voegt marge toe aan de onderkant. fw-normal zorgt voor het normale font weight.
”“<button>GO!</button>””
Een knop om de zoekopdracht te starten. btn, btn-lg, btn-success zijn styling classes. w-100 maakt de knop zo breed als de container, mb-3 voegt marge toe aan de onderkant.
“<div class="container history">”
Een container voor de zoekgeschiedenis.
“<div class="row gy-4">”
Maakt een rij waarin de elementen weergegeven worden. gy-4 voegt verticale marge toe tussen de elementen.
“<button>Clear local storage</button>”
Een knop om de lokale opslag (zoekgeschiedenis) te wissen. rounded rond de hoeken af.
