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

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

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

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

بوت استرپ یکی از کتابخانه های و فریم ورک های 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 قالب خود کپی نمایید.

( جهت اطلاع از خدمات طراحی سایت در شیراز کلیک کنید. )

 <meta name=”viewport” content=”width=device-width, initial-scale=1″>
طراحی سایت با بوت استرپ

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

کد زنی های HTML مخصوص بوت استرپ

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

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

 <div class=”container”>

</div>
 <div class=”container-fluid”>

</div>

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

مختص شما:  طراحی سایت شرکتی زیبا دکور

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

  • کلیه کد زنی های بوت استرپ می بایست در درون دایو اصلی container و یا container-fluid قرار بگیرد.
  • ردیف های مختلف صفحه را درون دایو با کلاس row قرار دهید.
  • برای کد زنی صفحات از کلاس های از پیش تعریف شده .col-xs- ، .col-sm- ، .col-md- ، .col-lg- استفاده می گردد که هر کدام در سایزهای مختلف صفحه نمایش داده می شوند که در بخش پایین نحوه کار با این کلاس ها آموزش داده خواهد شد.

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

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

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

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

 <div class=”row”>
<div class=”col-md-8″>.col-md-8</div>
<div class=”col-md-4″>.col-md-4</div>
</div>

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

مختص شما:  خرید سایت

برای آنکه کد بالا را برای موبایل تنظیم نمایید می بایست کد مربوط به موبایل را نیز برای موبایل به آن اضافه نمایید:

 <div class=”row”>
<div class=”col-xs-12 col-md-8″>.col-xs-12 .col-md-8</div>
<div class=”col-xs-6 col-md-4″>.col-xs-6 .col-md-4</div>
</div>

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

مطالب مشابه

طراحی سایت در شیراز x بخوانید...