(public).sospep.subjects ~ view article ~ introduction-MVC-lesson-6

<h1 style="text-align: center;">Introduction to MVC</h1>
<h2 style="text-align: center;">Lesson&nbsp;6 - Bootstrap</h2>
<h2>[WHAT]</h2>
<ol>
<li>]&nbsp;VIDEO SUMMARY -&nbsp;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>]&nbsp;bootstrap -&nbsp; 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&nbsp;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>&nbsp;- Lesson&nbsp;6 -&nbsp;AngularJS - &nbsp;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 -&nbsp;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,&nbsp;css, class</li>
</ol>
<li>] bootstrap&nbsp;is/has become&nbsp;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&nbsp;&nbsp;</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),&nbsp;for those a lot of the time its difficult to do, bootstrap makes it easy</li>
<li>] theme support&nbsp; -</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&nbsp;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&nbsp;a lot of things for you</li>
</ol>
<li><strong>[09:00] DEMO - themes</strong></li>
<ol>
<li>]&nbsp;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&nbsp;layout file used the "magic" Styles.Render() method, ] AppStart&nbsp;directory CONTAINS a BundlesConfig.cs class where you specify which css files to Bundle,&nbsp;(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>&nbsp;&nbsp;like or find free ones as well <a href="http://bootswatch.com" target="_blank">http://bootswatch.com</a>&nbsp;</li>
<li>] use copy full path option in VS to get&nbsp;target directory, then&nbsp;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 &nbsp;] ex large &gt; 1200 px, ] medium &gt; 992, ] small &gt; 768 ] extra small &lt; 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] &nbsp;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&nbsp;GENERATE html code &lt;a href="#" class="btn btn-warning"&gt;</li>
<li>] alert</li>
<li>] glyph icon - putting a "shopping cart icon" inside a buy button &lt;span class=glyphicon glyphicon-shopping-cart&gt;&lt;/span&gt;</li>
<li>] these are just a few of the components -</li>
</ol>
<li><strong>[41:30] VS - support</strong></li>
<ol>
<li>] bootstrap does&nbsp;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,&nbsp;coffeessript, less, typescript, javascript, source maps,&nbsp;</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&nbsp; ] 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>&nbsp;</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;">&nbsp;</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>&nbsp;- Bootstrap can display different menus for different devices sizes.</p>
<div class="assessment-option">- Bootstrap does NOT support small form factor devices such as mobile phones.</div>
<p>results 4/5, PRB #5&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h1>&nbsp;</h1>

~ view article ~ Chapter] ch-100-introduction-to-MVC FROM [ Book] asp.net IN [ libraries] technology-developer-www