7.curs 7 (Responsive&Bootstrap)

PROIECTAREA
INTERFEȚELOR
UTILIZATOR
GIANINA GABOR
C7
CUPRINS
 Responsive web design – definiție, elemente
esențiale, avantaje și dezavantaje
 Creare și implementare design responsive
folosind griduri fluide, imagini flexibile &
media queries
 Responsive web design & framework-uri
 Bootstrap – modalitate de utilizare, sistemul
de griduri, tipografie, tabele, liste, grupuri,
imagini
 Implementare responsive web design cu
Bootstrap
RESPOSIVE WEB DESIGN?
 Un website responsive = are capacitatea să
își adapteze designul /layout-ul paginilor în
funcție de rezoluția ecranului (desktop, laptop,
tabletă, telefon) fără a suferi degradări majore
pentru a oferi utilizatorilor o experiență
excelentă de navigare
 concept Responsive Design introdus în 2010
de Ethan Marcotte - articol scris pe AListApart
 conceptul a câștigat popularitate în ultimii ani
RESPOSIVE WEB DESIGN
CONCEPT RESPONSIVE DESIGN
 tehnică de creare a unui website ce poate fi

ulterior vizualizat optim indiferent de
dispozitivul folosit
 tehnică ce sugerează ca design-ul web și
implementarea codului unui website să
răspundă comportamentului și mediului
utilizatorului în funcție de rezoluția
ecranului platformă și orientare
 nu este o simplă metodă nouă de a crea
site-uri web ci mai degrabă un nou tip de
gândire
 responsive web design utilizează doar
HTML și CSS
 realizăm responsive web design = utilizăm
HTML & CSS pentru a redimensiona, a
ascunde, a micșora, a mări sau a muta
conținutul unei pagini web pentru a arăta
bine pe orice ecran
RESPONSIVE WEB DESIGN
”Empty your mind, be formless, shapeless -
like water.
Now you put water in a cup, it becomes the

cup;
You put water into a bottle it becomes the
bottle;
You put it in a teapot it becomes the teapot.
Now water can flow or it can crash. Be water,

my friend.”
Bruce Lee
Viewport & marcaj <meta>
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
 <meta> – element ce dă instrucțiuni browser-ului
despre modalitatea de a controla dimensiunea
paginii & scalarea
 width=device-width – specifică lățimea paginii care
trebuie să urmeze lățimea ecranului device-ului
 initial-scale=1.0 – setare valoare inițială nivel de
zoom la prima încărcare a paginii de către browser
Elemente esențiale
 Grid-uri fluide - iau în considerare o paletă
largă de rezoluții & pe măsură ce rezoluția se
schimbă elementele din pagini se
redimensionează
 Imagini flexibile - își pot modifica înălțimea
sau lățimea în funcție de grid
 Interogări media (media queries)
Grid-urile fluide
 au luat inevitabil locul grid-urilor fixe
datorită multitudinii de rezoluții existente în
prezent
se bazează pe calculul proporțiilor și își pot
modifică lățimea și înălțimea funcție de
rezoluție
dimensiunile nu se mai măsoară în pixeli ci
în procente și unități relative
Imagini flexibile
 își pot modifica dimensiunile în funcție de
rezoluția dispozitivului și dimensiunea
gridului
e indicat să fie salvate pe server mai multe
dimensiuni pentru fiecare imagine & apoi să
fie încărcată dimensiunea potrivită rezoluției
Interogări multimedia (media queries)

 reprezinta un procedeu eficient de a încărca
diferite proprietăți CSS în funcție de rezoluție
site-ul recunoaște automat tipul
dispozitivului și rezoluția acestuia încărcând
proprietățile CSS corespunzătoare
Modalitate de lucru
 mărește timpul alocat crearii design-ului &
implementarii cu HTML5 si CSS3
 în loc de o singură versiune de layout se
crează 3 – 5 și fiecare trebuie implementată
în loc de o singură imagine pentru un layout
exista aceeași imagine la diverse dimensiuni
încarcate pe server de unde încărca imaginea
potrivită funcție de rezoluție
Avantaje
accesibilitate – există o versiune de site
funcțională pe toate dispozitivele & nu mai sunt
necesare versiuni speciale de mobil dezvoltate
separat → eficientizare costuri
simple sharing – un singur URL pentru toată
lumea!
experiență bună de navigare – se adaptează
rezoluției se elimină erorile de nagivare, apariția
unui scroll orizontal & a butoanelor prea mici
pentru a fi apăsate
Dezavantaje
 costuri – crește volumul de muncă prin urmare
