You've already learned about how Pattern Libraries save lots of time by packaging re-usable CSS widgets and how Style Guides can help keep your code well organized and professional. In the prep work, you learned about how using graphic design grid systems can make laying out websites much simpler.
Twitter's Bootstrap framework takes all those things and combines them into one awesome package that will get you building professional-quality websites fast. It combines good-looking styling and responsiveness with markup that generally encourages best-practices.
It's hard to measure how much time you can save by kick-starting the front end for your projects with Bootstrap. In fact, Bootstrap is so popular that you'll start seeing it everywhere on the web once you become familiar with its patterns.
In this lesson, you'll learn all about the Bootstrap framework and how to enable your projects to use it. In the next lesson, we'll dig into how you can actually use it to help build webpages. Pay attention and try to really understand what's going on -- you're going to use Bootstrap extensively during upcoming units.
Like many existing web development frameworks, the engineers at Twitter created it as an internal tool and then decided to open-source it for everyone else to use. In this case, the engineers were re-using widgets and styles so much that they codified them into a formal framework.
We're now on the third iteration of Bootstrap (version 4 coming really soon) and it's taken on a life of its own. Their project documentation is superb and it's incredibly easy to learn how to use Bootstrap.
You don't even need to memorize much -- their website is so comprehensive and good that you can just browse through it to find whatever specific widget you're trying to set up, whether that's a blue medium-sized button...
... or a good-looking submission form...
... or different stylings for images:
It's all there, and now you know where to find it!
If you want to get Bootstrap up and running on one of your projects, you have 2 good options:
You can download the source code from their website. Choose the leftmost option ("Bootsrap" and NOT "Source code" or "Sass"). It will give you a zip archive with the necessary files. Just include those CSS and JS files in your project as you normally would.
If you're insanely curious, you can check out the Sass version of their source code to see how it's put together.
If you don't feel like downloading Bootstrap, they've generously offered to serve it to you directly from their CDN servers for free. Just include the following two links in your
<head> tag and, PRESTO! You've got Bootstrap.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<head> tag to grab jQuery from Google's servers:
<head> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> ... </head>
Put jQuery ABOVE Bootstrap in your file!
You can also easily download jQuery from their website and include it directly in your project like any other CSS file if you won't have access to an internet connection while developing.
If you choose to actually download the bootstrap .zip archive, this is what it contains:
bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff
There you go -- a bunch of CSS, JS and font files, most of which you can safely ignore. The only two that you will care about at first are
.min files are just minified, meaning their whitespace has been removed and names have been shortened in order to reduce file size when sending to a browser. These minified files are the ones you'd typically serve with your projects (especially from a production environment) but they aren't human readable. When you're developing locally, help your sanity and just use the normal versions.
bootstrap-theme CSS file just adds some additional styles, for instance, to make the existing buttons look more 3-d with gradients. Ignore this for now.
Check out the Getting Started section for complete documentation on how to get started with the framework.
The important bits of code from this lesson
# Importing jQuery + Bootstrap files from the CDN <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
Hopefully, this brief introduction whetted your appetite to start working with Bootstrap. In the next lesson, we'll dig into the nuts and bolts of how it's put together and how you can use it most effectively in your own projects.