Tuesday 22 March 2016

How to create responsive website using bootstrap with asp.net

Introduction

This article will help you to create a responsive website using ASP.NET. 
Step 1 
Download the responsive CSS and JavaScript files from http://getbootstrap.com/

Step 2 

Open your Visual Studio then add your downloaded file into your project then add a default.aspx page and call your necessary files within the head tag from that downloaded folder. 

  1. <head runat="server">  
  2.     <title></title>  
  3.     <script src="js/bootstrap.min.js" type="text/javascript"></script>  
  4.     <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />  
  5. </head>  
Step 3 
Now I will explain how to create a simple signup form with a responsive page. Once you add bootstrap.min.js and bootstrap.min.css you can get very many classes.
 
Before starting a responsive design you must specify <div class="row"></div>.  Here the class row is a new line (for example: <tr></tr> in the table tag).  
  1. <div class="row">  
  2. </div>  
Then you need to assign your space for specific content through the class large; class large-12 is 100% width. We can share 100% width to every object, for example: 
  1. <div class="row">  
  2.   <div class="col-md-12">...</div>  
  3.   <div class="col-md-12">...</div>  
  4.   <div class="col-md-12">...</div>  
  5. </div>
 Full Example 
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="Responsive_Site.Index" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <script src="js/bootstrap.min.js" type="text/javascript"></script>  
  9.     <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />  
  10. </head>  
  11.   
  12. <body>  
  13.     <form id="form1" runat="server">  
  14.     <br /><br />  
  15.     <div class="row" style="border:2px solid blue">  
  16.     <div class="col-md-12">  
  17.      <br /><br />  
  18.     <div class="row">  
  19.    <div class="col-md-12 text-center">  
  20.    <b>Signup Form</b>  
  21.    </div>  
  22.     </div><br /><br />  
  23.      <div class="row">  
  24.    <div class="col-md-12">  
  25.    Name:  
  26.    </div>  
  27.     </div>  
  28.      <div class="row">  
  29.    <div class="col-md-12">  
  30.   <asp:TextBox ID="txtUName" runat="server" placeholder="User name"></asp:TextBox>  
  31.    </div>  
  32.     </div>  
  33.     <br /><br />  
  34.      <div class="row">  
  35.    <div class="col-md-12">  
  36.    Email id:  
  37.    </div>  
  38.     </div>  
  39.      <div class="row">  
  40.    <div class="col-md-12">  
  41.   <asp:TextBox ID="txtEmail" runat="server" placeholder="Email id"></asp:TextBox>  
  42.    </div>  
  43.     </div>  
  44.       <br /><br />  
  45.      <div class="row">  
  46.    <div class="col-md-12">  
  47.    Phone no:  
  48.    </div>  
  49.     </div>  
  50.      <div class="row">  
  51.    <div class="col-md-12">  
  52.   <asp:TextBox ID="txtPhone" runat="server" placeholder="Phone number"></asp:TextBox>  
  53.    </div>  
  54.     </div>  
  55.       <br /><br />  
  56.      <div class="row">  
  57.    <div class="col-md-12">  
  58.    Address:  
  59.    </div>  
  60.     </div>  
  61.      <div class="row">  
  62.    <div class="col-md-12">  
  63.   <asp:TextBox ID="txtAddress" runat="server" placeholder="Address" TextMode="MultiLine"></asp:TextBox>  
  64.    </div>  
  65.     </div>  
  66.     <br /><br />  
  67.      <div class="row">  
  68.    <div class="col-md-6">  
  69.    <asp:Button ID="btnSubmit" runat="server" Text="Submit"></asp:Button>  
  70.    </div>  
  71.    <div class="col-md-6">  
  72.   <asp:Button ID="btnCancel" runat="server" Text="Cancel"></asp:Button>  
  73.    </div>  
  74.     </div>  
  75.     </div>   
  76.     </div>  
  77.     </form>  
  78. </body>  
  79. </html>  
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)