Watch trailer
Course at a glance
Included in these subscriptions:
- Dev & IT Pro Video
- Dev & IT Pro Power Pack
| Release date | 7/14/2014 | |
| Level | Intermediate | |
| Runtime | 1h 40m | |
| Closed captioning | Included | |
| Transcript | Included | |
| eBooks / courseware | Included | |
| Hands-on labs | N/A | |
| Sample code | Included | |
| Exams | Included |
Course description
Bootstrap has many reasons to love it. Why? Apart from being a FREE, open-sourced, really powerful, mobile-first responsive front-end framework, it also provides you with quite a lot of value right out of the box – with very little effort. With just a simple knowledge of some of the basic elements of Bootstrap styles, it takes just a small amount of work – typically just adding an CSS class here or there to HTML elements you already have in place to – to truly transform your site in to a professional-looking cleanly designed web application. In this course, we look at what basic CSS classes come with Bootstrap and how to apply them to your site to make it look great. You’ll be surprised at how easy it is, and maybe you’re love affair with this front-end framework will begin too.
Prerequisites
This course assumes that the users have an understanding of developing web applications using HTML, ASP.NET, and JavaScript in any development environment. The user should have already viewed ‘Bootstrap 3.1: Introduction and Installing’ before viewing this course.
Learning Paths
This course is part of the following LearnNowOnline SuccessPaths™:
JavaScript Frameworks
Meet the expert
Adam Barney has been writing code in one form or another since the 4th grade and has been 100% focused on .NET since 2005. He is currently a senior-level consultant living in Lincoln, NE where he co-founded and runs both the Lincoln .NET Users Group and Nebraska Code Camp. Adam also enjoys speaking at user groups, code camps, and developer conferences in the Midwest.
Course outline
Base CSS
Grid (27:09)
- Introduction (00:50)
- The Grid System (01:07)
- The Responsive Grid Columns (00:43)
- Responsive Column Widths (02:16)
- Basic Layout HTML (00:29)
- Other Grid Features (01:15)
- Demo: The Grid System (04:18)
- Demo: The Grid - med to sm (05:47)
- Demo: The Grid - offsets (05:02)
- Demo: The Grid - push pull (05:02)
- Summary (00:15)
Typography (09:18)
- Introduction (00:24)
- Typography (00:49)
- Lists (00:59)
- Demo: Typography (03:18)
- Demo: Typography - lists (03:27)
- Summary (00:18)
Tables (08:17)
- Introduction (00:18)
- Tables (01:06)
- Table Row and Cell Styling (00:34)
- Demo: Table - styles (03:25)
- Demo: Tables - rows/cells (02:35)
- Summary (00:17)
Forms (14:42)
- Introduction (00:22)
- Forms (01:00)
- Normal Forms (00:40)
- Horizontal Forms (01:08)
- Inline Forms (00:41)
- Supported Controls (00:21)
- Form Style (00:59)
- Demo: Forms - normal (03:27)
- Demo: Forms – horizontal (04:30)
- Demo: Forms – inline (01:09)
- Summary (00:20)
Buttons (07:54)
- Introduction (00:36)
- Buttons (00:53)
- Button Styling (01:01)
- Demo: Buttons (05:06)
- Summary (00:17)
Helpers (12:46)
- Introduction (00:28)
- Helper Classes (01:36)
- Responsive Helpers (01:09)
- Demo: Helper - color - hidden (04:11)
- Demo: Helper - visible - text (05:04)
- Summary (00:16)
UpdatingBlogSite (20:44)
- Introduction (00:16)
- Updating Our Blog Site (00:30)
- Demo: Blog Site - Main layout (05:03)
- Demo: Blog Site – Post - title1 (04:47)
- Demo: Blog Site – Post - title2 (04:13)
- Demo: Blog Site – Override (05:17)
- Summary (00:34)