تبلیغات
طراحی سایت - طراحی سایت با بوت استرپ

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

جمعه 15 بهمن 1395 02:02 ب.ظ

نویسنده : همکار همکار
ارسال شده در: طراح سایت فروشگاهی ، طراحی سایت ،

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

در مرحله اول لازم است فایل های مربوط به Bootstrap را از وب سایت اصلی دانلود نمایید که برای انجام این کار لازم است به وب سایت  مراجعه نموده و بر روی کلید Download Bootstrap کلیک نموده و دوباره بر روی Download Bootstrap کلیک نمایید. فایل فشرده ای در اختیار شما قرار داده می شود که شامل سه فلدر css ، fonts و jss می باشد. این فلدرها را در ریشه اصلی وب سایت و یا قالب ساخته شده خود کپی نمایید. در صورتی که در حال طراحی قالب در جوملا و یا وردپرس هستید می بایست این فلدرها را در فلدر اصلی قالب ساخته شده خود بارگذاری نمایید.

برای شروع می بایست این سه فایل را در صفحه وب سایت خود اضافه نمایید:

 

<!-- 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 برای سایزهای بسیار کوچک صفحه مانند موبایل می باشد.




دیدگاه ها : () 




برچسب ها: نرم افزار طراحی سایت فلش ، نرم افزار طراحی سایت جوملا ، نرم افزار طراحی سایت php ، نرم افزار طراحی سایت html ، نرم افزار طراحی سایت به زبان فارسی ،
آخرین ویرایش: جمعه 15 بهمن 1395 02:03 ب.ظ



Can Pilates make you look taller?
دوشنبه 27 شهریور 1396 03:43 ق.ظ
Good response in return of this difficulty with solid arguments and describing all concerning that.
best chaturbate token generator
چهارشنبه 15 شهریور 1396 03:16 ق.ظ
I read this piece of writing completely on the topic of the difference of
hottest and preceding technologies, it's remarkable article.
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر