How is the Bootstrap Framework used?

Hello,

In this post, I will try to explain simply how to integrate the boostrap framework into our site.

Thanks to this quite easy structure, you can create mobile-friendly and fast web pages.

1. First Stage (let’s create our HTML page)

First, let’s create our standard .html page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta charset="UTF-8">
<title>bootstrap Entegrasyonu</title>


</head>
<body>

<div>bootstrap Entegrasyonu</div>
<input type="text" id="t1">

</body>
</html>

2. Second stage, let’s download the necessary files and copy them to the directory where our site is located.

Now we have a site that isn’t mobile-friendly; now let’s integrate the Bootstrap Framework into this page.

First of all

http://getbootstrap.com/

we need to download the necessary files from the address.

After downloading the compressed files, we copy the 3 folders inside the main folder to the directory where our web page is located.

3. Stage: let’s integrate bootstrap into our page.

And finally, we place the following code between the <head></head> ve <body> </body> tags.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta charset="UTF-8">
<title>bootstrap Entegrasyonu</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

</head>
<body>

<div>bootstrap Entegrasyonu</div>
<input type="text" id="t1">

<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

After this stage, Bootstrap has now been integrated into our page.

4. Stage: let’s test using the objects.

Let’s test by adding a “well” area at the top, creating an alert object, and giving the inputbox a nice appearance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta charset="UTF-8">
<title>bootstrap Entegrasyonu</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

</head>
<body>

  <div class="well">
  DENEME
  </div>
  
  <div class="alert alert-success" role="alert">bootstrap Entegrasyonu</div>

  <input type="text" id="t1" class="form-control">
  
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

Output:

Comparison

Before

After

In the coming days, I will also try to explain the properties of the objects and the grid structure.

Thank you in advance for your comments and for your shares with source attribution.