Bootstrap Tutorial

by shashank KUncategorized
Post Views: 3

INTRODUCTION:-

Bootstrap is framework of HTML,CSS and JavaScript for developing responsive websites. It is free to use and download. It is front end framework which makes web development faster and easier. It have many HTML and CSS based templates for  forms,buttons,tables etc.

HISTORY:-

Bootstrap was developed by Mark Otto and Jacob Thorton. It was first released as an open source in August 2011.

ADVANTAGES:-

  1. Bootstrap is very easy to use.
  2. Anyone who have basic knowledge of HTML and CSS can use it very easily.
  3. It help users to develop responsive websites very easily.
  4. Bootstrap is compatible on most of the browser.

BOOTSTRAP CONTAINER:-

The container class is used to create boxed content.

Example:-

  1.         <html>  
  2.  <body>  
  3.   <div class=“container”>  
  4.    <div class=“row”>  
  5.      <div class=“col-md-xx”></div>  
  6.        …  
  7.    </div>  
  8.    <div class=“row”>  
  9.      <div class=“col-md-xx”></div>  
  10.        …  
  11.    </div>  
  12.   </div>  
  13.  </body>  
  14. </html>  

BOOTSTRAP JUMBTRON:-

The jumptron is used to specify big box for getting extra attention. It is a box with rounded corner. It is used in <div>.

Example:-

  1. <!DOCTYPE html>  
  2. <html lang=“en”>  
  3. <head>  
  4.   <title>Bootstrap Example</title>  
  5.   <meta charset=“utf-8”>  
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>  
  7.   <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>  
  8. </head>  
  9. <body>  
  10.   
  11. <div class=“container”>  
  12.   <div class=“jumbotron”>  
  13.     <h1>This is Jumbotron inside container!</h1>        
  14.     <p>Jumbotron specifies a big box for getting extra attention to some special content or information.</p>  
  15.   </div>  
  16.   <p>This is some text.</p>        
  17.   <p>This is another text.</p>        
  18. </div>  
  19.   
  20.   <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>  
  21.   <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>  
  22. </body>  
  23. </html>

BOOTSTRAP BUTTONS:-

There are 7 buttons present in boot strap:

  1. .btn-primary
  2. .btn-default
  3. .btn-info
  4. .btn-danger
  5. .btn-link
  6. .btn-warning
  7. .success  

Example:-

  1. <!DOCTYPE html>  
  2. <html lang=“en”>  
  3.   <head>  
  4.      <title>Job</title>  
  5.      <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”/>  
  6.   </head>  
  7.   <body>  
  8.     <h1>Button Example!</h1>  
  9.   
  10. <button class=“btn btn-default”>default</button>  
  11. <button class=“btn btn-primary”>primary</button>  
  12. <button class=“btn btn-danger”>danger</button>  
  13. <button class=“btn btn-success”>success</button>  
  14. <button class=“btn btn-info”>info</button>  
  15. <button class=“btn btn-warning”>warning</button>  
  16. <button class=“btn btn-link”>Link</button>  
  17.   
  18. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
  19.   <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>  
  20.   </body>  
  21. </html>  

Classes for button size:-

  1. .btn-lg
  2. .btn-md
  3. .btn-sm
  4. .btn-xs

BOOTSTRAP TABLES:-

We can use bootstrap to design different types or table.

Example:-

  1. <!DOCTYPE html>  
  2. <html lang=“en”>  
  3.   <head>  
  4.      <title>Job</title>  
  5.      <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”/>  
  6.   </head>  
  7.   <body>  
  8.   
  9. <div class=“container”>  
  10.   <h1>Basic Table Example</h1>  
  11.   
  12. <table class=“table”>  
  13.   <tr><th>Id</th><th>Name</th><th>Age</th></tr>  
  14.   <tr><td>101</td><td>Rahul</td><td>23</td></tr>  
  15.   <tr><td>102</td><td>Umesh</td><td>22</td></tr>  
  16.   <tr><td>103</td><td>Max</td><td>29</td></tr>  
  17.   <tr><td>104</td><td>Ajeet</td><td>21</td></tr>  
  18. </table>  
  19.   
  20. </div>  
  21.   
  22. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>  
  23.   <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>  
  24.   </body>  
  25. </html>  
  • <tr> is used for table row.
  • <td> is used for table data.
  • <th> is used for table heading.

BOOTSTRAP FORMS:-

There are three types of forms in bootstrap.

  1. Horizontal form
  2. Vertical form
  3. Inline form

Example 1( vertical form):-

  1. <!DOCTYPE html>  
  2. <html lang=“en”>  
  3.   <head>  
  4.      <title>Bootstrap example</title>  
  5.      <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”/>  
  6.   </head>  
  7.   <body>  
  8.   
  9. <div class=“container”>  
  10.   <h1>Vertical Form Example</h1>  
  11.   
  12. <form style=“width:300px”>  
  13.   <div class=“form-group”>  
  14.     <label for=“exampleInputEmail1”>Email address</label>  
  15.     <input type=“email” class=“form-control” id=“exampleInputEmail1” placeholder=“Email”>  
  16.   </div>  
  17.   <div class=“form-group”>  
  18.     <label for=“exampleInputPassword1”>Password</label>  
  19.     <input type=“password” class=“form-control” id=“exampleInputPassword1” placeholder=“Password”>  
  20.   </div>  
  21.     
  22.   <button type=“submit” class=“btn btn-default”>Login</button>  
  23. </form>  
  24.   
  25. </div>  
  26.   
  27. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>  
  28.   <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>  
  29.   </body>  
  30. </html>  

Horizontal form:-

  1. <!DOCTYPE html>  
  2. <html lang=“en”>  
  3. <head>  
  4.   <title>Bootstrap Example</title>  
  5.   <meta charset=“utf-8”>  
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>  
  7.   <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>  
  8.     
  9. </head>  
  10. <body>  
  11.   
  12. <div class=“container”>  
  13.   <h2>Horizontal form Example</h2>  
  14.   <form class=“form-horizontal” role=“form”>  
  15.     <form style=“width:300px”>  
  16.   <div class=“form-group”>  
  17.       <label class=“control-label col-sm-2” for=“email”>Email:</label>  
  18.       <div class=“col-sm-10”>  
  19.         <input type=“email” class=“form-control” id=“email” placeholder=“Enter email”>  
  20.       </div>  
  21.     </div>  
  22.     <div class=“form-group”>  
  23.       <label class=“control-label col-sm-2” for=“pwd”>Password:</label>  
  24.       <div class=“col-sm-10”>            
  25.         <input type=“password” class=“form-control” id=“pwd” placeholder=“Enter password”>  
  26.       </div>  
  27.     </div>  
  28.     
  29.   <div class=“form-group”>          
  30.       <div class=“col-sm-offset-2 col-sm-10”>  
  31.         <button type=“submit” class=“btn btn-default”>Submit</button>  
  32.       </div>  
  33.     </div>  
  34.   </form>  
  35. </div>  
  36. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>  
  37. <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>  
  38.   
  39. </body>  
  40. </html>  

Inline form:-

  1. <!DOCTYPE html>  
  2. <html lang=“en”>  
  3. <head>  
  4.   <title>Bootstrap Example</title>  
  5.   <meta charset=“utf-8”>  
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>  
  7.   <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>  
  8.     
  9. </head>  
  10. <body>  
  11.   
  12. <div class=“container”>  
  13.   <h2>Inline form Example</h2>  
  14.   <form class=“form-inline” role=“form”>  
  15.     <form style=“width:300px”>  
  16.   <div class=“form-group”>  
  17.     <label for=“exampleInputEmail1”>Email address</label>  
  18.     <input type=“email” class=“form-control” id=“exampleInputEmail1” placeholder=“Email”>  
  19.   </div>  
  20.   <div class=“form-group”>  
  21.     <label for=“exampleInputPassword1”>Password</label>  
  22.     <input type=“password” class=“form-control” id=“exampleInputPassword1” placeholder=“Password”>  
  23.   </div>  
  24.     
  25.   <button type=“submit” class=“btn btn-default”>Login</button>  
  26. </form>  
  27.   
  28. </div>  
  29. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>  
  30.   <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>  
  31.   
  32. </body>  
  33. </html>  
shashank K
Latest posts by shashank K (see all)
0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x