cresc și costurile
compatibilitate – pot apărea mai ușor
incompatibilități între browsere sau erori de
afișare
dificultăţi datorate faptului că responsive design
introduce un nou nivel de complexitate al layout-
urilor
TEHNICA RESPONSIVE DESIGN
tehnica cea mai utilizată din 2013 încoace
deoarece proprietarii de website-uri doresc să
ofere o experiență cât mai plăcută utilizatorilor
 concept care realizat corect poate îmbunătăți

experiența utilizatorului dar nu poate rezolva orice
dorință a oricărui utilizator, platformă sau
dispozitiv
încearcă să producă o experiență plăcută și

personalizată pentru fiecare utilizator în parte
TEHNICA RESPONSIVE DESIGN
ajută utilizatorii printr-un site web adaptabil în

funcție de rezoluția dispozitivului care poate fi
implementat folosind media query-uri CSS3,
imagini flexibile & grid-uri fluide
utilizată pentru soluții personalizate pentru o
varietate de utilizatori ce folosesc o varietate de
dispozitive mobile ce prezintă o diversitate de
rezoluții, browsere și specificații
responsive web design & framework-uri  cele
mai cunoscute - Bootstrap, Foundation &
Skeleton
Griduri fluide
în cazul gridurilor fluide se utilizează procente
din dimensiunea dispozitivului de afișare utilizat
 utilizez formula target / context = result
otarget (wrapper) = lățimea în pixeli site (960 pixeli)
ocontext = fereastra maximizată browser (1920 pixeli)
oresult = % obținut
960px / 1920px = 50%
Griduri fluide
 procente elemente din site
sidebar
300px / 960px = 31.25%
main content
640px / 960px = 66.66667%
margin
20px / 960px = 2.08334%
procentele obținute pot fi atașate în fișier
CSS proprietăților width, margin & padding
RWD GRIDURI FLUIDE
* {
box-sizing: border-box;
}
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
Griduri fluide
 pentru un control mai bun asupra paginii
considerăm 12 coloane cu lătime totală 100 %
care se micșorează/măresc la modificarea
dimensiunii ferestrei de browser
fiecare coloană va avea un procentaj de
100% / 12 columns = 8.33%
pentru fiecare dintre cele 12 coloane
implementăm o clasă class=”col-” și specificăm
o valoare care definește numărul de coloane
peste care se întinde secțiunea
RWD GRIDURI FLUIDE
.col-1 {width: 8.33%;} [class*="col-"] {
.col-2 {width: 16.66%;} float: left;
.col-3 {width: 25%;} padding: 15px;
.col-4 {width: 33.33%;} border: 1px solid red;
.col-5 {width: 41.66%;} }
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;} .row::after {
.col-9 {width: 75%;} content: "";
.col-10 {width: 83.33%;} clear: both;
.col-11 {width: 91.66%;} display: table;
.col-12 {width: 100%;} }
<div class="row">
<div class="col-3">...</div> 
<div class="col-9">...</div> 
</div>
Imagini flexibile
 imaginile pot deveni fluide prin scalarea
dimensiunilor acestora
 scalare prin mărire dimensiune
img {
width: 100%;
height: auto;}
 scalare prin img {
micșorare dimensiune max-width: 100%;

height: auto; }
Imagini flexibile background
setăm proprietatea background-size la valoarea
"contain" → imaginea se va scala & va încerca să
se încadreze în zona de conținut păstrându-și
aspectul
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red; }
 setăm proprietatea background-size la valoarea
la valoarea "100% 100%" → imaginea se va
întinde astfel încât să acopere întreaga zonă de
conținut
div {
width: 100%;
height: 400px;
background-size: 100% 100%;
 setăm proprietatea background-size la valoarea
"cover" → imaginea se va scala și va acoperi
toată zona prin menținerea aspectului imaginii
existând și posibilitatea ca ea să fie tăiată
div {
width: 100%;
height: 400px;
background-size: cover;
Imagini flexibile dimensiuni diferite
 verificare lățime fereastră de browser
/* for width smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}
/* for width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
}
}
Imagini flexibile dimensiuni diferite
 verificare lățime dispozitiv de afișare
/* for width smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}
/* for width 400px and larger: */
@media only screen and (min-device-width: 400px) {
body {
}
}
Imagini flexibile
 utilizare element <picture>
<picture>
<source srcset="img_smallflower.jpg"
media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>
Interogari media / media queries

 tehnologie CSS = inima design-ului responsive
ce permite unor opțiuni CSS să fie aplicate doar
atunci când sunt îndeplinite anumite condiții
se pot crea interogări media care se vor aplica
din fișierul CSS doar dacă browser-ul ajunge la o
valoare specificată a lățimii /width 
pe baza lor se va determina lățimea site-ului iar
prin intermediul fișierului CSS se va realiza
rearanjarea conținutului
Interogari media (media queries)

la un moment dat orice grid fluid va începe să
nu mai arate bine  acest punct se numește
breakpoint
putem defini diverse puncte în funcție de
dimensiunea ecranului de la care design-ul să se
comporte diferit
în general site-urile responsive își definesc
breakpoint-urile printr-o serie de interogări media
Interogari media (media queries)
 grupuri majore breakpoint
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and
up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
/* Large devices (laptops/desktops, 992px and up) */
/* Extra large devices (large laptops and desktops, 1200px
and up) */

Interogari multimedia (media queries)
 un cod responsive poate avea forma
/* ...mobile styles here... */
@media screen and (min-width: 600px) { /* ...tablet styles here... */ }
@media screen and (min-width: 900px) { /* ...desktop styles here... */ }
 în practică se pot utiliza mai multe interogări

pentru mărimi considerate adecvate/potrivite
pentru conținutul site-ului web
 pentru determinare valori pentru interogări
accesați screensiz.es  rezoluții dispozitive ce pot
fi utilizate la accesare site
RWD REZOLUȚII MOBILE
RWD REZOLUȚII TABLETE
TOP REZOLUȚII MOBILE
RWD REZOLUȚII MONITOARE
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%; } }
 design /* For mobile phones: */
[class*="col-"] {
mobile width: 100%; }
first @media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;} }
 design /* For mobile phones: */
[class*="col-"] {
mobil width: 100%; }
tabletă @media only screen and (min-width:700px) {
desktop /* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;} }
 design @media only screen and
mobil (min-width: 768px) {
/* For desktop: */
tabletă .col-1 {width: 8.33%;}
desktop .col-2 {width: 16.66%;}
.col-4 {width: 33.33%;}
<div class="row"> .col-5 {width: 41.66%;}
<div class="col-3 col-s-3">...</div> .col-6 {width: 50%;}
<div class="col-6 col-s-9">...</div> .col-7 {width: 58.33%;}
<div class="col-3 col-s-12">...</div> .col-8 {width: 66.66%;}
</div> .col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;} }
 modificare layout pagină funcție de orientare
browser → utilizare proprietate landscape
orientation care se aplică dacă fereastra de
browser are lățimea > înălțimea
@media only screen and (orientation: landscape) {

body {
background-color: lightblue;
}
}

 ascunderea/dispariția unor elemente pentru
diverse dimensiuni de ecran
/* If the screen size is 600px wide or less, hide

the element */
div.example {
display: none;
}
}
 modificare dimensiune font în funcție de
dimensiunea ecranului
/* If the screen size is 601px or more set the font-size of

<div> to 80px */
@media only screen and (min-width: 601px) {
div.example {
font-size: 80px;
} }
/* If the screen size is 600px or less, set the font-size of
<div> to 30px */
div.example {
font-size: 30px;
} }
EXEMPLE RESPONSIVE
CONSULTĂ FISIER
PIU_EX_C7_1
LINK-URI UTILE
 https://learn.shayhowe.com/advanced-html-
css/responsive-web-design/
 https://www.w3schools.com/html/
html_responsive.asp
 https://creadiv.ro/blog/ce-inseamna-design-
responsive/
 https://creadiv.ro/blog/ce-inseamna-design-
responsive/
 https://www.creativebloq.com/rwd/responsive-
