Bootstrap

Eerder deze periode heb ik een blog post geschreven over CSS flexbox. Dit heeft mij aan het begin van het project voor The Imagineers veel geholpen met de opmaakt van de webpagina's die wij maken, alleen nu wij er voor willen zorgen dat de website responsive is lopen we tegen wat probleempjes aan. Dit hebben wij opgelost door Bootstrap te implementeren op onze tool en dit is voor mij de eerste keer dat ik Bootstrap heb gebruikt. Ook heb ik een aantal handige componenten kunnen gebruiken uit React Bootstrap bij het maken van ons dashboard en heb ik kennis kunnen maken met de verschillen tussen beide vormen van Bootstrap.

Ik heb geleerd dat ik de pagina's die ik maak kan verdelen in rows en columns wat erg helpt met het positioneren van de verschillende elementen op de pagina. Wij zijn hierbij begonnen met de normale niet React versie van Bootstrap omdat hier al mensen uit onze groep bekend mee waren.

Een row bestaat standaard uit 12 columns. Door in een row meerdere columns aan te maken worden deze 12 columns verdeeld over deze ruimte. Je kan ook zelf instellen hoe breed jouw columns moeten zijn door dit met een cijfer tussen 1 en 12 aan te geven.

https://getbootstrap.com/docs/4.1/layout/grid/

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

In ons design zijn veel pagina's opgedeeld in twee kolommen en op deze manier hebben wij dit erg makkelijk kunnen implementeren door gewoon twee bootstrap columns te gebruiken.

React heeft ook zijn eigen versie van Bootstrap en hier heb ik bij het maken van het dashboard van onze tool een aantal componenten uit kunnen gebruiken. Voor het aanmaken van een ontwerpatelier en een vraag in ons dashboard hebben wij een popup venster nodig waar de informatie in geplaatst kan worden. Hiervoor heb ik het Modal component gebruikt van React Bootstrap.

<Modal size="xl" show={props.show} onHide={props.close}>

    <Modal.Header closeButton>

        <Modal.Title>Wat voor vraag wilt u toevoegen?</Modal.Title>

    </Modal.Header>

    <Modal.Body className="modal-body">

        <Form.Control className="space-bottom" size="lg" type="text" placeholder="Typ hier uw titel.." value={designstudioTitle} onChange={event => setDesignstudioTitle(event.target.value)} />

        <Form.Control id="input-openquestion" size="lg" type="number" value={designstudioCode} onChange={event => setDesignstudioCode(event.target.value)} rows={6} placeholder="Typ hier de code.." />

        <Button onClick={CreateDesignStudio} className={["button-add", "float-right", "space-top"]}><FaPlus /><span className="space">Ontwerpatelier toevoegen</span></Button>

    </Modal.Body>

</Modal>

Dit is hoe ik ik het modal heb gemaakt voor het aanmaken van een ontwerpatelier. Ook heb ik er een gemaakt voor het aanmaken van een vraag waar je kan wisselen tussen het aanmaken van een open of meerkeuzevraag. Hier heb ik een andere blog post over geschreven.

Verder heb ik geleerd hoe ik met Bootstrap breakpoints kan maken die er voorzorgen dat de website responsive is en heb ik gebruik gemaakt van classes die bepaalde blokken of columns uitschakelen wanneer de pagina een te kleine breedte heeft om alles goed in beeld te hebben. Bootstrap is over het algemeen een echte aanwinst geweest bij dit project.