طراحی سایت ریسپانسیو با بوت استرپ

امتیاز کاربران بوت استرپ یکی از کتابخانه های و فریم ورک های HTML ، CSS و جاوا اسکریپت برای طراحی سایت های موبایلی و ریسپانسیو می باشد که توسط این فریم ورک به راحتی می توانید طراحی سایت ریسپانسیو خود را انجام دهید.

طراحی سایت با بوت استرپ بسیار ساده است و کافی است نحوه کد زنی در آن را یاد بگیرید.

بوت استرپ کلاس های مشخصی برای پیاده سازی اجزای صفحه دارد که کار شما را در راه اندازی نسخه موبایلی وب سایت ساده می سازد.

در این مقاله به شما نحوه طراحی سایت با بوت استرپ را آموزش خواهم داد که البته برای انجام لازم است دانش کد زنی HTML و CSS را داشته باشید.

در مرحله اول لازم است فایل های مربوط به Bootstrap را از وب سایت اصلی دانلود نمایید که برای انجام این کار لازم است به وب سایت http://getbootstrap.

com مراجعه نموده و بر روی کلید Download Bootstrap کلیک نموده و دوباره بر روی Download Bootstrap کلیک نمایید.

فایل فشرده ای در اختیار شما قرار داده می شود که شامل سه فلدر css ، fonts و js می باشد.

این فلدرها را در ریشه اصلی وب سایت و یا قالب ساخته شده خود کپی نمایید.

در صورتی که در حال طراحی قالب در جوملا و یا وردپرس هستید می بایست این فلدرها را در فلدر اصلی قالب ساخته شده خود بارگذاری نمایید.

برای شروع می بایست این سه فایل را در صفحه وب سایت خود اضافه نمایید: <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.

bootstrapcdn.

com/bootstrap/3.

3.

5/css/bootstrap.

min.

css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.

bootstrapcdn.

com/bootstrap/3.

3.

5/css/bootstrap-theme.

min.

css"> <script src="https://ajax.

googleapis.

com/ajax/libs/jquery/1.

11.

3/jquery.

min.

js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.

bootstrapcdn.

com/bootstrap/3.

3.

5/js/bootstrap.

min.

js"></script> آدرس های موجود در بخش بالا (href و src) را می بایست با آدرس های فایل های خود تغییر دهید.

البته فراموش ننمایید که اضافه نمودن کتابخانه jquery برای اجرای Bootstrap لازم و ضروری می باشد.

هم اکنون قالب شما آماده اجرای کدهای بوت استرپ می باشد و می توانید طراحی سایت خود را آغاز نمایید.

برای آنکه در نسخه موبایلی صفحه وب سایت حالت بزرگنمایی و کوچک نمایید پیدا نکند می بایست که زیر را در بخش head قالب خود کپی نمایید.

کد زنی html در بوت استرپ را می بایست با آداب خاصی انجام دهید که در بخش زیر دستورالعمل های برنامه نویسی آموزش داده خواهد شد.

در صورتی که قصد راه اندازی وب سایت تمام صفحه را دارید می بایست دایو اصلی با کلاس container-fluid و برای وب سایت با عرض ثابت می بایست از کلاس container استفاده نمایید.

سیستم صفحه بندی بوت استرپ به صورت ریسپانسیو می باشد و که به صورت یک صفحه 12 ستونه در نظر گرفته می شود که کلاس های CSS از قبل تعریف شده ای برای صفحه بندی را در خود دارد.

کلاس های .

col-xs- ، .

col-sm- ، .

col-md- ، .

col-lg- برای تعریف ستون های صفحه در سایزهای مختلف صفحه مورد استفاده قرار می گیرند که col-lg برای سایزهای حدودا 1170 پیکسل، col-md برای سایزهای حدودا 970 ، col-sm برای سایزهای حدودا 750 و col-xs برای سایزهای بسیار کوچک صفحه مانند موبایل می باشد.

جدول مربوط به ستونبندی های از پیش تعریف شده: نحوه استفاده از .

col-md-* به این صورت می باشد که شما به جای ستاره می بایست از تعداد ستون هایی که دایو مورد نظر شما در صورتی که شما صفحه را به 12 ستون تقسیم نمایید قصد دارید ستون مورد نظر پر نمایید را می بایست تکمیل نمایید.

به عنوان مثال به کد زیر دقت نمایید: که در کد بالا col-md-8 به معنی آن است که این دایو در سایز متوسط 970px از 12 ستون 8 ستون و col-md-4 در همین سایز از 12 ستون 4 ستون را اشغال می نماید.

برای آنکه کد بالا را برای موبایل تنظیم نمایید می بایست کد مربوط به موبایل را نیز برای موبایل به آن اضافه نمایید: که در کد بالا col-xs-12 به معنای آن است که در موبایل این دایو کل ردیف 12 تایی را اشغال می نماید و col-xs-6 به آن معناست که این دایو 6 ستون از ردیف 12 را پر می نماید.