چگونه با استفاده از Bootstrap در Asp.Net وب سایت واکنش گرا بسازیم

در این مقاله میخواهیم با استفاده از Bootstrap در Asp.Net وب سایت واکنش گرا بسازیم

ابتدا در پنجره Solution Explorer روی نام پروژه راست کلیک کرده و گزینه Manage Nuget packager را انتخاب کنید و گزینه bootstrap را جستجو کرده و روی پروژه خود نصب کنید.

حال در تگ هد صفحه index.aspx آدرس دهی های زیر را انجام دهید:

<head runat="server">      
    <title></title>      
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>    
    <link href="css/bootstrap.min.css" rel="stylesheet" />    
</head>

سپس از تگ های زیر برای ساخت یک خط جدید استفاده میکنیم:

 <div class="row">  
    <div class="col-lg-12">  
        My design  
    </div>  
</div>

حال توسط تگ های زیر یک صفحه لاگین ریسپانسیو میسازیم:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="Responsive_Website.index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <body dir="rtl">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3">
                        &nbsp;
                    </div>
                     <div class="col-lg-6">
                           <form class="form-signin">
                    <h2 class="form-signin-heading">لطفا وارد شوید</h2>
                    <label for="inputEmail" class="sr-only">آدرس ایمیل</label>
                    <input type="email" id="inputEmail" class="form-control" placeholder="آدرس ایمیل" required autofocus>
                    <label for="inputPassword" class="sr-only">کلمه عبور</label>
                    <input type="password" id="inputPassword" class="form-control" placeholder="کلمه عبور" required><div class="checkbox">
                        <label>
                            <input type="checkbox" value="remember-me">
                            به خاطر بسپار </label>
                    </div>
                    <button class="btn btn-lg btn-primary btn-block" type="submit">ورود</button></form>
                         </div>
                     <div class="col-lg-3">
                         </div>
                </div>
              
            </div>
    </form>
</body>
</html>