web-design-tutorials-71410085
FRAMEWORK-URI CSS
oferă structura de bază pentru design site &
grid-uri/coloane ce permit să realizezi layout-ul
împreună cu definiții de bază elemente HTML
 TOP
 Twitter Bootstrap https://twitter.com/getbootstrap
 Zurb Foundation https://foundation.zurb.com
 Skeleton http://getskeleton.com
cu derivația Wirefy https://getwirefy.com
 Gumby https://gumbyframework.com
 Kubehttp://kube7.imperavi.com
Twitter BOOTSTRAP
oferă multe facilități și componente CSS
sau Javascript
colecție de unelte cu template-uri pentru
HTML & CSS pentru formulare, butoane,
tipografie, navigare & alte componente legate
de interfață
 considerat mamut deoarece are suport și
pentru browsere mai vechi în detrimentul
tehnologiilor noi HTML5 & CSS3
ZURB Foundation
NU are suport pentru Internet Explorer 7
sau Internet Explorer 8
are un suport extraordinar pentru browsere
mobile fiind excelent pentru responsive
design
 este un framework care se concentrează pe
resposive design
SKELETON & Wirefy
cel mai simplu și ușor de modificat
framework responsive care dă libertate de
mișcare
permite lucrul rapid & oferă elemente de
bază – grilă/grids, tipografie și CSS pentru
formulare
 are o dimensiune mică = perfect pentru cei
care doresc să fie originali în design
 Wirefy / derivat Skeleton – pe lângă CSS de
bază oferă & JavaScript pentru componente
de bază
GUMBY
 framework care oferă o bază bună pentru
realizarea unui site
 permite schimbarea on-the-fly a structurii
de grids
→ dacă începi site-ul cu o grilă/grid de 14

coloane poți oricând să împarți rândul de 14
coloane în 16 coloane
KUBE
uimitor prin felul/modul original de a realiza
grid-ul
documentația pentru framework este
lacunară
 trebuie văzut și încercat fiind unul grozav
deoarece realizează încărcarea dinamică a
modulelor
BOOTSTRAP descărcare
site oficial https://getbootstrap.com
→ 2 versiuni
 versiunea Precompiled Bootstrap – acces la
fișiere CSS, JavaScript și Fonts gata de
utilizat fonturile incluse fiind Glyphicons
 versiunea Bootstrap source code – acces
atât la fișierele CSS, JavaScript și Fonts dar
și la fișierele sursă LESS, JavaScript & o vastă
documentație
De ce BOOTSTRAP ?
Este mobile first, suportat de majoritatea browser-
elor populare, ușor de învățat & responsive
Elemente importante
 scaffolding - sistem de grile/grids & stiluri pentru link-
uri, background-uri, butoane, …
 CSS - setări ce pot fi modificate din CSS & elemente
prestabilite
 componente - elemente refolosibile / icon-uri,
dropdown-uri, meniuri, alerte, pop-overs, …
 plug-in-uri - conține plugin-uri jQuery pe care le puteți
include în funcție de necesități
Motive utilizare BOOTSTRAP
1– compilarea & personalizarea
2 – sistemul de 12 grid-uri responsive
3 – componentele HTML & JavaScript
4 – stiluri CSS de bază pentru majoritatea
elementelor
5 – suport, documentare & răspunsuri
6 – cerere crescută proiecte dezvoltate cu
Bootstrap
1 - compilarea & personalizarea
 poate fi utilizat când dorești performanță de la site
 pune la dispoziție opțiunea de compilare – selectezi și
descarci doar ceea ce utilizezi în proiect
 poți reduce dimensiune fișier comprimat CSS de la 120
KB la 40 KB dacă utilizezi doar structuri responsive
 poți reduce dimensiune fișier JavaScript pe care îl poți
compila sau exclude din proiect
 pagina de compilare
https://getbootstrap.com/docs/3.4/customize/
2 – sistem de 12 grid-uri responsive
 împarte pagina web în 12 coloane cu valori
procentual egale și astfel putem obține orice
configurație de box-uri dorim pentru conținut
 Extrem de flexibil iar clasele responsive pot fi

controlate în funcție de lățimea dispozitivului
 site-urile moderne utilizează structurile de grid-uri

și elemente responsive iar utilizarea Boostrap
duce la realizare de site-uri foarte asemănătoare
3 – componente HTML & JavaScript
pune la dispoziție componente și
elemente utilizate în majoritatea
proiectelor
 meniu de navigare cu drop down
 carusel
 breadcrumbs
4 – stiluri CSS elemente
conține o serie de stiluri pentru
elemente de bază ce pot fi incluse
ușor în proiecte
 butoane
 formulare
 tabele
 imagini
5 – suport, ducumentare, răspunsuri
 vine cu o documentare foarte bună din care
poți învăța ușor
6 – cerere proiecte dezvoltate în creștere
 site-urile noi sunt dezvoltate cu Bootstrap →
rezultă un timp de dezvoltare mai mic & modificări
realizate ușor dar e necesară cunoașterea claselor
 template-uri pe
Themeforest.net
Mod de lucru BOOTSTRAP
#1 – descărcarea
 accesare http://getbootstrap.com/getting-started/
& download
v. precompilată v. LESS descărcată versiunea

& minimizată direct de pe SASS
NU include GitHub
documentația
 utilizare CDN fără descărcare fișiere
 structură fișiere v.precompilată / Download
Bootstrap
 structură fișiere versiune Source Code
#2 – includere fișiere în director root site
 mut bootstrap.min.css din CSS în director
CSS propriu & bootstrap.min.js în JS
 include bootstrap.min.css iar sub el stilul
propriu CSS / în acesta vei suprascrie clasele
Bootstrap când e cazul și adaugi stilurile tale
 pentru o încărcare rapidă a site-ului fișierele
js se include la sfârșitul paginii
→ bootstrap.min.js are nevoie de biblioteca
jQuery ce poate fi descărcată și inserată
înainte
#3 – utilizarea claselor Bootstrap
 pentru lucru rapid e necesară cunoașterea
claselor predefinite → învățare prin navigare
pe site Bootstrap
clasele predefinite sunt din categoria CSS,
componente & JavaScript
 lista completă clase Bootstrap
https://www.w3schools.com/bootstrap/
bootstrap_ref_all_classes.asp
#4 – primele linii de cod cu Bootstrap
Creare meniu de navigare
• accesezi Components > Navbar
• copiezi codul pentru meniul de navigare în pagina ta
web
• salvezi și testezi în browser
#4 – primele linii de cod cu Bootstrap
Primul template
BOOTSTRAP
Sistemul de grid-uri / grid system
 permite construirea rapidă a layout-ului
unui site web responsive
 Bootstrap v.3 → 12 coloane care se
modifică funcție de mărimea viewport-ului
BOOTSTRAP
Sistemul de grid-uri
 conține clase predefinite de grid pentru
telefoane, tablete, desktop-uri
• col-xs- / dispozitive extra small pentru a crea o
grilă pentru telefoane
• col-sm- / dispozitivele cu ecrane medii precum
tabletele
• col-md / dispozitive cu ecrane mai mari ca tabletele
sau desktop-uri cu monitoare nu foarte mari
• col-lg- / dispozitive cu display-uri foarte mari /
monitoare foarte mari
BOOTSTRAP
 cod sursă structură standard Bootstrap cu
grid-uri
BOOTSTRAP
 layout pe 2 coloane pe toate dispozitivele care
pe mobil de așează una sub alta
BOOTSTRAP
 layout pe 3 coloane pentru desktop și tabletă
în mod landscape / orice ecran cu rezoluție 〉 =
992 px
BOOTSTRAP
 layout pe 3 coloane pentru dispozitive medii
iar pe mobil/tabletă în mod portrait vor fi 2
coloane iar a 3-a coloană se mută sub ele/
fiecare coloană va avea offset pentru a putea fi
aliniată
BOOTSTRAP
 clase pentru diverse rezoluții
BOOTSTRAP
 layout cu lățime fixă
BOOTSTRAP
 layout fluid
BOOTSTRAP
Sistemul de grid-uri / grid system
 utilizare
BOOTSTRAP
Tipografie
 heading-uri - utilizăm tag-urile <h1> … <h6>
 tag <small> sau <span class=“small”>
BOOTSTRAP
Tipografie – 2 tipuri de paragrafe
 normal
 lead
BOOTSTRAP
Tipografie
 aliniere text
BOOTSTRAP
Tipografie
 transformare text
BOOTSTRAP
Tipografie
 culori text
BOOTSTRAP
Tipografie
 blockquote – are un stil mai special
BOOTSTRAP
Tabele
 tabel simplu
