خانه تالار گفتگو دانلود خبرنامه سفارش سایت درباره ما ارتباط با ما حمایت از ما تبلیغات

آموزش Bootstrap - طراحی وب واکنش گرا - طراحی اولین صفحه با Bootstrap

طراحی اولین صفحه وب با Bootstrap

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

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

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

                                    

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

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

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

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

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

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

1 . طراحی با استفاده از کلاس container. :
کد مثال عملی
کد
                                    
خروجی
2 . طراحی با استفاده از کلاس container-fluid. :
کد مثال عملی
کد
                                    
خروجی