imagine-fundal

Blog / 🖌 Design CRUD folosind Bootstrap 5 #2 - Creare
facebook instagram whatsapp tiktok twitter

     În articolul de astăzi vom continua seria de 5 tutoriale de design Bootstrap 5 a aplicație CRUD creată anterior. Dată trecută am stilizat pagina de start, care va arăta lista de date. Poți accesa tutorialul de ieri folosind ancora de aici. Acum, vom crea fișierul creare.php, care reprezintă locul unde vom adăuga conținut în baza de date.

     Cel mai important, înainte să începem să scriem cod, trebuie să pornim XAMPP Control Panel pentru a putea vizualiza la adresa http://127.0.0.1 sau http://localhost rezultatul. După ce am scris structura de baza HTML și am adăugat etichetele necesare librăriei CSS, vom folosi aceleași elemente ca data trecută, pentru începutul paginii, un container 75%, un titlu cu fundal întunecat și un buton de `înapoi` 100%. Acum, vom adăuga 3 câmpuri input, în care vom introduce conținutul. Apoi, un buton outline de trimitere. Pentru a explica ce reprezintă fiecare câmp de intrare vom adăuga elemente span cu fundal întunecat.

     Un lucru foarte important la framework-urile de tipul Bootstrap sau Tailwind CSS este că trebuie să întelegem ce se întâmplă, de fapt, în spate, înainte de a le folosi. Un lucru care poate să pară ciudat, pentru începători și nu numai, este de ce se poziționează elementul span la începutul input. Răspunsul este simplu, pentru a le încadra corect folosim o diviziune părinte celor două elemente care este un flex box. Această diviziunea se marchează folosind clasa input-group. Alt lucru important de știu este cum se formează butonul outline. Acesta este, înainte de a fi atins de cursor, un buton simplu, fără fundal, cu un border colorat. Apoi, folosind event-ul hover se colorează și fundalul.

     Am ajuns la finalul tutorialului. Mai jos puteți vedea lista de tutoriale din seria de Design CRUD, o fotografie cu rezultatul de astăzi și sursa fișierului nou creat.

imagine

pbinfo / 1157

imagine

pbinfo / 2392

imagine

pbinfo / 110