BOOTSTRAP
Tabele
 tabel cu rânduri colorate
BOOTSTRAP
Tabele
 tabel cu border
pe margini
BOOTSTRAP
Tabele
 tabel condensat
BOOTSTRAP
Liste – 3 tipuri
 neordonate / ul / marcate cu buline
 ordonate / ol / marcate cu numere
 liste de definire / dl / ce conțin termeni și
definițiile acestora
BOOTSTRAP
Liste
 listă neordonată unstyled
BOOTSTRAP
Liste
 listă inline
BOOTSTRAP
Liste
 listă de definire
BOOTSTRAP
Liste
 list group – seamănă cu o listă neordonată cu
clasa .list-group elementele fiind .list-group-item
BOOTSTRAP
Liste
 list group – cu item-uri link-uri
BOOTSTRAP
Imagini
 cu colțuri rotunjite / rounded corners -
utilizez clasa .img-rounded
BOOTSTRAP
Imagini
 cerc / circle – utilizez clasa .img-circle
BOOTSTRAP
Imagini
 thumbnail – utilizez clasa .img-thumbnail
BOOTSTRAP
Imagini
 responsive
 adaug clasei .img.responsive tag-ul <img> &
imaginea va fi scalată în cadrul elementului
părinte
 clasa .img-responsive aplică imaginii setările –
display:block; max-width:100%; & height:auto;

BOOTSTRAP
Imagini
 galerie imagini
BOOTSTRAP
Imagini
 elemente video/slideshow-uri scalate –
aplicăm clasele responsive direct elementelor
<iframe>, <embed>, <video> & <object> și definim
aspectul 4:3 format video universal sau 16:9
televiziune HD
BOOTSTRAP
Imagini
 implementare carusel
• Plug-in-urile sunt incluse individual folosind
carousel.js
sau
• Plug-in-urile sunt incluse toate odată folosind
bootstrap.js sau bootstrap.min.js
IE 9 – nu suportă elemente de tip carusel datorită
utilizării tranzițiilor și animațiilor CSS3
! fisier sursă / Bootstrap – carusel.docx !

EXEMPLE BOOTSTRAP
CONSULTĂ FISIER
PIU_EX_C7_2
LINK-uri UTILE
 https://www.todaysoftmag.ro/article/258/twitter-
bootstrap-in-aplicatii-web
 https://www.w3resource.com/twitter-bootstrap/
tutorial.php
 https://www.tutorialrepublic.com/twitter-bootstrap-
tutorial/
 https://www.w3schools.com/bootstrap/default.asp
 http://www.invata-programare.ro/article/
introducere-despre-bootstrap-si-configurarea-
mediului-de-lucru
 https://getbootstrap.com/docs/3.3/getting-started/
REZUMAT
 Responsive web design – definiție & elemente
esențiale, avantaje și dezavantaje
 Creare și implementare design responsive
folosind griduri fluide, imagini flexibile & media
queries
 Responsive web design & framework-uri
 Bootstrap – modalitate de utilizare, sistemul
de griduri, tipografie, tabele, liste, grupuri,
imagini
 Implementare responsive web design cu

7.curs 7 (Responsive&Bootstrap)

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

7.curs 7 (Responsive&Bootstrap)

Încărcat de

Drepturi de autor:

Formate disponibile

PROIECTAREA

 tehnică de creare a unui website ce poate fi

Now you put water in a cup, it becomes the

Now water can flow or it can crash. Be water,

Interogări multimedia (media queries)

 concept care realizat corect poate îmbunătăți

încearcă să producă o experiență plăcută și

ajută utilizatorii printr-un site web adaptabil în

 scalare prin img {

micșorare dimensiune max-width: 100%;

Interogari media / media queries

Interogari media (media queries)

 în practică se pot utiliza mai multe interogări

@media only screen and (orientation: landscape) {

Interogari multimedia (media queries)

/* If the screen size is 600px wide or less, hide

/* If the screen size is 601px or more set the font-size of

→ dacă începi site-ul cu o grilă/grid de 14

 Extrem de flexibil iar clasele responsive pot fi

 site-urile moderne utilizează structurile de grid-uri

v. precompilată v. LESS descărcată versiunea

! fisier sursă / Bootstrap – carusel.docx !

S-ar putea să vă placă și