Bootstrap

 Bootstrap

Gisteren heeft Jeroen mij een lesje in bootstrap gegeven om zo het dashboard in elkaar te zetten waar Justin en ik de leiding over hebben gekregen. Justin en ik zijn beide on ervaren met dashboards en wisten ook niet goed wat er in moest komen en dan heb je ook nog het punt dat we beide beginnende programmeurs zijn, dus dat Jeroen mij even had geholpen was wel prettig. 

Wat is bootstrap?

Bootstrap is er om je te helpen bij het maken van een web applicatie. De react bootstrap vervangt die van javascript en is helemaal vanaf de grond op opgebouwd. De react bootstrap geeft je hulpmiddelen bij het maken van je applicatie.

Wat hebben we gedaan?

Toen ik samen met Jeroen bezig ging om een lesje bootstrap te doen zijn we gelijk bezig gegaan met het bekijken van wat moet er nou in de dashboard komen te staan, hiervoor hebben we een mooie wireframe in figma. Jeroen had me daarvoor even uitgelegd hoe de container en container-fluid werken. Dit zijn proporties in de react bootstrap op je te helpen bij de layout van je website, het creëert een soort box om je teks en of button heen en deze box kun je dan met behulp van CSS aanpassen.

 <div className={["container dashboard"]}>

            <div className="row">

                <div className="col-lg-12">

                    <strong className={["float-left dashboard-title"]}>Ontwerpatelier titel waar je nu in kijkt</strong>

                    <button className={["float-right add-question"]} onClick={Test}>Vraag toevoegen</button>

                </div>

            </div>

            

            <div className={["row"]}>

                <div className="col-lg-12">

                    <div className={["card"]}>

                        <div className={["card-header"]}>

                            <span className={["float-left"]}>Meerkeuze vraag</span>

                            <span className={["float-right"]}><a>Dropdown</a></span>

                        </div>

                        <div className={["card-body"]}>

                            <p>Antwoord 1</p>

                            <p>Antwoord 2</p>

                            <p>Antwoord 3</p>

                        </div>

                    </div>

                </div>

            </div>

        </div>

"col-lg-12" = de grote van deze box waar de tekst en de button in staan.

Als ik die 12 zou veranderen naar 7 dan ziet het er zo uit:

Een "card" is een soort venster / box waar je dingen in kan zetten zoals op de afbeelding hieronder:

"card-header" is de titel van de card en bij "card-body' is het onderste gedeelte van de card waar je de rest van je teksten kan typen.

Ook heb ik tijdens dit proces een best practice geleerd en dat is om in CSS dit te gebruiken:

.float-left{

    float: left;

}

.float-right{

    float: right;

}

Door dit te doen kun je dus bijvoorbeeld in je JSX bestand dit doen:

 <span className={["float-left"]}>Meerkeuze vraag</span>

Dit betekend dat hij automatisch de float left pakt uit de CSS en dus de tekst meerkeuze vraag aan de linker kant van je pagina zet.

Ook heb ik een nieuwe element geleerd dat heet strong, zie voorbeeld hieronder:

<strong>Hallo</strong>

Dit betekend dat Hallo dik gedrukt word op de website.

Graag wil ik hiervoor Jeroen bedanken voor zijn goede hulp en leerzame les vond het echt leuk om te doen en was echt blij met het resultaat.