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