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

یکشنبه 13 اردیبهشت 1394

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

چگونه با استفاده از 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>

آموزش بوت استرپ

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید