Bootstrap comes with three different libraries providing you the styles and functionality. You can use them independently or all together. To get started the following example shows you, how to include them into a website.
<!DOCTYPE html> <html> <body> <!-- your content goes here --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
Lets examine what these three libraries do.
There are many interesting things this stylesheet provides like a cool gridsystem, forms, tabs, navigations, jumbotrons, advanced thumbnails, alerts, cool styles for all inputs groups and many many more!
The bootstrap theme defines i.e.e what colors and fonts your page will have. You can find many free themes in the internet. Just google for “bootstrap themes”. Beside free themes you can find paid themes as well.
A more interesting example
Ok, it’s time to show you something more interesting, so that you know why you really should learn bootstrap! It’s gonna show you a very simple form, which looks great just out of the box.
<!-- Just enjoy the example. We'll cover forms later! -->
Learning Bootstrap is alot about mastering the different css-classes it provides. At the beginning, this can be somewhat overwhelming but it’s absolutly worth it! You’ll therefore get fast, clean structured and responsive websites in no time.
The next chapter is about the powerful Bootstrap grid system, which makes your life easyer in creating modern looking layouts!