girls go it -- day 6 training 1 -- bootstrap
TRANSCRIPT
![Page 2: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/2.jpg)
Intro. Bine ai venit!
- Începător;
- Ai mai scris cod (Pascal, nu?);
- Te joci cu HTML + CSS în timpul liber.
![Page 3: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/3.jpg)
Ce-i aia Bootstrap?
“Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first
projects on the web.” — getbootstrap.com
![Page 4: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/4.jpg)
Istorie.
- Original: “Twitter Bootstrap”;
- Dezvoltat în cadrul Twitter, Inc.;
- Dezvoltatori: Mark Otto și Jacob Thornton;
- Momentan proiect Open Source, v. 3.3.5;
- Versiunea 4.0 e pe cale să fie lansat (vezi 4.0 alpha).
![Page 5: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/5.jpg)
Necesitate.
- Standardizarea interfețelor sistemelor interne în cadrul Twitter, Inc.;
- Crearea așa numitor guidelines vizuale;
- Specificarea HIG (Human Interface Guidelines).
![Page 6: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/6.jpg)
Istorie (cont.)
- Publicat August 2011 (exact 4 ani în urmă😜);
- Acum e în pragul lansării versiunii 4.0;
- Inițial framework cu CSS pur;
- Acum - mai mult decât doar CSS.
![Page 7: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/7.jpg)
Conținut.
Stiluri, Elemente, Iconițe, Font-uri, Plugins ș.a.
![Page 8: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/8.jpg)
Back to HTML & CSS.
- HTML: HyperText Markup Language;
- CSS: Cascading Style Sheets;
- JavaScript: Logică, animații .
HTML + CSS + JavaScript: Limbajele WEB.
![Page 9: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/9.jpg)
HTML. Recap.- <html></html>
- <head></head>
- <body></body>
- <h1></h1>
- <h2></h2>
- <p></p>
![Page 10: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/10.jpg)
HTML. Recap.
- <img />
- <a href=“#”></a>
- <ul>, <ol>
- <input />
![Page 11: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/11.jpg)
Pure HTML
![Page 12: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/12.jpg)
HTML + Bootstrap = ❤
![Page 13: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/13.jpg)
Bootstrap din interior.
- Stiluri pentru elementele tradiționale;
- Componente bootstrap (labels, badges…);
- JavaScript: Pune viață în elementele tale.
![Page 14: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/14.jpg)
Hm…
![Page 15: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/15.jpg)
HTML + CSS = ?
Poți crea doar cu HTML și CSS interfețe impunătoare.
Însă — e nașpa!
![Page 16: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/16.jpg)
De ce bootstrap?
- Vei salva zeci de ore de coding;
- Componente simple în utilizare;
- Documentație foarte bună;
- Responsive!!!
![Page 17: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/17.jpg)
The irony.
![Page 18: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/18.jpg)
Pachetul Bootstrap.
- CSS - bootstrap.css
- JavaScript - bootstrap.js
- Icon Fonts - glyphicons-regular.ttf
![Page 19: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/19.jpg)
Bootstrap CDN.CDN — Content Delivery Network
Vom utiliza www.bootstrapcdn.com
![Page 20: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/20.jpg)
Stilizarea butoanelor.
![Page 21: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/21.jpg)
Stilizarea formelor.
![Page 22: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/22.jpg)
Clase ajutătoare.
![Page 23: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/23.jpg)
Pictograme vectoriale.
![Page 24: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/24.jpg)
Meniuri de navigare.
![Page 25: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/25.jpg)
Labels.
![Page 26: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/26.jpg)
Alerts
![Page 27: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/27.jpg)
Progress bars.
![Page 28: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/28.jpg)
Și multe altele…
![Page 29: Girls Go IT -- Day 6 Training 1 -- Bootstrap](https://reader031.vdocuments.mx/reader031/viewer/2022021502/58ee94a01a28aba1518b459f/html5/thumbnails/29.jpg)
Și multe altele…