Class 14 Prep
Bootstrap
Bootstrap is a front-end web framework built out of HTML, CSS and Javascript that makes building attractive, polished, and highly functional sites straightforward.
You are already familiar with HTML and CSS, but might not know what Javascript is. Javascript, which has no relation to the programming language Java, is a computer programming language used to make web pages interactive and that runs on the user's browser. We won't go into detail about Javascript in this class, but it is occasionaly mentioned in the resources below. In the context of Bootstrap, it is Javascript (and particularly the Javascript library jQuery) that provides the functionality for many of Bootstrap's plugins.
Bootstrap is widely used to make responsive websites. A responsive site is one that adapts to different screen sizes, such as desktop, tablet, and mobile.
In this lesson, you'll learn a bit about Bootstrap. We'll use this knowledge in class to incorporate Bootstrap into Flicklist.
| Task | Resource Type | Link | Instructions |
|---|---|---|---|
| Read | Article | What is Bootstrap? A Beginner's Guide | Read this nice introduction to Boostrap |
| Do | Interactive Lesson | Bootstrap Tutorial (w3schools) | Work through all the lessons under "Bootstrap Tutorial" and the lessons under "Bootstrap Grids" to learn how to use Bootstrap within a website. |
| Read | Tutorial | Tutorial Republic | This is optional, but if you want another resource that explains Bootstrap usage in more detail, you can check out this tutorial. |
| Read | Reference | Bootstrap | Also an optional resource, this is where you can read the official documentation for Bootstrap. |
An easy way to begin using Bootstrap in your own applications is to use a Bootstrap theme. You can get these for free at Bootswatch. For details on how to use each theme, just click on the "Preview" button for the theme you like.
Then click on the component you want to know how to use or what it will look like.
For instance if we click on Navbar in the menu above, this is what we'll see:
And if we click on the double arrows (circled red in the above screenshot), we'll see the source code for how to use it:
The best way to learn Bootstrap is to play around with adding different components to the web pages you are building, and see what they look like and how adding these classes affects the presentation. Now go have fun with Bootstrap!