Bootstrap 4
0 likes83 views
Kl鱈ov辿 v箪hody Bootstrapu 4 v rychl辿m pehledu: flexbox a grid, utility classes, roz邸iitelnost.
Bootstrap 4
- 1. Bootstrap 4 @AdamKudrna Frontendisti, Praha 13. 12. 2017
- 2. 1. Flexbox & Grid 2. Utility classes 3. Roz邸iitelnost
- 3. Flexbox & Grid Bootstrap podporuje IE 10+ Grid vertik叩ln鱈 a horizont叩ln鱈 centrov叩n鱈, stejn vysok辿 sloupce, robustn鱈 m鱈転kov辿 v箪pisy V箪choz鱈 breakpointy: xs (0), sm (576 px), md (768px), lg (992 px), xl (1200 px) prava n叩zvoslov鱈 v souladu s utility t鱈dami: col-6
- 6. Utility classes Mocn辿! Bootstrap kombinuje komponenty a utility classes Kl鱈ov辿 vlastnosti: odsazov叩n鱈 (margin, padding), display + 鍖exbox Dal邸鱈 vlastnosti: typogra鍖e (display headings), barevnost, dekorace T鱈dy pro layout maj鱈 responzivn鱈 in鍖xy
- 9. Roz邸iitelnost SCSS: nov辿 mo転nosti u転iten辿 pro snadnou kon鍖guraci Aktivn鱈 vyu転it鱈 map a boolean Snadnj邸鱈 cykly a podm鱈nky oproti LESS Skuten jednoduch辿 pizp哲soben鱈 layoutu
- 12. $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1600px, xxxl: 1920px ); $container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1500px, xxxl: 1700px );