HASELT • Currently working with cutting edge front end technologies like: HTML5, CSS3, LESS, SASS, GulpJS, JavaScript, Polymer-Project, AngularJS, C# Razor, Web optimization, Web performance, Yeoman, Bootstrap, …. • Testing new unpublished and technologies in draft version and giving feedback to W3 group. Facebook: https://www.facebook.com/boban.radeski LinkedIn: mk.linkedin.com/pub/boban-radeski/38/952/a90/ Twitter: https://twitter.com/master_boban Boban Radeski | Front end development engineer at HASELT
your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. • Bootstrap is open source. It's hosted, developed, and maintained on GitHub. • Bootstrap is mobile first Boban Radeski | Front end development engineer at HASELT
within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations. • In this course we will use compiled and minified CSS, JavaScript, and fonts. • jQuery is required for using Bootstrap Boban Radeski | Front end development engineer at HASELT
HASELT HTML 5 Setting the version to 'IE=edge' tells Internet Explorer to use the latest engine to render the page and execute JavaScript. This means that the browser will (probably) render the width of the page at the width of its own screen. So if that screen is 320px wide, the browser window will be 320px
grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts. • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding. • Use rows to create horizontal groups of columns. • Content should be placed within columns, and only columns may be immediate children of rows. • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts. • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows. Boban Radeski | Front end development engineer at HASELT
examples below are outdented. It's so that content within grid columns is lined up with non-grid content. • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4. • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col- md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present. Boban Radeski | Front end development engineer at HASELT
• Responsiveness • For the Bosses (easy to learn) • Updates • JavaScript interaction • Cross-browser compatibility • You tell me ….. Boban Radeski | Front end development engineer at HASELT
• If we not have plan to change style, so your site might look like everyone else who use Bootstrap • Contains 4 breakpoints(media queries), but what if want to target other device size? • A lot of styling and JavaScript components that you might not need. • ….. Boban Radeski | Front end development engineer at HASELT
boban
dropout009
satoshi256kbyte
kubotak
okashoi
ivargrimstad
warrenm
igreenwood
maroon1st
ssssota
hirobe1999
chobishiba
tasuku43
lauravandoore
ammeep
vanstee
swwweet
thoeni
marcduiker
eileencodes
garrettdimon
panda_program
thekraken
jcasabona
tammyeverts
