ASP.NET

How to Create Responsive Website Using ASP.Net

Introduction
 
This article will help you to create a responsive website using ASP.NET. Learn more about responsive from What is Foundation?.
 
Step 1 

Download the responsive CSS and JavaScript files from Download Foundation 5 (you can customize your download).

 

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="Foundation/js/foundation.min.js" type="text/javascript"></script>  
  4.     <link href="Foundation/css/foundation.min.css" rel="stylesheet" type="text/css" />  
  5. </head>  
Step 3 
 
Foundation zurb provides so many functions in responsive. You can learn about it from my previous link :(http://foundation.zurb.com/docs/index.html) .
 
Now I will explain how to create a simple signup form with a responsive page. Once you add foundation.min.js and foundation.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="large-4 columns">...</div>  
  3.   <div class="large-4 columns">...</div>  
  4.   <div class="large-4 columns">...</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="Foundation/js/foundation.min.js" type="text/javascript"></script>  
  9.     <link href="Foundation/css/foundation.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="large-12 columns">  
  17.      <br /><br />  
  18.     <div class="row">  
  19.    <div class="large-12 columns text-center">  
  20.    <b>Signup Form</b>  
  21.    </div>  
  22.     </div><br /><br />  
  23.      <div class="row">  
  24.    <div class="large-12 columns">  
  25.    Name:  
  26.    </div>  
  27.     </div>  
  28.      <div class="row">  
  29.    <div class="large-12 columns">  
  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="large-12 columns">  
  36.    Email id:  
  37.    </div>  
  38.     </div>  
  39.      <div class="row">  
  40.    <div class="large-12 columns">  
  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="large-12 columns">  
  47.    Phone no:  
  48.    </div>  
  49.     </div>  
  50.      <div class="row">  
  51.    <div class="large-12 columns">  
  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="large-12 columns">  
  58.    Address:  
  59.    </div>  
  60.     </div>  
  61.      <div class="row">  
  62.    <div class="large-12 columns">  
  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="large-6 columns">  
  69.    <asp:Button ID="btnSubmit" runat="server" Text="Submit"></asp:Button>  
  70.    </div>  
  71.    <div class="large-6 columns">  
  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>  
Output (on large screens) 
 
 
 
Output (on small screens)  
 
 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs