girls go it -- day 6 training 1 -- bootstrap
Post on 13-Apr-2017
218 Views
Preview:
TRANSCRIPT
Girls Go IT — 2015
Intro to Bootstrap
Mihai Iachimovschi
@mishunika mihai.iachimovschi@gmail.com
Intro. Bine ai venit!
- Începător;
- Ai mai scris cod (Pascal, nu?);
- Te joci cu HTML + CSS în timpul liber.
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
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).
Necesitate.
- Standardizarea interfețelor sistemelor interne în cadrul Twitter, Inc.;
- Crearea așa numitor guidelines vizuale;
- Specificarea HIG (Human Interface Guidelines).
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.
Conținut.
Stiluri, Elemente, Iconițe, Font-uri, Plugins ș.a.
Back to HTML & CSS.
- HTML: HyperText Markup Language;
- CSS: Cascading Style Sheets;
- JavaScript: Logică, animații .
HTML + CSS + JavaScript: Limbajele WEB.
HTML. Recap.- <html></html>
- <head></head>
- <body></body>
- <h1></h1>
- <h2></h2>
- <p></p>
HTML. Recap.
- <img />
- <a href=“#”></a>
- <ul>, <ol>
- <input />
Pure HTML
HTML + Bootstrap = ❤
Bootstrap din interior.
- Stiluri pentru elementele tradiționale;
- Componente bootstrap (labels, badges…);
- JavaScript: Pune viață în elementele tale.
Hm…
HTML + CSS = ?
Poți crea doar cu HTML și CSS interfețe impunătoare.
Însă — e nașpa!
De ce bootstrap?
- Vei salva zeci de ore de coding;
- Componente simple în utilizare;
- Documentație foarte bună;
- Responsive!!!
The irony.
Pachetul Bootstrap.
- CSS - bootstrap.css
- JavaScript - bootstrap.js
- Icon Fonts - glyphicons-regular.ttf
Bootstrap CDN.CDN — Content Delivery Network
Vom utiliza www.bootstrapcdn.com
Stilizarea butoanelor.
Stilizarea formelor.
Clase ajutătoare.
Pictograme vectoriale.
Meniuri de navigare.
Labels.
Alerts
Progress bars.
Și multe altele…
Și multe altele…
top related