Table of Contents
How To Get Started With Bootstrap
<!– Latest compiled and minified CSS –>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” >
<!– Optional theme –>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css”>
<!– Latest compiled and minified JavaScript –>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
What’s Included With Bootstrap
Once you have downloaded the bootstrap compressed folder, you will get the following file structure when you extract the folder.
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
How To Create Basic HTML Template With 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″>
<title>Basic HTML Template With Bootstrap</title>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<h1>This example shows the basic codes for creating basic HTML template</h1>
<!– 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>
Where:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
represents HTML5 document type since bootstrap uses HTML elements with CSS properties.
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
You may use to set the page width to the device width and initial zoom level to “1” when the page is first loaded by the browser.
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
loads bootstrap core CSS document in the <head> section of your <html> document.
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”>
loads jQuery via Google CDN before closing the <body> tag of your <html> document.
<script src=”js/bootstrap.min.js”></script>
loads bootstrap core JavaScript document in the <body> section of your <html> document.
Note:
If you want to use bootstrap CDN can replace the above codes to CDN codes give above.
Pro Tip: If you want to get some practical experience on how to get started with Bootstrap follow this interactive Bootstrap tutorial.
