edit-article
Home
Up
Delete
Article Name:
Article Description:
[48:46]VIDEO-SUMMARY Introduction to MVC - Lesson 6 - Bootstrap - by Jon Galloway and Christopher Harrison of Microsoft - introduction to using the Bootstrap front end framework within MVC
Chapter ID/Name:
Status:
Write
Writing
Written
Add Photo:
Owner ID:
Content:
use HTML
Edit Content
<h1 style="text-align: center;">Introduction to MVC</h1> <h2 style="text-align: center;">Lesson 6 - Bootstrap</h2> <h2>[WHAT]</h2> <ol> <li>] 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</li> </ol> <h2>[WHY]</h2> <ol> <li>] bootstrap - makes it very easy to build responsive sites</li> <li>] themes - to get a custom look for your sites</li> <li>] components - many pre built items you can use in your web site</li> <li>] included in MVC framework</li> <li>] support in VS IDE for enhanced bootstrap productivity</li> </ol> <h2>[WHERE]</h2> <ol> <li><strong>] WATCH THE FULL VIDEO</strong></li> <ol> <li> <div class="inlineBlock overview-tab-headers semi-bold" title="Basics of MVC and the Moving Parts" data-bind="html: title(), attr: { 'title': title() }">] <a href="https://www.microsoftvirtualacademy.com/en-US/training-courses/introduction-to-asp-net-mvc-8322" target="_blank">Microsoft MVC intro</a> - Lesson 6 - AngularJS - by microsoft's <a href="/view/person?id=347" target="_blank">Jon Galloway</a> and Christopher Harrison</div> </li> </ol></ol> <h2>[WHEN]</h2> <ol> <li>] 2014-06-24 - produced</li> </ol> <h2>[EXAMPLE]</h2> <ol> <li><strong>[00:00] bootstrap</strong></li> <ol> <li>] a framework for front end development, included with MVC framework</li> <li>] can also be used with asp.net web forms projects</li> <li>] REFERENCE - <a href="http://jameschambers.com">http://jameschambers.com</a> - has a very good 30 day project example, 1 post on bootstrap</li> <li>] boostrap how to make html views look good, how to make it work on your mobile devices</li> <li>] ? in chat re: jquery VS bootstrap</li> <ol> <li>]-jquery - quickly finding a control and updating it across mutliple browsers, plugins,</li> <li>] bootstrap - has additional, a bootstrap view, css, class</li> </ol> <li>] 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 </li> </ol> <li><strong>[00:00] why </strong></li> <ol> <li>] css by itself is hard, making cross browser sites where everything is uniform across all browsers</li> <li>] 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</li> <li>] theme support -</li> <li>] responsive design - your site will adapt to narrow or wide screens or device types, letting css deal with it</li> <li>] grid - makes position elements on your page differently, depending on the device the page is being displayed on.</li> <li>] components - lots of different</li> <li>] VS support - set html attributes to pull in css classes, VS and VS WE do a lot of things for you</li> </ol> <li><strong>[09:00] DEMO - themes</strong></li> <ol> <li>] drop in a new css theme to make your site look different from other bootstrap sites</li> <li>] there are tons of different themes, you can writer your own too</li> <li>] its very easy to do</li> <li>*] 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</li> <li>] you can buy pre built themes from many sites, including <a href="http://wrapbootstrap.com" target="_blank">http://wrapbootstrap.com</a> like or find free ones as well <a href="http://bootswatch.com" target="_blank">http://bootswatch.com</a> </li> <li>] use copy full path option in VS to get target directory, then download new theme to that directory</li> <li>] choose theme "Lumen", didnt like it, just download another theme(superhero) liked this one better, its very easy to change them out</li> <li>] CDN's - many devs host their themes on these, if you dont want to download them</li> <li>] performance tips - stay off the database, avoid round trips, CDN's</li> </ol> <li><strong>[15:00] DEMO - Responsive layouts</strong></li> <ol> <li>] making your site look good across all size screens</li> <li>] using @media queries, - apply to all screens with a min-width of x pix</li> <li>] shows example of hiding content for specific screen sizes</li> </ol> <li><strong>[19:00] DEMO - grids</strong></li> <ol> <li>] sometimes grids can constrain you, this goes in this column but overall a good thing</li> <li>] you define how much width, things take up at different screen sizes</li> <li>] examples ] ex large > 1200 px, ] medium > 992, ] small > 768 ] extra small < 768</li> <li>] 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</li> <li>] demos adusting col-width of elements in code, from 3 with = size, to 3 with varying sizes</li> <li>] 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</li> <li>] check out getbootstrap.com docs for all the details -</li> </ol> <li><strong>[28:30] bootstrap components</strong></li> <ol> <li>] includes things like the following -</li> <ol> <li>] buttons</li> <li>] pagination -</li> <li>] media controls - can use nesting,</li> <li>] collapsible grids -</li> <li>] tabs -</li> <li>] tooltips -</li> <li>] alerts -</li> </ol> <li>*] web forms had controls for these types of elements, ] for mvc you would use these components, in place of controls</li> <li>] for interactivity you will be using javascript</li> <li>] glyph icons - by adding a few simple classes, they are implemented using fonts(vs images), which means that they scale to any size</li> </ol> <li><strong>[31:00] DEMO - bootstrap components</strong></li> <ol> <li>] there is a lot more to bootstrap, check out the resources,</li> <li>] pagination - just add class=pagination to ul list and it is formatted into a pagination set of links</li> <li>] 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</li> <li>] remember - VS tips - type "a.btn.btn-warning WILL GENERATE html code <a href="#" class="btn btn-warning"></li> <li>] alert</li> <li>] glyph icon - putting a "shopping cart icon" inside a buy button <span class=glyphicon glyphicon-shopping-cart></span></li> <li>] these are just a few of the components -</li> </ol> <li><strong>[41:30] VS - support</strong></li> <ol> <li>] bootstrap does requires you to write some html, some css</li> <li>] VS intellisense can detect things like missing btn prefix</li> <li>] VS intellisense can show you a listing of all the button classes by typing, "btn-" (just like it does with language code like C#)</li> <li>] VS will show you green squiggly underline warning on element, if code is wrong, example missing btn-warning missing the btn class</li> <li>] VS has a lot of built in tools for other frameworks - angularjs, coffeessript, less, typescript, javascript, source maps, </li> </ol> <li><strong>[43:00] review and @mention</strong></li> <ol> <li>] @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</li> <li>] @mention - web-api - is another msft programming framework, designed for returning everything other than html - json, xml, binary, great for building http services</li> <li>] bootstrap - a great front end framework</li> <li>] 1 downside - every site looks the same,</li> <li>] BUT keep in mind, that you can still you use the classes and rework everything to your liking</li> <li>] AND there are a LOT of templates/themes that enable you to customize your app</li> <li>] bootstrap enables ] responsive design using ] grid system</li> <li>] bootstrap includes ] components, ] themes for getting to the style you like</li> </ol></ol> <h2>[HOW-TO]</h2> <ol> <li>] # 5050 - my project - guide to asp.net - MVC</li> <ol> <li>] # # -</li> </ol></ol> <h2>[REFERENCE]</h2> <ol> <li>] <a href="/view/task?id=5359" target="_blank"># 5359 - overview series</a> </li> </ol><hr /> <h1 style="text-align: left;">quiz</h1> <p style="text-align: left;">pre quiz = 73% complete, course is 64 points, dashboards show 4, #1627 in Canada, #114,###</p> <p style="text-align: left;"> </p> <p>] Bootstrap loads the resources that an application needs into memory.</p> <p>T/F</p> <p style="text-align: left;">] BrowserLink automatically updates the web browsers that display pages when you update the pages in Visual Studio.</p> <p style="text-align: left;">T/F</p> <p style="text-align: left;">] In Bootstrap, which screen width defines medium devices?</p> <p style="text-align: left;">] Which two statements about Bootstrap are true?</p> <p style="text-align: left;">5] Which statements about Bootstrap are true? Choose all that apply.</p> <p>- Bootstrap automatically adjusts content size and placement when you resize a window.</p> <div class="assessment-option"> <p>- Bootstrap supports tablet devices, laptop computers, and desktop computers.</p> </div> <p> - Bootstrap can display different menus for different devices sizes.</p> <div class="assessment-option"><!-- ko if: $parent.viewState.questionViewState.questionDisplayType() == 'radio' --><!-- /ko -->- Bootstrap does NOT support small form factor devices such as mobile phones.</div> <p>results 4/5, PRB #5 </p> <p> </p> <p> </p> <h1> </h1>