08. Korištenje bootstrapa - kristijan-perkovic96/Osnove-reacta GitHub Wiki

Kako bismo koristili bootstrap potrebno je prvo instalirati sljedeće:

  1. npm i react-bootstrap
  2. npm i bootstrap

Prva instalacija je radi toga da možemo koristiti komponente bootstrapa, dok je druga instalacija kako bi one imale prepoznatljiv dizajn.

U ovome primjeru kreirat ćemo jednostavnu formu koja će biti pop-up te će imati elemente iz bootstrapa. U dokumentaciji možete pročitati više o samim komponentama https://react-bootstrap.github.io/components/alerts/ Komponente koje su nama potrebne su:

  1. Modal, ModalHeader, ModalTitle, ModalBody, ModalFooter
  2. FormControl
  3. Button
  4. Tabs, Tab

Modal koristimo kako bismo dobili pop-up te moramo unutar njega definirati zaglavlje, tijelo i podnožje. Unutar zaglavlja definiramo naslov modal-a, dok u tijelu modela zapravo možemo kreirati formu. Formu ćemo kreirati u dva dijela, jedan dio sadrži samu formu dok drugi dio služi za objašnjenje korištenja forme, iz tog razloga koristimo Tabs i Tab. Normalno unutar bootstrapa su vam već poznati container, row i col. Jedan row ima maksimalnu širinu 12, tako da možemo podešavati kolika će nam biti širina jedne kolone. Širinu kolone možemo definirati pomoću className="col-5" ili bilo koja druga brojka, najvažnije je da forma lijepo izgleda. FormControl nam predstavlja input.

Kako bismo prikazali Modal potrebno mu je props show postaviti na true, naravno u ovome slučaju je to harkodirano kao bi nam se forma stalno prikazivala, najbolja je praksa kreirati varijablu u čijoj će ovisnosti forma biti prikazana ili ne. Tabs nam omogućava da imamo više tabova, moramo definirati varijablu activeKey jer u ovisnosti o njezinoj vrijednosti će se prikazivati jedan od tabova, znači vrijednost naše varijable u mora biti jednaka jednom od eventKey props na tabovima. Također na Tabs definiramo onSelect koji će ukoliko odaberemo neki tab automatski promijeniti vrijednost naše varijable.

Varijabla ima inicijalnu vrijednost forma te iz toga razloga nam se prikazuju dva unosna polje.

Ukoliko niste veliki dizajner na ovaj način možete vrlo lako dobiti lijepu formu.