آموزش Bootstrap

مدرس دوره:

این دوره توسط حمید رضا ملکی تالیف شده است.


سطح دوره:

سطح این دوره مقدماتی و پیشرفته است.


پیش نیازها:

پیش نیاز دوره ی آموزش زبان Bootstrap ، آشنایی مقدماتی با CSS ، HTML و JavaScript میباشد :

دوره ی آموزش HTML5 

دوره ی آموزش CSS

دوره ی آموزش JavaScript 


مشخصات دوره:

تاریخ انتشار دوره: ۱۳۹۶/۰۷/۰۳
تعداد آموزش ها: در حال تألیف ...


شروع آموزش

Bootstrap(بوت استرپ) مشهورترین فریمورک CSS ، HTML و JavaScript برای توسعه ی وب سایت های واکنش گرا و قابل اجرا در دستگاه های موبایل است. این فریمورک یک محصول کد باز و کاملا رایگان است.

Bootstrap یک فریمیورک سمت کاربر برای ساخت وب سایت های واکنش گراست. صفحه ی وب شما چه یک اپلیکیشن، بلاگ و یا از دسته ی  سیستم های مدیریت محتوا باشد، بوت استرپ میتواند برای آن مناسب باشد. Bootstrap ترکیبی از CSS ،HTML و JavaScript است که بدون اضافه کردن کد های زیاد، ساختن وب سایت های بزرگ را آسان میکند . با استفاده از سیستم grid پیشفرض تعبیه شده در این فریمورک محبوب، به راحتی میتوان ستون بندی و layout یک صفحه را طراحی کرد. با استفاده از این فریمورک میتوان به آسانی دکمه ها ، نوار های هدایتی و جداول و ... را استایل دهی کرد.

شروع کار با بوت استرپ به سادگی اضافه کردن چند ارجاع فایل CSS و JavaScript به صفحه است.

 

 

مثالی از بوت استرپ :

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
      <p>Ut enim ad..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
      <p>Ut enim ad..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3> 
      <p>Lorem ipsum dolor..</p>
      <p>Ut enim ad..</p>
    </div>
  </div>
خودتان امتحان کنید

مزیت های استفاده از Bootstrap عبارت اند از :

استفاده ی آسان

استفاده از Bootstrap بسیار آسان و سریع است. بوت استرپ همچنین بسیار قابل انطباق است و شما میتوانید از آن به همراه CSS ، یا LESS و یا Sass استفاده کنید.

واکنش گرایی

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

سرعت توسعه

یک از از مزیت های مهم استفاده از Bootstrap سرعت توسعه است. به جای کد نویسی از صفر، Bootstrap به شما اجازه میدهد از کد های آماده موجود در این فریمورک استفاده کنید.

مدرس دوره

حمید رضا ملکی

208 مقاله

حمید رضا ملکی هستم فارغ التحصیل رشته ی مهندسی نرم افزار و موسس سایت لرن سورس. از زمان ورود به دانشگاه یادگیری حرفه ای برنامه نویسی را شروع کردم و الان چندین سال است در این زمینه فعالم. همیشه ایده ی داشتن یک سایت دوره محور رو در ذهن داشتم که الان با لرن سورس فکر میکنم تا حدودی به اون ایده نزدیک شده ام.

دیدگاه ها
Mhmd مرادی پنجشنبه ۱۹ اردیبهشت ۱۳۹۸

ببخشید یه سوال دیگه اینکه اعمال این کد های بوت استرپ نیاز به اینترنت داره؟

حمید رضا ملکی پنجشنبه ۱۹ اردیبهشت ۱۳۹۸

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

Mhmd مرادی پنجشنبه ۱۹ اردیبهشت ۱۳۹۸

ببخشید راجع به کدهایی که در مورد بوت اسرپ گذاشتید سوال داشتم کل کد ها رو باید بنویسم تو سایتم تا کاملا واکنش گرا بشه یعنی به هر دستگاهی واکنش نشون بده ؟ متشکر از مطالب سایتتون لذت بردم

حمید رضا ملکی پنجشنبه ۱۹ اردیبهشت ۱۳۹۸

سلام. منظور شما را درست متوجه نشدم. ببینید بوت استرپ یک فریمورک هست که باید از سیستم گرید اون برای واکنش گرا بودن ستون های سایتتون استفاده کنید. علاوه بر این کلی کامپوننت داره که میتونید از اون ها استفاده کنید و اگه نیازش ندارید ازش صرف نظر کنید. فعلا یادگیری grid را در دستور کار قرار بدید.

نرگس شاکر چهار شنبه ۱۸ اردیبهشت ۱۳۹۸

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

حمید رضا ملکی پنجشنبه ۱۹ اردیبهشت ۱۳۹۸

سلام. در برنامه دارم این مورد را.

akbar asbahi سه شنبه ۱۶ بهمن ۱۳۹۷

سلام استاد خسته نباشید ببخشید بوت استرپ پروژه درست میکنید ممنون میشم

حمید رضا ملکی سه شنبه ۱۶ بهمن ۱۳۹۷

سلام. در حال حاضر فرصتش را ندارم.

محمد سه شنبه ۱۰ مهر ۱۳۹۷

سلام - تشکر از آموزش های عالی شما سی شارپ پیشرفته هم مقاله بزارید ممنون

حمید رضا ملکی چهار شنبه ۱۱ مهر ۱۳۹۷

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

ali armin دوشنبه ۲۵ تیر ۱۳۹۷

سلام . تبریک میگم به خاطر این سایت خیلی ساده، زیبا و پرکاربردتون. میخواستم بپرسم کی اموزش CSharp تکمیل میشه؟ با تشکر از زحماتتون.

حمید رضا ملکی دوشنبه ۲۵ تیر ۱۳۹۷

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

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید