آموزش جامع بوت استرپ Bootstrap از صفر تا صد

  • مدرس : علی مظلوم
  • سطح آموزش : پیشرفته
  • مدت : ۴۳۶ دقیقه
  • تعداد دانشجو : ۲۸۲

آموزش جامع بوت استرپ Bootstrap از صفر تا صد

در این دوره آموزشی به مباحث فریم ورک بوت استرپ (‌Bootstrap) به طور کامل خواهیم پرداخت و بعد از بررسی تمام مباحث فریم ورک از جمله اسکریپت ها – المان ها (شامل جداول – فرم ها – تایپوگرافی – تولتیپ – لایت باکس – تب ها و …) به طراحی دو تم Landing Page و ‌Magazine میپردازیم.

باتوجه به این که در این دوره دو پروژه حرفه ای پیاده سازی خواهد شد، شما در انتهای دوره با زیر و بم کار آشنا خواهید شد و انتظار ما این هست که بتونید بعد از گذروندن این دوره، تفاوت کاملا محسوسی در سطح کاری تون از لحاظ تخصصی ببینید.

طراحی ۰ تا ۱۰۰ قالب تک صفحه ای

Iranian Atelier-min

طراحی ۰ تا ۱۰۰ قالب خبری

Iran Tourism-min

دورس جامع بوت استرپ Bootstrap از صفر تا صد

  • درس ۱ :‌ معرفی فریم ورک بوت استرپ Bootstrap
    2 دقیقه

    سلااااااااااااااام به همه دانشجوهای عزیز وی لرن، بازم با یک دوره فوق العاده جذااااااااب و کاربردی اومدیم پیشِتون. پس کمربندها رو محکم ببندین و از پشت کامپیوترتون تکون نخورین!!!

    می خوایم فریم ورک بسیااااااااار مفید بوت استرپ رو براتون بگیم. طوری که خیلی راحت بتونین تو پروژه های واقعی ازش استفاده کنین. دو تا تم زیبا و کاملاً قابل استفاده در بازارِ کار هم براتون میزنیم تا آموزش دوره بوت استرپ کامل بشه.

    حتما از خودتون میپرسین اگر از بوت استرپ استفاده کنیم چه اتفاقی میوفته یا اصلاً چه فایده ای داره؟؟؟!!!

    سرعت کد زنی بالا میره، ساختن یه چارچوب کلی واسه سایت خیییییلی راحت تر میشه و موارد دیگه که طی دوره متوجه میشین.

    اگر میخواین توانایی زدن یک طرح حرفه ای رو داشته باشین، تو این دوره با ما همراه باشین.

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

    در صورت نیاز به دانلود این ویدئو، اینجا کلیک کنید

  • 7 دقیقه

    میخوایم برای شروع آموزش Bootstrap آماده بشیم. خب دانشجوهای عزیز آماده هستین؟؟

    حالا که آماده هستین پیش به سوی Bootstrap

    برای این که به مشکل برنخوریم این فایل هایی رو که می‌گیم ایجاد کنین تا وقتی که توی آموزش ها آدرسی داده شد شما هم بتونین از اون آدرس ها استفاده کنین و پوشه بندی یکسانی با ما داشته باشین.

    یک پوشه درست کنین که همه فایل های پروژه رو اونجا قرار بدیم. داخل این پوشه فایل index.html , style.css رو قرار بدین. حالا دو تا پوشه دیگه با نام های css ,js داخلِ پوشه اصلی بسازین. البته این کار رو اگر دوست داشتین انجام بدین. اگر هم یه وقتی پوشه های متفاوتی با پوشه های ما ساختین، حواستون باشه موقع کد نویسی آدرس ها رو درست وارد کنین.

    برای این که بتوانیم از فریم ورک بوت استرپ استفاده کنیم باید فایل های بوت استرپ رو دانلود کنیم. لینک دانلودش رو آخر این درس براتون گذاشتیم.

    اگر هم خواستین میتونین به لینک http://getbootstrap.com/getting-started/#download “ مراجعه کنین و مستقیماً از سایت getbootstrap.com دانلود کنین.

    وقتی که فایل رو دانلود کردین از حالت فشرده خارجش کنین. حالا وارد پوشه Bootstrap بشین. پوشه ای به نام css می‌بینین. داخل این پوشه فایلی به نام  bootstrap.css ” وجود داره. کپی این فایل رو داخل پوشه css که تو پوشه پروژه تون درست کردین بگذارین. همچنین یه پوشه دیگه نام js داخلِ پوشه Bootstrap که دانلودش کردین هست. واردش که بشین، فایلی به نام ” bootstrap.js ” می‌بینین. اینم داخل پوشه js پروژه خودتون کپی کنین. حالا دیگه فایل های Bootstrap رو داریم و برای انجام پروژه آماده ایم.

    یه قطعه کد داخل لینک http://getbootstrap.com/getting-started/ “  با نام Basic template وجود داره. کدش رو این پایین می‌تونین ببینین.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Bootstrap 101 Template</title>
    
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
    
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
        <h1>Hello, world!</h1>
    
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
      </body>
    </html>

    کد بالا رو داخل فایل index.html پروژه تون قرار بدین. چند تا تگ داخل این کد ها هست که براتون توضیح میدیم.

    کد خط 6 ( meta tag ) : این کد برایِ این هست که سایت، داخل نسخه های 6 و 7 مرورگر IE تا حد زیادی به صورت استاندارد نمایش داده بشه.

    کد خط 7 ( meta tag ) : اگر سایت رو به صورت ریسپانسیو طراحی کنیم و بخوایم داخلِ صفحه نمایش های کوچیک تر به درستی نمایش داده بشه باید از این تگ استفاده کنیم. در غیر این صورت چیزی که تو نمایشگرهای کوچیک می‌بینیم همونی هست که برای نمایشگرهای بزرگتر طراحی کردیم.

    کد خط 17 و 18( script tag ) : همونطور که قبلاً تو آموزش HTML5 گفتیم، تگ های این تکنولوژی رو مرورگر IE8 نمی‌فهمه. برای همین از این تگ ها استفاده می‌کنیم تا این مروگر هم بفهمه. البته چون تو نسخه Bootstrap 4 دیگه از IE8 پشتیبانی نمیشه استفاده از این تگ ها هم بی معنی هست.

    کد خط 25 ( script tag ) : داخلِ این تگ آدرس یک کتابخونه خیییییییییلی مهم به نام jquery داده شد . همینطور که پیش بریم از یه سری المان هایی تو پروژه مون استفاده می‌کنیم که برای درست کار کردن اون‌ها احتیاج به وجود این کتابخونه هست. شما هم می‌تونین به همین شکلی که هست کتابخونه jquery رو از آدرس داخلِ تگ فراخونی کنین. در این صورت هر دفعه که سایت شما بارگیری بشه این فایل از آدرس مورد نطر گرفته میشه. بهش میگن کار ملانصرالدینی 😀

    برای این که خودتون فایلش رو داشته باشین می‌تونین آدرس داخل src  رو تو مرورگرتون وارد کنین. حالا داخل صفحه یه عالمه نوشته می‌بینین. با زدن دکمه ctrl+s می‌تونین این فایل رو ذخیره کنین. فقط دقت کنین چون فرمت این فایل js هست باید داخل پوشه js پروژه ذخیرش کنین.

    توجه : دقت کنین که آدرس دو تا فایلِ bootstrap.js و bootstrap.css که داخل تگ های link و script هستن رو درست وارد کنین.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 11 دقیقه

    خب خب خب، الان دیگه میریم تو کار کد نویسی. اون پوشه هایی که گفتیم و فایل index رو حتماً ساختین دیگه!!! اگر نساختین همین الان بسازین که خیییییییلی کار داریم…

    وقتی میخوایم یه سایت رو طراحی کنیم باید یه شبکه بندی مناسب داشته باشه که  تو آموزش html و css و تو آموزش landing page میتونین نمونه هاشو ببینین. تویِ اون آموزش‌ها دیدین که ما با div ها و عرض دادن به اونا این ساختار کلی رو ایجاد می‌کردیم. طبیعتاً این کار زمان بر هست و همچنین ممکنِ اندازه هایی که ما میدیم زیاد مناسب نباشه و سایتمون بی ریخت بشه.

    حالا اونایی که زحمت کشیدن و فریم ورک بوت استرپ رِ ساختن یه سری کلاس در نظر گرفتن، که ایجادِ یک سیستم شبکه بندی با بوت استرپ رو به راحتی برای ما فراهم می‌کنه. الان یَک مثال مَشتی بِرَتان مِزِنِم تا جیگرتان حال بیه :D( چه کنیم دیگه بعضی وقتا حسِ لهجه مشهدی میاد 😉 )

    مثال : مثالی که میزنیم، برای اندازه های مختلف صفحه نمایش هست. اول کدها و نتیجه ای که به دست اومده رو براتون میگذاریم بعدش توضیح میدیم که چه اتفاقی افتاده. کدی که میگذاریم برای همه تصاویر یکسانه. تصویرِ نتیجه به دست اومده برای هر صفحه نمایش رو هم به صورت مجزا براتون میگذاریم .

    <div class="col-lg-6 col-md-6 col-sm-8 col-xs-12 green">
          <h3>col-lg-6</h3>
          <div class="col-lg-4 col-md-6 col-sm-10 col-xs-12 peterriver">
            <span class="pull-right">col-lg-4</span>
          </div>
          <div class="col-lg-8 col-md-6 col-sm-2 col-xs-12 pomegranate">
            <span class="pull-left">col-lg-8</span>
          </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-4 col-xs-12 greensea">
          <h3>col-lg-6</h3>
          <div class="col-lg-7 col-md-12 col-sm-8 col-xs-6 peterriver">
            <span class="pull-right">col-lg-7</span>
          </div>
          <div class="col-lg-5 col-md-12 col-sm-4 col-xs-6 pomegranate">
            <span class="pull-left">col-lg-5</span>
          </div>
    .green{
    	background: #27ae60;
    	color: #fff;
    	font-size: 20px;
    }
    .greensea{
    	background: #16a085;
    	color: #fff;
    	font-size: 20px;
    }
    .peterriver{
    	background: #3498db;
    }
    .pomegranate{
    	background: #c0392b;
    }

     

    توضیحات بسیاااار برای تصاویر و کدهایی که زدیم 😀

    حتما الان کلی سوال براتون پیش اومده که اینا چی هستن؟؟ چرا تو هر نمایشگر شیوه نمایش فرق می‌کنه؟؟؟ اصلاً ما چی‌کار کردیم؟؟!! این کدهایی که زدیم یعنی چی؟؟ اصلاً نگران نباشین، الان همشو براتون توضیح میدیم.

    فریم ورک Bootstrap یه سری کلاس برای نمایشگر های مختلف در نظر گرفته که بادادن اون کلاس‌ها به المان‌های مورد نظر مون به راحتی می‌تونیم یه ساختار مناسب رو ایجاد کنیم. خب حالا این کلاس‌ها چه خواصی دارن و بر چه اساسی هستن؟؟؟

    فقط دو تا خاصیت!! یکی ” float: left ” و یکی دیگه هم ” width “ هست. اگر دوره landing page رو دیده باشین یا تا حالا خودتون سایتی رو ریسپانسو کرده باشین میدونین که باید برای نمایش صحیح سایت تو اندازه های مختلف، media query  تعریف کرد و المان هایی که مشکل ساز هستن رو اصلاح کرد.

    حالا بوت استرپ چه کرده؟؟

    • کلاس 1-col-lg تا col-lg-12 رو برای نمایشگرهای با اندازه 1200px و بیشتر در نظر گرفته (برای دسکتاپ بزرگ).
    • کلاس 1-col-md تا col-md-12 رو برای نمایشگرهای با اندازه 992px و بیشتر در نظر گرفته (برای دسکتاپ معمولی).
    • کلاس 1-col-sm تا col-sm-12 رو برای نمایشگرهای با اندازه 768px و بیشتر در نظر گرفته (برای تبلت).
    • کلاس 1-col-xs تا col-xs-12 رو برای نمایشگرهای با اندازه کوچیکتر از 768px در نظر گرفته (برای موبایل).

    اول از همه این که اون عددهایی که داخل کلاس‌ها هست برای چیه؟؟ دوم این که خاصیت عرضی که براشون در نظر گرفته شده چه مقادیری دارن؟؟

    هر المان (چه کل مرورگر باشه چه یک div) به 12 ستون مساوی تقسیم میشه. و هر ستون دارای عرض 8.33333333 درصدی هست. بر همین اساس اولین ستون از سمت چپ (براساس float: left، خب اگر مقدارش right باشه میشه از سمت راست) col-xx-1 میشه. دو تا ستون اول از سمت چپ، col-xx-2 میشه و همینجور میره تا col-xx-12 ، که %100 عرض رو پوشش میده. (منظورمون از col- xx یعنی همه اندازه های مختلف)  

    مقدار عرض هر کلاس هم بر اساس تعداد ستون‌هایی که در بر می‌گیره متفاوت میشه. مثلاً اگر col-xx-6 رو در نظر بگیریم، قطعاً عرضش برابر با %50 میشه، که کاملاً مشخص هست. چون 6 تا ستون رو در بر می‌گیره پس قطعاً نصف عرض رو هم پوشش میده.

    حالا به کد هایی که زدیم نگاه کنین. دو تا div رو به عنوان والد در نظر گرفتیم. مثلاً اولین کلاس این دو تا المان رو نگاه کنین، col-lg-6 هست. همونطور که گفتیم وقتی 6 تا ستون رو اشغال کنه، نصف عرض والد میشه (تصویر شماره 1). یا مثلاً به div خط چهارم (داخل کد html) نگاه کنین، یه کلاسِ col-sm-10 داره. یعنی 10 تا ستون المان والدش رو اشغال می‌کنه. 

    *نکته* : هر کلاس، فقط تو عرض متناسب با خودش عمل می‌کنه. مثلاً col-lg فقط تو عرض 1200px و بیشتر از اون درست عمل می‌کنه.

    *نکته* : وقتی میخواین دو تا المان کنار هم قرار بگیرن، باید طوری بهشون کلاس بدین تا مجموع ستون‌هایی رو که در بر میگیرن برابر 12 بشه. مثلاً اگر به یکیشون col-xs-4 دادین دیگه نباید به اون المان دیگه غیر از col-xs-8 بدین، چون که طرحتون رو بهم میریزه. اگه دوست دارین خودتون یه بار امتحان کنین!!ا

    اگر به کد های HTML نگاه کنین، می‌بینین که از دو تا کلاس به نام های pull-right و pull-left استفاده کردیم.

    pull-right :

    ابن کلاس فقط خاصیت ” float: right !important ” داره. وقتی این کلاس رو به المان بدیم تحت هر شرایطی سمت راست قرار می‌گیره. چون با استفاده از important! بهش بالاترین اولویت رو دادیم.

    pull-left :

    ابن کلاس فقط خاصیت ” float: left !important ” داره. وقتی این کلاس رو به المان بدیم تحت هر شرایطی سمت چپ قرار می‌گیره.

    توضیحات کامل این درس رو میتونین داخل فیلم آموزشی سیستم تقسیم‌بندی در بوت استرپ، ببینین. توضیحات و ویدیو به طور کامل مطلب رو پوشش میده ولی اگر خواستین می‌تونین به لینک http://getbootstrap.com/css/#grid ” یه سری بزنین.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 5 دقیقه

    میخوایم کلاس clearfix  رو بهتون معرفی کنیم. یه مثال می‌زنیم و با مثال براتون توضیح میدیم.

    <div class="col-sm-3 col-xs-6 green">
     col 1
     <br>
     Resize the browser Resize the browser
     </div>
    <div class="col-sm-3 col-xs-6 peterriver">col 2</div>
    <div class="col-sm-3 col-xs-6 greensea">col 3</div>
    <div class="col-sm-3 col-xs-6 pomegranate">col 4</div>
    .green{
    	background: #27ae60;
    	color: #fff;
    	font-size: 20px;
    }
    .greensea{
    	background: #16a085;
    	color: #fff;
    	font-size: 20px;
    }
    .peterriver{
    	background: #3498db;
    	color: #fff;
    	font-size: 20px;
    }
    .pomegranate{
    	background: #c0392b;
    	color: #fff;
    	font-size: 20px;
    }

    به تصویر شماره 5 نگاه کنین. می‌بینین که به خوبی نمایش داده میشه. ولی تویِ تصویر شماره 6  اون طرز چینشی که ما برای نسخه موبایل در نظر گرفته بودیم به هم ریخته. ما می‌خواستیم که col 1 و col 2 کنار هم باشن، به همین ترتیب col 3 و col 4 هم پایین اون‌ها قرار بگیرن. برای رفع این مشکل از یه div با کلاس clearfix استفاده می‌کنیم.

    کلاس clearfix دارای خاصیت ” clear: both ” هست. حالا نتیجه رو با کلاس clearfix ببینین.

    <div class="col-sm-3 col-xs-6 green">
        col 1
        <br>
        Resize the browser Resize the browser
        </div>
        <div class="col-sm-3 col-xs-6 peterriver">col 2</div>
        <div class="clearfix"></div>
        <div class="col-sm-3 col-xs-6 greensea">col 3</div>
        <div class="col-sm-3 col-xs-6 pomegranate">col 4</div>

     

    ای بابا!!! دوباره که بهم ریخت؟؟؟ خب این مشکل هم قابل حل هست، دشواری نداریم 🙂

    با قرار دادن کلاس visible داخل المانی که کلاس clearfix داره میشه این مشکل رو حل کرد.

    کلاس visible در حالت کلی دارای خاصیت ” display: none !important ” هست. ولی در هر breakpoint دارای خاصیت ” display: block “ هست.

    <div class="clearfix visible-xs"></div>

    حتماً کد رو بزنین تا ببینین که تو نسخه تبلت هم به خوبی نمایش داده میشه.

    نکته : اگر بخوایم طرز نمایش های مختلف داخلِ نمایشگر های مختلف داشته باشیم، حتماً حتماً باید از کلاس visible کنار کلاس clearfix استفاده کنیم. همچنین با توجه به نمایشگر مورد نظر xs ،sm ،md، یا lg  رو به همراه یک دونه خط تیره به visible اضافه می‌کنیم (مثل کد بالا).

    فیلم آموزشی رو حتماً تماشا کنین.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 9 دقیقه

    ممکنه بعضی وقت ها بخوایم از یک یا چند تا المان کنار هم استفاده کنیم ولی مجموع ستون‌هایی که اشغال میکنن 12 تا نشه. برای این که بتونیم این کار رو انجام بدیم و مشکلی هم پیش نیاد می‌تونیم از کلاس col-xx-offset-1 تا کلاس col-xx-offset-11 استفاده کنیم. به مثال توجه کنین:

    <div class="col-sm-3 col-sm-offset-9 peterriver">col-sm-offset-9</div>
          <div class="col-sm-1 col-sm-offset-7 peterriver">col 1</div>
          <div class="col-sm-4 greensea">col 2</div>
    .greensea{
    	background: #16a085;
    	color: #fff;
    	font-size: 20px;
    }
    .peterriver{
    	background: #3498db;
    	color: #fff;
    	font-size: 20px;
    }

     

    col-xx-offset

    تصویر شماره 9

    کلاس col-xx-offset چی‌کار میکنه؟؟ با استفاده از خاصیت margin، اون مقدار فضایی که خالی مونده رو پر می‌کنه تا ظاهر سایت به هم نریزه. به تصویر بالا نگاه کنین. اولین المان فقط سه تا از ستون ها رو اشغال کرده. ولی باز هم ظاهرش به هم نریخته، چرا؟؟؟ چون که offset با مقدار 9 بهش دادیم که مجموعاً 12 تا ستون میشه (رنگ زرد نشون دهنده margin هست که کلاس offset ایجاد کرده).

    خب دو تا کلاس دیگه هم هستن که برای جابجایی المان‌ها با هم دیگه استفاده میشن.

    <div class="col-md-5 greensea">col 1</div>
          <div class="col-md-7 peterriver">col 2</div>
          <div class="col-md-5 col-md-push-7 greensea">col 1</div>
          <div class="col-md-7 col-md-pull-5 peterriver">col 2</div>
    
    col-xx-push/pull

    تصویر شماره 10

    همونطور که تویِ کدهای بالا میبین از دو تا کلاس با نام های col-xx-push و col-xx-pull استفاده کردیم. از معنیشون میشه فهمید که کلاس pull برای کشیدن المان ها و کلاس push برای هل دادنشون استفاده میشه.

    برای توضیحات بیشتر فیلم آموزشی این قسمت رو تماشا کنین.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 15 دقیقه

    بحث typography خییییییلی مهمه. پس خوب حواساتونو جمع کنین. این مبحث در مورد استایل هایی هست که، برای تگ های p و heading و بقیه تگ‌ها و خواصی که مربوط به متن میشن در نظر گرفته شده.

    یه نکته رو لازم میدونم بهتون بگم که بعضی از کلاس هایی که برای استایل دادن به متن ها در نظر گرفته شده، بیشتر به درد برنامه نویس‌ها میخوره تا طراحان رابط کاربری. پس اگر برنامه نویسی داره این دوره رو می‌گذرونه حتماً به این قسمت هم توجه کنه.

    <body>
        welearn.site  
        <p>welearn.site</p>
        <h1>welearn.site</h1>
        <h2>welearn.site</h2>
        <h3>welearn.site</h3>
        <h4>welearn.site</h4>
        <h5>welearn.site</h5>
        <h6>welearn.site</h6>
        <kbd>code</kbd>
        <blockquote>Welearn Academy</blockquote>  
        <mark>welearn</mark>
        <p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
        </p>
    
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.js"></script>
      </body>
    typography in Bootstrap

    تصویر شماره 11

    به کد هایی که نوشتیم خوب نگاه کنین. بدون این که استایلی براشون در نظر بگیریم، خودشون دارن. بوت استرپ یه سری استایل‌هایی به صورت پیش فرض برای تگ‌های P ,h1 ,h2 ,h3 ,h4 ,h5 ,h6 و … در نظر گرفته. در صورتی که ما از این استایل ها خوشمون نیاد، می‌تونیم به راحتی عوضشون کنیم و هر چیزی رو که بخوایم اعمال کنیم. همچنین یه سر ی کلاس هم ایجاد کرده که به راحتی می‌تونیم به نوشته ها بعضی از رنگ‌ها، background و چیزای دیگه ای رو اعمال کنیم. می‌تونین توضیحات کامل این درس رو از طریق فیلم آموزشی ببینین.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 10 دقیقه

    ساختار جدول رو قبلًا تو آموزش html و css گفتیم. اینجا میخوایم جدول در بوت استرپ رو توضیح بدیم. در بوت استرپ یه سری کلاس برای جدول در نظر گرفته شده که ساختن یه جدول مرتب و ساده رو برای ما فراهم می‌کنه. الان براتون یه مثال میزنیم. اگر خواستین بحث رو خوب متوجه بشین فیلم آموزشی رو تماشا کنین.

    <body>
        <br>
        <div class="container">
          <table class="table table-bordered">
          <thead>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
          </thead>
          <tbody>
            <tr class="warning">
              <td>Ali</td>
              <td>Mohammad</td>
              <td>[email protected]</td>
            </tr>
                    <tr class="info">
              <td>Ali</td>
              <td>Mohammad</td>
              <td>[email protected]</td>
            </tr>
                    <tr>
              <td class="success">Ali</td>
              <td>Mohammad</td>
              <td>[email protected]</td>
            </tr>
          </tbody>
        </table>
        </div>
    
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.js"></script>
        </div>
      </body>
    table in bootstrap , جدول در بوت استرپ

    تصویر شماره 12

     

    همونطور که می‌بینین خیلی راحت با استفاده از تگ های table ,thead ,tbody ,tr ,td یه جدول ساختیم. با کلاس هایی که بوت استرپ داره، میشه یه سر و شکل مناسبی به جدول داد. فقط دقت کنین کلاس table همیشه باید باشه تا بشه از بقیه کلاس‌ها هم استفاده کرد. یه سری کلاس هم برای رنگِ background داریم. مثل کلاس info, کلاس success و کلاس‌های دیگه که به طور کامل در فیلم آموزشی هست و می‌تونین ببینین.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 0 دقیقه

    جدول رو براوتون توضیح دادیم همچنین کلاس‌هایی که داشت و استایل‌هایی که می‌گرفت. حالا میخوایم ریسپانسیوش کنیم. ریسپانسیو کردنِ جدول در بوت استرپ خیلی راحت انجام میشه. تنها کاری که برای ریسپانسیو کردن جدول لازمه اینه که جدولی که ساختیم (مثل جدول درس قبلی) رو داخل یک div با کلاس table-responsive قرار بدیم، تا به راحتی هر چه تمام تر یه جدول ریسپانسیو داشته باشیم.

    ولی یک مشکل داره که ظاهر جذابی نداره. برای همین ما خودمون یه جدول ریسپانسیو طراحی می‌کنیم. که هم ظاهر جذاب و شیکی داره و هم در اندازه های مختلف به خوبی نمایش داده میشه. می‌تونین ریسپانسیو کردن جدول رو داخل فیلم آموزشی این درس ببینین.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 4 دقیقه

    تصاویر یکی از قسمت های مهم برای زیبایی یک سایت هستن. برای این که زیباییشون بیشتر بشه یه سری استایل بهشون میدیم. حالا Bootstrap کار ما رو راحت کرده و چهار تا کلاس برای تصاویر در نظر گرفته. الان بهتون میگیم چیا هستن.

    img-circle :

    این کلاس یه border-radius با مقدار %50 داره. که اگر عکسمون به صورت مربعی باشه تبدیل میشه به دایره.

    img-rounded :

    یه border radius با مقدار شش پیکسل داره که تمام گوشه های عکس رو گِرد کنه.

    img-thumbnail :

    یه border دور عکس ایجاد می‌کنه.

    img-responsive :

    وقتی یک عکس رو داخل سایت قرار میدیم، برامون مهمه که تو نمایشگرهای کوچیک هم به درستی نمایش داده بشه. پس باید یه سری استایل بهش بدیم تا تصویر ریسپانسیو ادشته باشیم. حالا Bootstrap یه کلاس به نام img-responsive در نظر گرفته که تصاویر ریسپانسیو رو برای ما فراهم می‌کنه.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 5 دقیقه

    گاهی اوقات پیش میاد که میخوایم یه اطلاعیه داخل سایتمون بزنیم. مثلاً اگر سایت فروشگاهی داشته باشیم، ممکنه بخوایم تخفیف برای یک مناسبت خاص بدیم. خب برای این کار باید یه alert داخل سایتمون بگذاریم.

    خوشببختانه alert در بوت استرپ هم هست، که تو این درس به طور کامل براتون توضیح بدیم. کلاسی با نام alert وجود داره که میتونین اونو به المان مورد نظرتون بدین تا بتونین یه اطلاعیه ایجاد کنین. همچنین کلاس‌هایی هم برای رنگ دادن به المان وجود داره که میتونین از طریق فیلم آموزشی این درس بببینین.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 6 دقیقه

    یکی از چیزایی که استفاده زیادی داره دکمه ها در سایت هستن. دکمه در بوت استرپ هم هست. یه چند تایی استایل زیبا برای دکمه وجود داره که داخل فیلم آموزشی بوت استرپ بهتون میگیم. کلاس اصلِ کاری که برای دکمه ایجاد شده، btn هست. شما می‌تونین این کلاس رو به المان های مختلفی مثل تگ a ,div ,input و چیزایی از این قبیل اعمال کنین.

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

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 2 دقیقه

    تو این درس میخوایم آموزش آیکون فونت در bootstrap رو بدیم. آیکون ففونت ها جزء مواردی هستن که در سایت ها حتما استفاده میشن. آیکون فونت ها رو میشه از راه‌های مختلفی بدست آورد که الان چند تا راه رو میگیم.

    معروفترین آیکون فونت، Font Awesome هست . که از سایت ” http://fontawesome.io “ قابل دریافت هست.

    ایکون فونت‌هایی دیگه مثل icomoon و Fontello هستن که می‌تونین ازشون استفاده کنین. ولی ما میخوایم آموزش Glyphicons در بوت استرپ رو بهتون بدیم. glyphicons، آیکون فونت بوت استرپ هست. استفاده از glyphicons خیییییلی راحته، فقط کافیه فیلم آموزشی این درس رو تماشا کنین.

    لینک مربوط به آیکون فونت glyphicons

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 4 دقیقه

    میخوایم نوار پیشرفت در bootstrap رو براتون بگیم. مثلاً ممکنه یک سایتی باشه که بخواد نوار پیشرفت پروژه داشته باشه. برای همین ما از نوار پیشرفت در بوت استرپ کمک میگیرم. کافیه یک div با کلاس progress ایجاد کنین تا بتونین از نوار پیشرفت، داخلِ سایتتون استفاده کنین.

    بوت استرپ کلاس‌هایی رو هم در نظر گرفته که بشه به progress bar استایل داد. فیلم آموزش نوار پیشرفت در bootstrap رو می‌تونین ببینین تا کاملاً متوجه موضوع بشین.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 6 دقیقه

    تو این درس میخوایم آموزش ساخت accordion در بوت استرپ  با استفاده از collapse رو بهتون بگیم.  یه کلاسی هست به نام panel-group که به المان والد میدیم، تا بتونیم یک منوی آکاردئونی بسازیم. کلاس های دیگه ای هم هستن که برای ساخت منوی آکاردئونی استفاده میشن. مثل panel-collapse , collapse و …

    با دیدن فیلم اموزش ساخت منو آکاردئون می‌تونین کاملاً مطلب رو درک کنین.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 10 دقیقه

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

    ایجاد فرم در بوت استرپ نیازمند کلاسی به نام form-group هست، که به المان والد داده میشه و بقیه المان‌ها مثل ورودی ها داخل اون قرار میگیرن. البته کلاس‌های دیگه ای هم هستن که به المان ها میدیم، مثل کلاس form-control ,check-box و …

    اولین قدم برای ساخت فرم ، ایجاد تگ form هست. بعد از اون یک div با کلاس form-group می‌سازیم و المانی مثل input با کلاس form-control رو داخلش قرار میدیم. و به همین ترتیب می‌تونیم فرم مورد نظرمون رو بسازیم. اگر هم از کلاس های bootstrap خوشتون نیومد می‌تونین اونا رو به میل خوددتون تغییر بدین.

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

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 12 دقیقه

    تو درسِ قبل، ایجاد فرم با بوت استرپ رو آموزش دادیم. حالا میخوایم بحث رو بیشتر باز کنیم و چیزایی بیشتری در مورد ایجاد فرم بگیم. تو این در درس در مورد checkbox ,radio ,textarea  و تگ select صحبت می‌کنیم.

    همچنین تو این درس نشون میدیم که چطور میشه ایکون فونت glyphicon رو داخل یک المان (مثل input) قرار داد. توضیحات در مورد آیکون فونت در bootstrap رو داخلِ درس 12 دادیم (رفتن به درس 12).

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

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 6 دقیقه

    در این درس آموزش ساخت tooltip در بوت استرپ رو بهتون میدیم. اصلاً تولتیپ چی هست؟؟

    اگر دقت کرده باشین، وقتی موس رو روی بعضی از نوشته ها یا المان ها می‌بریم، یه کادری اطراف اون نوشته یا المان ظاهر میشه که به اون کادر tooltip میگیم. tooltip میتونه ویدیو، متن، تصویر و هر چیزی که مد نظرمون باشه رو نشون بده.

    چیزی که ما برای آموزش ایجاد تولتیپ در بوت استرپ در نظر گرفتیم، همون تولتیپ پیش فرضِ بوت استرپ هست. که برای کار های معمولی واقعاً مناسبه و میتونین به راحتی ازش استفاده کنین و متن دلخواهتون رو نمایش بدین.

    البته این که چطور میشه تولتیپ پیش فرض بوت استرپ رو تغییر داد و به شکل دلخواه درِش آورد، در همین دوره آموزش جامع بوت استرپ، قسمت طراحی تم گردشگری/خبری براتون میگیم. میتونین فیلم آموزشی کار با تولتیپ در bootstrap رو در ویدیو پایین تماشا کنین.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 9 دقیقه

    اگر بخوایم وقتی که روی یک عکس یا یک متن یا یک دکمه کلیک می‌کنیم یه چیزی رو به صورت light box به ما نشون بده، باید از modal در بوت استرپ استفاده کنیم. برای این که بتونین modal رو داشته باشین باید یکم هم javascript بلد باشین. ولی با وجود بوت استرپ احتیاجی به کد نوشتن جاوا اسکریپت ندارین.

    ما هم سعی کردیم تو این درس به طور کامل کار با modal رو آموزش بدیم. اگر هم خواستین بیشتر در مورد استفاده modal در بوت استرپ بدونین، می‌تونین تو همین دوره به قسمت آموزش تم مجله خبری/گردشگری برین.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 7 دقیقه

    این جلسه میخوایم آموزش ساخت اسلایدر در بوت استرپ رو براتون بگیم. ایجاد اسلایدر در بوت استرپ با کتابخونه carousel slider انجام میشه.

    اگر بخواین یه اسلایدر رو بدون فریم ورک استفاده کنین، باید از کتابخونه های موجود برای ایجاد اسلایدر استفاده کنین. ولی با استفاده از فریم ورک بوت استرپ و بدون اضافه کردن هیچ کتابخونه ای م‌یتونین با استفاده از چند تا کلاس مثل carousel , slide ,carousel-inner ,item و کلاس های دیگه، یک اسلایدشو در بوت استرپ بسازین. داخل اسلایدر میشه مطالب مختلفی مثل تصویر، فیلم، متن قرار داد. برای این که مطلب به طور کامل براتون جا بیوفته، فیلم آموزش ایجاد اسلایدشو در بوت استرپ رو ببینین.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 22 دقیقه

    خب دوستان عزیز، از این جلسه طراحی تم شروع میشه. اول قالب ریسپانسیو landing page رو طراحی می‌کنیم، بعد سراغ قالب مجله خبری/گردشگری میریم.

    این نکته رو لازم می‌دونیم که بهتون بگیم. ما این دو تا قالب رو بر اساس بوت استرپ 3 طراحی می‌کنیم و آموزش‌هایی که دادیم هم بر این اساس هست. ولی حتماً، وقتی که بوت استرپ 4 به طور کامل عرضه شد، آموزش بوت استرپ 4 رو براتون میگذاریم.

    تو این درس شروع به طراحی منوی ریسپانسیو با استفاده از بوت استرپ می‌کنیم. یه سری از کدها به صورت آماده داخل سایت getbootstrap.com موجود هست. کد منوی ریسپانسیو هم جزء همون کدهاست. ما این کد رو برمی‌داریم و متناسب با طرحمون تغییرات لازم رو روش اعمال می‌کنیم.

    برای دسترسی به کدهای ریست هم می‌تونین به لینک http://html5doctor.com/html-5-reset-stylesheet/ ” مراجعه کنین.

    فیلم آموزش ایجاد منوی ریسپانسیو با بوت استرپ رو حتماً ببینین.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 10 دقیقه

    تو این مرحله بخش هدر (header) رو تکمیل می‌کنیم. همچنین یه سری از کلاس‌های بوت استرپ رو متناسب با پروژه تغییر میدیم.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 7 دقیقه

    خب، طراحی بخش header قالب هم تموم شد. حالا میریم سراغ بخش بعدی قالب که شامل یک عنوان و متن و یک دکمه هست.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 7 دقیقه

    به بخش خدمات قالب landing page رسیدیم. تو این بخش از آیکون فونت glyphicons در بوت استرپ استفاده می‌کنیم و یه سری تغییراتی رو در آیکون فونت اعمال می‌کنیم.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 12 دقیقه

    به بخش portfolio قالب landing page رسیدیم. تو قسمت 1، طراحی portfolio در بوت استرپ رو شروع می‌کنیم. تو قسمت 2 هم طراحی portfolio در بوت استرپ رو تموم می‌کنیم و سراغ بخش تماس با ما میریم.

    قسمت 1 :

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    قسمت 2 :

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 3 دقیقه

    خب، به آخرین جلسه از طراحی قالب landing page رسیدیم. یه سری ایرادات در بخش ریسپانسیو قالب هست که اونا رو برطرف می‌کنیم و طراحی قالب landing page رو تموم می‌کنیم.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

     

  • 14 دقیقه

    به بخش طراحی قالب مجله خبری/گردشگری رسیدیم. برای طراحی این قالب هم از bootstrap3 استفاده می‌کنیم. تو این جلسه یه سری توضیحات کلی در مورد قالب مجله خبری داده میشه و آیکون هایِ شبکه‌های اجتماعی رو در قسمت بالایِ سایت قرار میدیم.

    از این به بعد از آیکون فونت Font Awesome برای طرحمون استفاده می‌کنیم.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 6 دقیقه

    تو این جلسه یه سری توضیحات در مورد تصاویر png و svg داده میشه که برای طراحی سایت بسیار کاربردیه. و این که برای لوگو باید از چه نوع تصویری استفاده کنیم.

    سه تا آیکون فونت دیگه هم لازمه که تو این جلسه اونا رو هم داخل قالب قرار میدیم.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 7 دقیقه

    در درس قبل بخش بالای header تموم شد. حالا میخوایم منو رو طراحی کنیم. ولی این بار بر خلاف قالب landing page، خودمون منو رو می‌سازیم و دیگه از منوی بوت استرپ استفاده نمی‌کنیم.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 10 دقیقه

    شروع به طراحی اسلایدر قالب می‌کنیم. برای طراحی قالب از اسلایدر بوت استرپ استفاده نمی‌کنیم. چون قبلاً طی آموزش، اسلایدر بوت استرپ رو براتون توضیح دادیم، تصمیم گرفتیم از کتابخونه ای غیر از کتابخونه carousel استفاده کنیم.

    اسم کتابخونه ای که استفاده می‌کنیم slick هست که از طریق لینک http://kenwheeler.github.io/slick/#go-get-it “ قابل دریافت هست.

    تو قسمت 1 و 2 طراحی اسلایدر بالایی رو انجام میدیم و تو قسمت 3 و 4 طراحی اسلایدر پایینی رو به اتمام می‌رسونیم.

    قسمت 1 :

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    قسمت 2 :

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    قسمت 3 :

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    قسمت 4 :

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 7 دقیقه

    خب، به بخش پستِ قالب رسیدیم. تو این درس تمام قسمت های مربوط به پست رو طراحی می‌کنیم و به اتمام می‌رسونیم.

    قسمت 1 :

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    قسمت 2 :

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    قسمت 3 :

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    قسمت 4 :

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 10 دقیقه

    خب دیگه بخشِ پست ها هم تموم شد، حالا نوبت به ساید بار می‌رسه. ساید بار از چند قسمت تشکیل شده که الان میخوایم با هم دیگه طراحیشو انجام بدیم.

    در قسمت های 1 و 2 و 3 بخش های مربوط به سفرهای پیشنهادی، در قسمت 4 بخش شبکه های اجتماعی، در قسمت 5 دسترسی سریع، در قسمت 6 خبرنامه و در قسمت 7 بخش محبوب‌ترین مقالاتِ ساید بار طراحی میشن.

    قسمت 1 :

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    قسمت 2 :

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    قسمت 3 :

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    قسمت 4 :

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    قسمت 5 :

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    قسمت 6 :

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    قسمت 7 :

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

     

  • 13 دقیقه

    به بخش فوتر قالب رسیدیم. کم کم داره طراحی قالبمون به پایان می‌رسه. تو این درس بخش فوتر رو پیاده‌سازی می‌کنیم و استایل های مورد نظرمون رو میدیم، تا این بخش هم به اتمام برسه.

    در قسمت 1 بخش ویجت و در قسمت 2 بخش مربوط به اینستاگرامِ فوتر رو طراحی می‌کنیم.

    قسمت 1 :

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    قسمت 2 :

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 9 دقیقه

    تو این درس میخوایم با استفاده از کتابخونه AnimateSrroll یه کاری کنیم که، وقتی روی هر کدوم از گزینه های منو کلیک کردیم، با یک افکت زیبا به بخش مورد نظر هدایت بشیم. قبل از اینا باید منو رو با استفاده از کلاس‌های بوت استرپ، بالای صفحه ثابت کنیم. بعدش سراغ کتابخونه AnimateSrroll میریم.

    اگر کتابخونه AnimateSrroll رو خواستین، میتونین به لینک https://plugins.compzets.com/animatescroll/ “ برین.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 0 دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    سورس فایل‌های پروژه های کار شده در این دوره آموزشی ضمیمه گردید.

نظرات دوره آموزش مجازی جامع بوت استرپ Bootstrap از صفر تا صد

  • برای مشاهده نظرات و سوالات، بر روی دکمه مربوطه کلیک کنید
  • ارتباط سریع و موثر با مدرس دوره
  • امکان ارسال فایل های پروژه
  • پاسخگویی متنی، صوتی و تصویری به سوالات شما