آموزش برنامه نویسی ، پایگاه داده sql server
آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server


آموزشگاه برنامه نویسی مجتمع فنی تهران میرداماد : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

آموزش Bootstrap > مقدمه آموزش Bootstrap
Bootstrap طراحی اولین صفحه وب با

طراحی اولین صفحه وب با اسنفاده از Bootstrap :

در این درس به صورت خلاصه و قدم به قدم به آموزش طراحی یک صفحه ساده با Bootstrap خواهیم پرداخت . برای این منظور مراحل زیر را انجام دهید :

1 . تگ <DOCTYPE!> را برای HTML 5 وارد کنید :

Bootstrap از المنت ها و خواص HTML و  CSS برای طراحی صفحات وب استفاده می کند که نیاز به تگ <DOCTYPE!> در زبان HTML 5 دارد .
در ابتدای تمامی صفحات بایستی تگ <DOCTYPE!>  و خواصی که زبان صفحه و نحوه کدینگ کاراکترهای آن را مشخص می کنند ، را همانند کد زیر تعیین نمایید :

کد <!DOCTYPE html>
  <html lang="en">
        
<head>
             
<meta charset="utf-Bootstrap">
         </head>

  </html>

2 . Bootstrap بیشتر برای نمایش در صفحات موبایل طراحی شده است :

Bootstrap 3 به گونه ای طراحی شده تا یک نمایش واکنش گرا را در اکثر صفحات نمایش ، از جمله موبایل ها و تبلت داشته باشد .
برای اطمینان از رندر صحیح و Zoom مناسب آن ، حتما تگ <meta> را به صورت زیر در بخش <head> صفحه وارد کنید :

کد <meta   name =" viewport "   content = " width = device-width , initial-scale = 1 "  >

در تگ فوق دو خاصیت اصلی وجود دارد :

  • width=device-width : این خاصیت تعیین می کند تا عرض صفحه مطابق و متناظر با صفحه نمایش دهنده دستگاه و به صورت واکنش گرا باشد . یعنی با تغییر عرض آن ، کوچک یا بزرگ شود .
  • initial-scale = 1 : این خاصیت مقدار پبیش فرض Zoom صفحه را بر اندازه واقعی یعنی 1 تعیین می کند ( در واقع بدون Zoom ) .

3 . تعیین در بر گیرندها ( Containers ) :

Bootstrap شامل عنصر در برگیرنده اصلی ( Container ) است که محتویات کل صفحه را در خود جای می دهد . در Bootstrap دو نوع Container به شرح زیر داریم که می توانید هر یک را انتخاب نمایید :

  1. کلاس container. : در این حالت عرض صفحه بر یک مبنای مشخص و معمولا با مقداری فضای خالی در اطراف آن تعیین می شود ( کل عرض صفحه را در بر نمی گیرد ) .
  2. کلاس container-fluid. : در این حالت عرض صفحه معادل کل عرض صفحه نمایش دهنده آن شده و هیچ فضای خالی در اطراف باقی نمی ماند.

در ادامه یک صفحه را با دو نوع کلاس متفاوت Bootstrap طراحی کرده ایم :

مثال های عملی طراحی یک صفحه با Bootstrap :

1 . طراحی با استفاده از کلاس container. :

کد <!DOCTYPE html>
 <html lang="en">
     <head>
       <title>Bootstrap Example</title>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
         <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

      </head>
      <body>
         <div class="container">
            <h1>My First Bootstrap Page</h1>
            <p>This is some text.</p>
          </div>

      </body>
 </html>
خروجی مشاهده خروجی مثال

2 . طراحی با استفاده از کلاس container-fluid. :

کد <!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
       <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    </head>
    <body>
      <div class="container-fluid">
        <h1>My First Bootstrap Page</h1>
        <p>This is some text.</p>
      </div>

    </body>
  </html>
خروجی مشاهده خروجی مثال


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1 حمایت نمایید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟      
حمایت از سایت Developer1