Introduction to Bootstrap

Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. In this course we'll see how to use Bootstrap's CSS and JavaScript to turn plain HTML into navigational menus, picture carousels, split buttons, alerts, modal dialogs, and more.
Course info
Rating
(3201)
Level
Intermediate
Updated
Feb 5, 2013
Duration
2h 9m
Table of contents
Description
Course info
Rating
(3201)
Level
Intermediate
Updated
Feb 5, 2013
Duration
2h 9m
Description

Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. In this course we'll see how to use Bootstrap's CSS and JavaScript to turn plain HTML into navigational menus, picture carousels, split buttons, alerts, modal dialogs, and more. As an open source and free gift from the developers at Twitter, Bootstrap is a pure CSS and JavaScript framework that you can use with any editor or server technology.

About the author
About the author

Scott has over 15 years of experience in commercial software development and is a frequent speaker at national conferences, and local user groups. Scott is a Microsoft MVP and has authored books on several Microsoft technologies, including ASP.NET, C#, and Windows Workflow.

More from the author
More courses by Scott Allen
Section Introduction Transcripts
Section Introduction Transcripts

Introduction to Bootstrap
Scott Allen: Hi, this is Scott Allen, and this is an introduction to Bootstrap. This is the first module in a course that will show you everything you need to know to start working with Bootstrap. In this first module we'll cover some of the basics. Bootstrap is a popular and open source front end toolkit for building web applications, meaning Bootstrap is free to download, and it helps you build a user interface with HTML, CSS and JavaScript. Right now you're looking at a sampling of websites that use Bootstrap. Bootstrap has become popular with both web designers and web developers because it's flexible and easy to work with. With Bootstrap you can get a good looking website up and running quickly. It provides all the foundational pieces that you need for layouts, buttons, forms, menus, widgets like picture carousels, but also labels, badges, typography and more. It's all HTML, CSS, and JavaScript, all open standards. So you can use Bootstrap with any editor, any server technology, any platform from asp. net MVC to Ruby on Rails for PHP. All you need to know to start using Bootstrap is a little bit of HTML, a little bit of CSS and, of course, you need to know a little bit about how Bootstrap itself works. This course is designed to show you how Bootstrap works.

Layout with Bootstrap
( Silence ) Scott Allen: Hi. This is Scott Allen. And this module will look at lay-out with Bootstrap. We'll see how it achieved designs like single-column layout. The two-column layout. And how to use fluid layouts. But were going to start by looking at some of the theory behind Bootstrap's layout system. Because understanding why Bootstrap layout works the way it does will go a long way towards understanding how to use Bootstrap. But not only Bootstrap a little bit of theory will help you understand other CSS frameworks and web design in general.

Everyday Bootstrap
Scott: Hi. This is Scott Allen, and this module is going to look at the features of Bootstrap that you'll use every day. These are the features that style buttons and forms and take care of typography and tables. This module's going to move quickly to show you all the styles and options that are available, so let's get started.

Bootstrap Components
Scott Allen: Hi, this is Scott Allen. In this module we'll look at Bootstrap components. Components are those pieces of the UI that are often interactive. They're things the user will click on to get somewhere or perform an action. We'll be looking at navigation bars, dropdown menus, tabs, pills and alerts; and more. We'll start with the basic dropdown menu. (Silence)

Bootstrap and JavaScript
Scott Allen: Hi, this is Scott Allen, and in this module we will look at using Bootstrap components to make heavy use of JavaScript. We'll build Modal dialogues, picture Carousels, work with progress bars, and to make the module sound a bit mysterious we'll also work with something known as the Scrollspy. Along the way, we'll be writing some JavaScript, and that makes Bootstrap even more fun and interesting. Yes, we're back to talking about buttons one more time.