girls go it -- day 6 training 1 -- bootstrap

30
Girls Go IT — 2015 Intro to Bootstrap Mihai Iachimovschi @mishunika [email protected]

Upload: mihai-iachimovschi

Post on 13-Apr-2017

218 views

Category:

Technology


3 download

TRANSCRIPT

Page 1: Girls Go IT -- Day 6 Training 1 -- Bootstrap

Girls Go IT — 2015

Intro to Bootstrap

Mihai Iachimovschi

@mishunika [email protected]

Page 2: Girls Go IT -- Day 6 Training 1 -- Bootstrap

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

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

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

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

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

Conținut.

Stiluri, Elemente, Iconițe, Font-uri, Plugins ș.a.

Page 8: Girls Go IT -- Day 6 Training 1 -- Bootstrap

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

HTML. Recap.- <html></html>

- <head></head>

- <body></body>

- <h1></h1>

- <h2></h2>

- <p></p>

Page 10: Girls Go IT -- Day 6 Training 1 -- Bootstrap

HTML. Recap.

- <img />

- <a href=“#”></a>

- <ul>, <ol>

- <input />

Page 11: Girls Go IT -- Day 6 Training 1 -- Bootstrap

Pure HTML

Page 12: Girls Go IT -- Day 6 Training 1 -- Bootstrap

HTML + Bootstrap = ❤

Page 13: Girls Go IT -- Day 6 Training 1 -- Bootstrap

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

Hm…

Page 15: Girls Go IT -- Day 6 Training 1 -- Bootstrap

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

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

The irony.

Page 18: Girls Go IT -- Day 6 Training 1 -- Bootstrap

Pachetul Bootstrap.

- CSS - bootstrap.css

- JavaScript - bootstrap.js

- Icon Fonts - glyphicons-regular.ttf

Page 19: Girls Go IT -- Day 6 Training 1 -- Bootstrap

Bootstrap CDN.CDN — Content Delivery Network

Vom utiliza www.bootstrapcdn.com

Page 20: Girls Go IT -- Day 6 Training 1 -- Bootstrap

Stilizarea butoanelor.

Page 21: Girls Go IT -- Day 6 Training 1 -- Bootstrap

Stilizarea formelor.

Page 22: Girls Go IT -- Day 6 Training 1 -- Bootstrap

Clase ajutătoare.

Page 23: Girls Go IT -- Day 6 Training 1 -- Bootstrap

Pictograme vectoriale.

Page 24: Girls Go IT -- Day 6 Training 1 -- Bootstrap

Meniuri de navigare.

Page 25: Girls Go IT -- Day 6 Training 1 -- Bootstrap

Labels.

Page 26: Girls Go IT -- Day 6 Training 1 -- Bootstrap

Alerts

Page 27: Girls Go IT -- Day 6 Training 1 -- Bootstrap

Progress bars.

Page 28: Girls Go IT -- Day 6 Training 1 -- Bootstrap

Și multe altele…

Page 29: Girls Go IT -- Day 6 Training 1 -- Bootstrap

Și multe altele…

Page 30: Girls Go IT -- Day 6 Training 1 -- Bootstrap

Great!

www.letscode.org.hk