Brief Introduction:
Bootstrap is a front-end framework using HTML, CSS and JavaScript to build menus, navigations, layouts, forms, tables, and etc. What is special about Bootstrap is that mobile-first, and responsive design is it's default behavior. Okay, hold on, let me put my professor's glasses on!
Okay class here goes:
Mobile-First Design: You design your site for mobile devices first so the desktop version is second class citizen.
Responsive Design: A design that makes your site look good on all screen sizes, and does not need to degrade gracefully. Meaning you can resize, stretch, maximize, do yoga with your site and it will still look good. Well up to a certain threshold.
So to setup Bootstrap, you will do the following:
1. Create an HTML5 page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
2. In the element add the following four lines
- <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
This the jQuery library that Bootstrap needs - <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">
his is the Bootstrap JavaScript library - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
This is the Bootstrap stylesheet - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
This is the Bootstrap theme stylesheet, which is optional
That's all there is to it, now you should be all set to go with Bootstrap. There's one thing that could throw you off when setting up Bootstrap. It might require you to have a certain version of jQuery to work. So you have to experiment a little bit with the jQuery version to make it work. I found that the jQuery version that I linked to works with the latest version of Bootstrap. But that might change in the future as Bootstrap releases new versions.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<title></title>
</head>
<body>
</body>
</html>
No comments:
Post a Comment