Bootstrap Getting Started
Creating Your First Web Page with Bootstrap
So far you have understood the structure and the purposes of Bootstrap files, now it's time to put Bootstrap into real use. In this section, we'll create a basic Bootstrap template that includes everything we mentioned in the file structure.
Let's walk through the following steps. At the end of the tutorial, you will have made an HTML file that displays "Hello world" message in your web browser.
Step 1: Creating a Basic HTML file
Open up your favorite code editor and create a new HTML file. Start with an empty window and type the following code and save it as "basic.html" on your desktop.
Example »
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic HTML File</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Step 2: Making this HTML File a Bootstrap Template
To make this HTML file a Bootstrap template, just include the appropriate Bootstrap CSS and JS files. You should include JavaScript files at the bottom of the page — before closing of the <body> tag (i.e. </body>) to improve the performance of your web pages.
Example »
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<h1>Hello, world!</h1>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Step 3: Saving the file
Now save the file on your desktop as "bootstrap-template.html".
Example »
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Creating Your First Web Page with Bootstrap
So far you have understood the structure and the purposes of Bootstrap files, now it's time to put Bootstrap into real use. In this section, we'll create a basic Bootstrap template that includes everything we mentioned in the file structure.
Let's walk through the following steps. At the end of the tutorial, you will have made an HTML file that displays "Hello world" message in your web browser.
Step 1: Creating a Basic HTML file
Open up your favorite code editor and create a new HTML file. Start with an empty window and type the following code and save it as "basic.html" on your desktop.
Example »
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic HTML File</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Step 2: Making this HTML File a Bootstrap Template
To make this HTML file a Bootstrap template, just include the appropriate Bootstrap CSS and JS files. You should include JavaScript files at the bottom of the page — before closing of the <body> tag (i.e. </body>) to improve the performance of your web pages.
Example »
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<h1>Hello, world!</h1>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Step 3: Saving the file
Now save the file on your desktop as "bootstrap-template.html".
Example »
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
No comments:
Post a Comment