Basic Bootstrap – Getting Started

The Bootstrap framework helps to quickly develop clean and responsive websites. The site getbootstrap.com provides a free download of the latest version of Bootstrap. The components page provides great documentation.

Basic Bootstrap
These folders should be present after extracting the basic bootstrap zip directory.

The main file in the css folder is bootstrap.css. This is the main Bootstrap library.

the fonts folder has a set of fonts that contain some of the icons that come with Bootstrap.

The js folder contains three JavaScript libraries which allow Bootstrap to function. The bootstrap.min.js file sits on top of the jquery.min.js file to add extra functionality. The bootstrap.min.js file is a minimized version of the bootstrap.js file. Minification of files is best practice, because it can decrease page load time.

Below is suggested code or an index.html file setup to use Bootstrap.


<!DOCTYPE html>
<html lang="en">

<head>

<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<!– The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags –>

<title>Always Title Your Page for Best SEO</title><!– Bootstrap –>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
<link href=”css/bootstrap-theme.min.css” rel=”stylesheet”>

<link href=”css/styles.css” rel=”stylesheet”>

<!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –>
<!– WARNING: Respond.js doesn’t work if you view the page via file:// –>
<!–[if lt IE 9]>
<script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js”></script>
<script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js”></script>
<![endif]–>

</head>

<body>

<header>    </header>

<footer>    </footer>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>

<!– Include all compiled plugins (below), or include individual files as needed –>
<script src=”js/bootstrap.min.js”></script>

</body>

</html>

 

Leave a Reply

Your email address will not be published. Required fields are marked *