article

Introduction to MVC

Lesson 6 - Bootstrap

[WHAT]

] VIDEO SUMMARY - notes on this lesson which explains what bootstrap is and how you can use it to developn and improve the front end design of your web applications

[WHY]

] bootstrap - makes it very easy to build responsive sites
] themes - to get a custom look for your sites
] components - many pre built items you can use in your web site
] included in MVC framework
] support in VS IDE for enhanced bootstrap productivity

[WHERE]

] WATCH THE FULL VIDEO

] Microsoft MVC intro - Lesson 6 - AngularJS - by microsoft's Jon Galloway and Christopher Harrison

[WHEN]

] 2014-06-24 - produced

[EXAMPLE]

[00:00] bootstrap

] a framework for front end development, included with MVC framework
] can also be used with asp.net web forms projects
] REFERENCE - http://jameschambers.com - has a very good 30 day project example, 1 post on bootstrap
] boostrap how to make html views look good, how to make it work on your mobile devices
] ? in chat re: jquery VS bootstrap

]-jquery - quickly finding a control and updating it across mutliple browsers, plugins,
] bootstrap - has additional, a bootstrap view, css, class

] bootstrap is/has become a defacto standard, you dont have to use it, it does have some "cringy" stuff but for the most part its pretty good, including the docs

[00:00] why

] css by itself is hard, making cross browser sites where everything is uniform across all browsers
] things like buttons, tables with styles(ex hightlight alt rows), for those a lot of the time its difficult to do, bootstrap makes it easy
] theme support -
] responsive design - your site will adapt to narrow or wide screens or device types, letting css deal with it
] grid - makes position elements on your page differently, depending on the device the page is being displayed on.
] components - lots of different
] VS support - set html attributes to pull in css classes, VS and VS WE do a lot of things for you

[09:00] DEMO - themes

] drop in a new css theme to make your site look different from other bootstrap sites
] there are tons of different themes, you can writer your own too
] its very easy to do
*] REMEMBER layout file used the "magic" Styles.Render() method, ] AppStart directory CONTAINS a BundlesConfig.cs class where you specify which css files to Bundle, (the bundling system automatically includes the .min version), downloaded files are located in the /Content directory
] you can buy pre built themes from many sites, including http://wrapbootstrap.com like or find free ones as well http://bootswatch.com
] use copy full path option in VS to get target directory, then download new theme to that directory
] choose theme "Lumen", didnt like it, just download another theme(superhero) liked this one better, its very easy to change them out
] CDN's - many devs host their themes on these, if you dont want to download them
] performance tips - stay off the database, avoid round trips, CDN's

[15:00] DEMO - Responsive layouts

] making your site look good across all size screens
] using @media queries, - apply to all screens with a min-width of x pix
] shows example of hiding content for specific screen sizes

[19:00] DEMO - grids

] sometimes grids can constrain you, this goes in this column but overall a good thing
] you define how much width, things take up at different screen sizes
] examples ] ex large > 1200 px, ] medium > 992, ] small > 768 ] extra small < 768
] chris says some people are still using tables, should get away from that, this makes it easy, ] using tables - elements inside are fixed/rigid, they dont adjust
] demos adusting col-width of elements in code, from 3 with = size, to 3 with varying sizes
] demos adjusting col size for different devices by adding a new bootstrap class to the element, - if it is desktop/laptop screen it will look like this, if it is small phone it will look like this
] check out getbootstrap.com docs for all the details -

[28:30] bootstrap components

] includes things like the following -

] buttons
] pagination -
] media controls - can use nesting,
] collapsible grids -
] tabs -
] tooltips -
] alerts -

*] web forms had controls for these types of elements, ] for mvc you would use these components, in place of controls
] for interactivity you will be using javascript
] glyph icons - by adding a few simple classes, they are implemented using fonts(vs images), which means that they scale to any size

[31:00] DEMO - bootstrap components

] there is a lot more to bootstrap, check out the resources,
] pagination - just add class=pagination to ul list and it is formatted into a pagination set of links
] button - all butttons need the btn class, you cant just use "btn-primary", it needs to be "btn btn-primary", buttons are on a tag
] remember - VS tips - type "a.btn.btn-warning WILL GENERATE html code <a href="#" class="btn btn-warning">
] alert
] glyph icon - putting a "shopping cart icon" inside a buy button <span class=glyphicon glyphicon-shopping-cart></span>
] these are just a few of the components -

[41:30] VS - support

] bootstrap does requires you to write some html, some css
] VS intellisense can detect things like missing btn prefix
] VS intellisense can show you a listing of all the button classes by typing, "btn-" (just like it does with language code like C#)
] VS will show you green squiggly underline warning on element, if code is wrong, example missing btn-warning missing the btn class
] VS has a lot of built in tools for other frameworks - angularjs, coffeessript, less, typescript, javascript, source maps,

[43:00] review and @mention

] @mention - build 2014 talk with angular js, demos using angularjs to build front end, web api to build back end, with David Katuee, also some singularR
] @mention - web-api - is another msft programming framework, designed for returning everything other than html - json, xml, binary, great for building http services
] bootstrap - a great front end framework
] 1 downside - every site looks the same,
] BUT keep in mind, that you can still you use the classes and rework everything to your liking
] AND there are a LOT of templates/themes that enable you to customize your app
] bootstrap enables ] responsive design using ] grid system
] bootstrap includes ] components, ] themes for getting to the style you like

[HOW-TO]

] # 5050 - my project - guide to asp.net - MVC

] # # -

[REFERENCE]

] # 5359 - overview series

quiz

pre quiz = 73% complete, course is 64 points, dashboards show 4, #1627 in Canada, #114,###

] Bootstrap loads the resources that an application needs into memory.

T/F

] BrowserLink automatically updates the web browsers that display pages when you update the pages in Visual Studio.

T/F

] In Bootstrap, which screen width defines medium devices?

] Which two statements about Bootstrap are true?

5] Which statements about Bootstrap are true? Choose all that apply.

- Bootstrap automatically adjusts content size and placement when you resize a window.

- Bootstrap supports tablet devices, laptop computers, and desktop computers.

- Bootstrap can display different menus for different devices sizes.

- Bootstrap does NOT support small form factor devices such as mobile phones.

results 4/5, PRB #5

Details Photos Edit more