نمادها

مطالب پربازدید

شما اینجا هستید

» آموزش طراحی وب » آموزش Bootstrap » آموزش Bootstrap 4 جلسه دوم (start)

آموزش Bootstrap 4 جلسه دوم (start)

  • دسته بندی :آموزش Bootstrap,آموزش طراحی وب
    • آموزش Bootstrap 4 جلسه دوم (start)

    در خدمت شما هستیم با آموزش Bootstrap 4 جلسه دوم (start)

    آموزش Bootstrap 4 جلسه دوم (start) از سری آموزش های تک قسمتی است.

     

    پیشنیاز های شروع کار با بوت استرپ

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

    • استفاده از CDN ها
    • دانلود فایل ها از سایت getbootstrap.com و قرار دادن آنها در پوشه قالب سایت

     

    استفاده از CDN ها

    قبلا بارها درباره CDN ها در آموزش های مختلف توضیح داده ایم اما اگر بخواهیم به صورت مختصر توضیحی درباره CDN بدهیم میتوان اینگونه توضیح داد اگر شما فایل های سایت خود را در جایی به غیر از هاستی که سایتتان در آن قرار دارد قرار دهید و به واسطه لینکی آن را به سایت خود وصل کنید شما از CDN استفاده کرده اید از آنجایی که پایداری در CDN بسیار مهم است معمولا از سایت های قوی CDN میگیریم سایتی مثل گوگل و یا از سایت ارائه دهنده خود خدمات مد نظر . در این حالت ما میتوانیم از CDN هایی که خود بوت استرپ ارائه داده است استفاده کنیم که برای شما این CDN هارا قرار میدهیم:

    <!-- bootstrap css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

     

    قرار دادن فایل های بوت استرپ در سایت

    اگر شما نمیخواهید از CDN استفاده کنید و میخواهید فایل های بوت استرپ ۴ را مستقیم در پوشه سایت خود قرار دهید ابتدا باید وارد سایت bootstrap با آدرسی که بالاتر گفتیم  بشوید و روی دکمه download کلیک کنید در صفحه باز شده از قسمت Compiled CSS and JS با زدن دکمه download فایل زیپی برای شما دانلود میشود. اگر فایل زیپ را باز کنید ۲ پوشه داخل آن است یکی css و دیگری js ابتدا وارد پوشه css شوید و از داخل آن فایل bootstrap.min.css را بردارید و در قالب خود قرار دهید سپس وارد پوشه js و فایل bootstrap.min.js را نیز برداشته و در سایت خود قرار دهید.

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

     

    شروع کار با بوت استرپ

    بعد از فراخوانی فایل های بوت استرپ ۴ با یکی از ۲ روش گفته شده نوبت به شروع کار با بوت استرپ میرسد برای این کار چند مرحله را باید پشت سر بگذارید که آن ها را برای شما لیست کرده و هرکدام را توضیح میدهیم:

    1. اضافه کردن DOCTYPE به سایت :دیگر نیازی به DOCTYPE های طولانی نیست
    2. اضافه کردن کد موبایل برای رسپانسیو شدن سایت در دستگاه های مختلف
    3. استفاده از container ها

     

    اضافه کردن DOCTYPE

    در گذشته برای استاندارد سازی قالب باید DOCTYPE هایی با کد های طولانی استفاده میکردیم اما در بوت استرپ ۴ تنها نوشتن خود DOCTYPE و زبان سایت کفایت میکند .بوت استرپ ۴ از html5 و css3 به صورت کامل پشتیبانی میکند پس با خیال راحت میتوانید از آن ها استفاده کنید. ما نمونه DOCTYPE آماده ای را برای شما قرار میدهیم تا از آن استفاده کنید:

    <!DOCTYPE html>
<html lang="fa">
<meta charset="utf-8">
</html>

    در کد بالا ما lang که همان زبان سایت است را fa که به معنی فارسی است قرار دادیم شما در صورت نیاز میتوانید آن را تغییر دهید

     

    اضافه کردن کد موبایل

    برای آنکه بوت استرپ بتواند سایت شما را برای دستگاه های مختلف رسپانسیو کند نیاز است که قطعه کدی را در Header سایت خود قرار دهید . به کمک این کد شما  میتوانید بگویید که اگر کاربر سایت شما را با موبایل باز کرد عرض صفحه برابر با اندازه دستگاه کاربر شود مقدار width=device-width این کار را برای شما انجام میدهد و همچنین مقدار initial-scale که برابر با ۱ است میگوید که سایت در اندازه ای با مقیاس ۱ که اندازه استاندارد است برای کاربر نمایش داده شود. ما کد موبایل را برای شما قرار میدهیم تا از آن در سایت خود استفاده کنید:

    <meta name="viewport" content="width=device-width, initial-scale=1">

     

    استفاده از container ها

    مقیاس ها و ترازبندی ها در بوت استرپ ۴ با بوت استرپ ۳ فرقی نداشته است و همچنان طبق روال قبل ۲ container  وجود دارد که بنا به نیاز میتوانید از هر کدام استفاده کنید اگر عرض تمام صفحه میخواهید باید از container-fluid استفاده کنید و اگر در صفحه خود از کناره ها حاشیه میخواهید باید از container استفاده کنید.

    بوت استرپ شما آماده کار است 🙂

    آموزش Bootstrap 4 جلسه دوم (start) در اینجا به پایان میرسد در جلسه بعدی شروع به کار عملی میکنیم.

     

    می توانید دیگر قسمت ها را در لینک زیر ببینید:

    آموزش Bootstrap 4 جلسه اول (معرفی)

    آموزش Bootstrap 4 جلسه سوم (ساختار بدنه)

     

    شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:

     

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

    اگر این مطلب آموزنده بود به ما امتیاز دهید

    میانگین امتیاز / 5. تعداد آرا:

    اولین کسی باشید که رای میدهید


    • تاریخ ارسال
      2019/6/08
    • ارسال شده توسط
      amir
    • دیدگاه ها
      بدون دیدگاه
    • حجم دوره
      26.06 mb

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

    دانلود آموزش Bootstrap 4 جلسه دوم (start): نوع فایل:mp4 حجم فایل:26.06 مگابایت

    هر پلیر اجرا کننده فایل ویدیویی

    بیشتر مشاهده کنید

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

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.