Differences
This shows you the differences between two versions of the page.
|
pw:laboratoare:12 [2020/05/02 17:23] valeriu.stanciu [Bootstrap Grid Layout] |
pw:laboratoare:12 [2020/05/04 11:01] (current) ciprian.dobre [Exercitii] |
||
|---|---|---|---|
| Line 28: | Line 28: | ||
| ===== Bootstrap Grid Layout ===== | ===== Bootstrap Grid Layout ===== | ||
| - | Pentru a construi cu usurinta un layout responsive, Bootstrap pune la dispozitie un grid flexbox. Acesta vine cu un sistem de containere, randuri si coloane, pentru a aranja continutul in pagina. Pe fiecare rand pot fi asezate un numar de pana la 12 coloane, cu dimensiuni variabile, in functie de setarile specificate si de device-ul pe care sunt afisate. | + | Pentru a construi cu usurinta un layout responsive, Bootstrap pune la dispozitie un grid flexbox. Acesta vine cu un sistem de containere, randuri si coloane, pentru a aranja continutul in pagina. Pe fiecare rand pot fi asezate un numar de pana la 12 coloane, cu dimensiuni variabile, in functie de setarile specificate si de device-ul pe care sunt afisate. Sunt disponibile, by default, optiuni pentru 5 clase de device-uri: xs (<576px), sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px). |
| + | |||
| + | |||
| + | ==== Container ==== | ||
| + | |||
| + | Containerele ofera posibilitatea de a centra si alinia orizontal continutul paginii. Acestea sunt responsive, max-width modificandu-se in functie de dimensiunea viewport-ului. Daca se specifica optiunea "fluid", ele vor avea width 100% intotdeauna. | ||
| + | |||
| + | {{:pw:laboratoare:lab12_scr01.png|}} | ||
| + | |||
| + | <code Javascript> | ||
| + | <Container> //<Container fluid> --> width 100% | ||
| + | <Row> | ||
| + | <Col>1 of 1</Col> | ||
| + | </Row> | ||
| + | </Container> | ||
| + | </code> | ||
| + | |||
| + | ==== Auto-layout columns ==== | ||
| + | |||
| + | Cand nu se specifica nicio dimensiune, componentele //Col// vor avea dimensiuni egale. | ||
| + | |||
| + | {{:pw:laboratoare:lab12_scr02.png|}} | ||
| + | |||
| + | <code Javascript> | ||
| + | <Container> | ||
| + | <Row> | ||
| + | <Col>1 of 2</Col> | ||
| + | <Col>2 of 2</Col> | ||
| + | </Row> | ||
| + | <Row> | ||
| + | <Col>1 of 3</Col> | ||
| + | <Col>2 of 3</Col> | ||
| + | <Col>3 of 3</Col> | ||
| + | </Row> | ||
| + | </Container> | ||
| + | </code> | ||
| + | |||
| + | Daca pentru una dintre coloane se specifica o dimensiune, atunci toate celelalte coloane isi vor schimba automat dimensiunea, ramanand egale intre ele. | ||
| + | |||
| + | {{:pw:laboratoare:lab12_scr03.png|}} | ||
| + | |||
| + | <code Javascript> | ||
| + | <Container> | ||
| + | <Row> | ||
| + | <Col>1 of 3</Col> | ||
| + | <Col xs={6}>2 of 3 (wider)</Col> | ||
| + | <Col>3 of 3</Col> | ||
| + | </Row> | ||
| + | <Row> | ||
| + | <Col>1 of 3</Col> | ||
| + | <Col xs={5}>2 of 3 (wider)</Col> | ||
| + | <Col>3 of 3</Col> | ||
| + | </Row> | ||
| + | </Container> | ||
| + | </code> | ||
| + | |||
| + | ==== Rows ==== | ||
| + | |||
| + | Componenta //Row// permite setarea dimensiunilor coloanelor din interiorul ei pentru toate cele 5 viewport-uri predefinite (xs, sm, md, lg, xl). Pentru fiecare viewport, se poate specifica numarul de coloane care incap una langa alta. | ||
| + | |||
| + | {{:pw:laboratoare:lab12_scr04.png|}} | ||
| + | |||
| + | <code Javascript> | ||
| + | <Container> | ||
| + | <Row xs={2} md={4} lg={6}> | ||
| + | <Col>1 of 2</Col> | ||
| + | <Col>2 of 2</Col> | ||
| + | </Row> | ||
| + | <Row xs={1} md={2}> | ||
| + | <Col>1 of 3</Col> | ||
| + | <Col>2 of 3</Col> | ||
| + | <Col>3 of 3</Col> | ||
| + | </Row> | ||
| + | </Container> | ||
| + | </code> | ||
| ===== Componente ===== | ===== Componente ===== | ||
| React Bootstrap ofera o serie de componente utile in orice aplicatie web, ce usureaza procesul de dezvoltare. Pentru a utiliza o componenta din Bootstrap, aceasta trebuie mai intai importata. Codul de mai jos importa o componenta de alerta. | React Bootstrap ofera o serie de componente utile in orice aplicatie web, ce usureaza procesul de dezvoltare. Pentru a utiliza o componenta din Bootstrap, aceasta trebuie mai intai importata. Codul de mai jos importa o componenta de alerta. | ||
| Line 203: | Line 277: | ||
| Rezultatul codului de mai sus este: | Rezultatul codului de mai sus este: | ||
| - | {{ :pw:laboratoare:react-card.png?500 |}} | + | {{ :pw:laboratoare:react-card.png?500&nolink |}} |
| === Carousel === | === Carousel === | ||
| Line 256: | Line 330: | ||
| - [1p] Printr-un request de tip GET accesati toate albumele disponibile pe webserver-ul JSONPlaceholder. | - [1p] Printr-un request de tip GET accesati toate albumele disponibile pe webserver-ul JSONPlaceholder. | ||
| - [2p] Fiecare album va fi reprezentat intr-o componenta de tip **Card**. | - [2p] Fiecare album va fi reprezentat intr-o componenta de tip **Card**. | ||
| - | - Card image reprezinta prima poza din album (hint: afisati thumbnailUrl) | ||
| - Card title este numele albumului | - Card title este numele albumului | ||
| - Card text este informatia despre utilizatorul care a facut albumul, sub forma "by {username} aka {name}" | - Card text este informatia despre utilizatorul care a facut albumul, sub forma "by {username} aka {name}" | ||
| - | - [2p] Afisati intr-o pagina toate albumele. Folositi componenta **Pagination** pentru a reprezenta cate 10 albume pe pagina. | + | - [Bonus] Card image reprezinta prima poza din album (hint: afisati thumbnailUrl) |
| + | - [3p] Afisati intr-o pagina toate albumele. Folositi componenta **Pagination** pentru a reprezenta cate 10 albume pe pagina. | ||
| - [1p] La click pe un album trimiteti un request de tip GET pentru a accesa pozele albumului respectiv | - [1p] La click pe un album trimiteti un request de tip GET pentru a accesa pozele albumului respectiv | ||
| - | - [4p] Afisati pozele intr-o componenta **Carousel**. | + | - [3p] Afisati pozele intr-o componenta **Carousel**. |
