به آموزشگاه بیاموز خوش آمدید!

سبد خرید (0)

معرفی بوت استرپ

معرفی Bootstrap

Wiki

Bootstrap 3

بوت استرپ (Bootstrap) یکی از محبوب ترین فریم ورک های HTML و css و javascript است.

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

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

هم اکنون یادگیری بوت استرپ را آغاز نمایید!


یادگیری Bootstrap با استفاده از مثال های "خودتان امتحان کنید"

Wiki

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

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

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

<div class="container">
  <div class="jumbotron">
    <h1>اولین صفحه ی بوتسترپ من</h1>
    <p>این صفحه ی واکنش گرا را تغییر اندازه دهید تا نتیجه را ببینید</p>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>...برنامه نویسی رایانه،در فرهنگ واژه ی غیر متخصصین ممکن است به تمام</p>
      <p>...با این همه برنامه نویسی تنها بخشی از فرایند توسعه ی نرم افزار </p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>...برنامه نویسی رایانه،در فرهنگ واژه ی غیر متخصصین ممکن است به تمام</p>
      <p>...با این همه برنامه نویسی تنها بخشی از فرایند توسعه ی نرم افزار</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>...برنامه نویسی رایانه،در فرهنگ واژه ی غیر متخصصین ممکن است به تمام </p>
      <p>...با این همه برنامه نویسی تنها بخشی از فرایند توسعه ی نرم افزار </p>
    </div>
  </div>
</div>

خودتان امتحان کنید »

بر روی دکمه ی "خودتان امتحان کنید" کلیک کنید تا نتیجه را مشاهده نمایید.


مرجع کلاس های بوت استرپ در سایت بیاموز

Wiki

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


فیلم آموزش بوت استرپ

Wiki

در ویدئوی زیر می توانید بصورت رایگان درس اول فیلم آموزش بوت استرپ را مشاهده نمایید:

 

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


دیدگاه‌ها  

+3 # الهام69 1395-12-11 12:56
سلام و خسته نباشید
یک سوال داشتم ! زمانیکه در یک صفحه میخواهم یکی از مثال های Bootstrap رو تست کنم بطور صحیح خرجی نمایش داده می شود، اما بار دوم که میخواهم یک مثال دیگر از بوتسترپ رو بنویسم در همان صفحه، با اینکه مثال اول رو پاک میکنم و با مثال دوم جایگزین می کنم ولی همون مثال اول رو اجرا میکنه. مجبور میشم یکبار نرم افزار و ببندم و باز کنم تا برنامه جدید رو اجرا کنه.
ممنون میشم راهنمایی کنید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1395-12-11 13:24
سلام این مشکل بخاطر Cache شدن اطلاعات در مرورگر اتفاق می افته و راه حل، استفاده از CTRL+F5 است.
کلید ترکیبی مذکور باعث می شود که مرورگر از حافظه Cache صرفنظر کرده و اطلاعات رو مجدد بارگذاری کند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # mohadeseh 1395-12-08 20:20
سلام میخواستم بدونم ایا این اموزش بوت استارپ 3 هست؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1395-12-08 22:48
سلام. بله این آموزش، مربوط به بوت استرپ 3 هست.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # kitana 1395-11-04 21:16
ممنون از سایت و آموزش های خوبتون....واقعا خیلی به من کمک کرده.خسته نباشید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # ma.kh 1395-11-03 16:45
برا سایز تبلت چرا بهم میریزه همه چیز؟؟
من یه سایت نوشتم تو سایز موبایل خوبه و حتی سایز md ولی تبلت همچیز بهم ریحته میشه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1395-11-04 12:31
شاید کلاس های شبکه بندی بوت استرپ رو اشتباه نوشته باشید. یا شاید بوت استرپ کامل لود نشده باشه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # kitana 1395-11-03 13:36
سلام ببخشید برای آموزش Bootstrap باید حتما کل css رو بلد باشم تا بیام بوسترپ رو یاد بگیرم؟؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1395-11-03 13:53
سلام، بله پیشنیاز آموزش Bootstrap ، یادگیری CSS است. بنابراین قبل از شروع آموزش بوتسترپ، از لینک زیر آموزش CSS را مطالعه فرمایید:
http://beyamooz.com/css-tutorial
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # aaa 1395-09-04 23:19
سلام
در فریم ورک foundition بخشی به نام گذر سریع وجود داشت همین قابلیت در بوت استرپ چگونه است ؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # احسان عباسی 1395-09-05 10:56
سلام
بوت استرپ به خودی خود دارای عبور سریع(joyride) نیست. اما شرکت zurb یک پلاگین ارائه داده که با جی کوئری کار می کنه و شامل دو فایل به نام های joyride-2.1.css و jquery.joyride- 2.1.js است. به نظرم می تونید از این پلاگین در بوت استرپ استفاده کنید. روش کار و لینک دانلود در آدرس زیر قرار دارد:
zurb.com/playground/jquery-joyride-feature-tour-plugin
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # آزی 1395-08-16 10:29
سلام خسته نباشید. وقتی یه برنامه رو با بوتسترپ مینویسیم آیا نیازه که یه فایل css هم در کنارش داشته باشیم؟ چطور اینکارو انجام میدیم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1395-11-03 13:57
سلام، در اکثر موارد نیاز هست که تغییرات دلخواهی در استایل دهی های Bootstrap اعمال نماییم.
بنابراین یک فایل Custom.css به پروژه تان اضافه نمایید و تغییرات را در آن لحاظ فرمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # arsalan 1395-07-26 02:06
سلام جناب آقای مهندس عباسی عزیز
سوال من اینه که در navigation وقتی صفحه کوچیک میشه چرا دکمه ی buttom من باز میشه ولی بسته نمیشه؟اشکال کارم رو پیدا نمیکنم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1395-07-26 12:13
سلام
این موضوع به نظر بنده علت های مختلفی میتونه داشته باشه. شاید فایل bootstrap.min.j s را به کدهای خودتون اضافه نکرده باشید. و یا شاید مشکل از جی کوئری یا نسخه ی مرورگر شما باشه. آیا مرورگر شما بروز هست؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # arsalan 1395-07-26 18:05
خیلی خیلی ممنونم دقیقا همین بود که فرمودین.آدرس js رو به درستی وارد نکرده بودم.مرسی از رسیدگی خیلی سریعتون.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مرتضی نص 1395-04-19 23:18
با سلام
چطور می توانم کدهای css بوت استرپ را در وردپرس اعمال کنم
یا
وردپرس رو با بوت استرپ ریسپانسیو کنیم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1395-11-03 13:57
سلام، از قالبی استفاده کنید که واکنشگرا باشد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1395-04-22 20:46
با سلام.
برای این کار باید ترجیحا یه قالب بسازید.
یا می‌تونید فایل‌های بوت‌استرپ رو در فایل header.php بذارید. بعد از اون کلاسهای بوت استرپ در دسترس خواهند بود و شما می‌تونید از اونها استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # صدف علوی 1395-03-04 13:27
سلام
اگر بخوایم بوت استرپ فارسی بشه


هردوی این استایل هارو باید اضافه کنیم؟
من هردو رو گذاشتم بازم راست چین نیست.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # امیرکیان 1395-03-07 19:25
بعد از اینکه فایل بوتسرپ را اینکلود کردید باید فایل بوتس رپ فارسی را نیز اینکلود بنمایید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+9 # مهرداد صلاحی 1395-03-07 18:48
با سلام.
بوت‌استرپ برای زبان‌های چپ به راست هست و برای زبان‌های راست به چپ مثل فارسی خوب عمل نمیکنه. یعنی استایل‌های آن طوری هست که عناصر سایت ما در زبان‌هایی مثل فارسی به هم می‌ریزه.
برای این کار شما باید علاوه بر استفاده از فایل بوت‌استرپ، فایل بوت‌استرپ فارسی رو هم به پروژه link کنید.
فایل بوت‌استرپ فارسی در اینترنت هست و با یه سرچ ساده می‌تونید گیرش بیارید.

دقت کنید که این فایل باید در کنار بوت‌استرپ معمولی افزوده بشه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # میلاد.پ 1395-01-07 21:57
سلام ، خسته نباشید
پی دی اف آموزش بوتسترپ کی آماده میشه؟یا اصلا این اموزش ها پی دی اف خواهند داشت یا نه؟؟؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1395-01-14 15:24
سلام، ممنون شما هم خسته نباشید
بله فایل PDF آموزش بوتسترپ در حال آماده سازی است و ان شا الله بزودی در اختیار شما قرار خواهد گرفت.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # malih niku 1395-01-29 22:58
برای javascript, php,...هم پی دی اف دارین ؟ برای htmlو css,جوملا دارم می نویسم خیییییلی قت گیره
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1395-01-31 09:29
سلام
برای خرید PDF آموزش های PHP، JavaScript, Bootstrap و ... از سمت راست همین صفحه اقدام فرمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # علی حسینی 1394-11-18 06:41
سلام
خسته نباشید.
ممنون از آموزش،
اگر اجازه بدید میخواستم از دوستانی که در بوت استرپ خبره هستند دعوت به همکاری در یک شرکت معتبر با حقوق مناسب بکنم.
لطفا رزومه خودشون رو به این ایمیل ارسال فرمایند.
[email protected]
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1394-11-18 07:14
با سلام و تشکر.
آیا به صورت دورکاری هم امکان همکاری هست؟؟؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیرکیان 1394-09-29 13:19
یه سوال
من دیدم در یک آموزشی بجای کلاس col lg 4 کلا به جای همه ی اینها از کلاس span4 استفاده میشد
کلاس spanعدد آیا جایگزین تمام کلاس ها با خاصیت های مختلف میشود؟
چی هست این کلاس من که جایی ندیدم ولی کار میکنه ؟!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # مهرداد صلاحی 1394-09-29 21:26
با سلام.
در برخی سایت‌ها با عوض کردن اسم کلاس‌ها، این کار رو انجام می‌دن. ولی در کل منطق همونه!

در یه سایتی که با جوملا ساخته شده بود، من هم این رو دیدم. منطق بوت‌استرپ رو با اسامی دیگه پیاده‌سازی کرده بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیرکیان 1394-10-24 13:50
الان فهمیدم که اون شکل از کلاس مربوط به بوتس رپ 2 بوده نه 3.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # زهرا صوفی 1394-07-05 11:10
سلام
آموزش ساخت قالب رسپانسیو که برای من ارسال میشه بدون فایل pdf ارسال میشه شما نوشتید که پی دی اف داره لطفا راهنمایی کنید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1394-07-05 15:24
سلام
بعد از اینکه پروژه ی رسپانسیو را دانلود کردید. اگر دقت کنید در پوشه ی اصلی Bootstrap دانلود شده، یک فایل با نام learning وجود دارد که شامل دو فایل PDF است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # amirkain 1394-04-12 17:23
یک نکته جالب
در بعضی قسمت ها مانند قسمت بوتسترپ سایت شما؛هر کسی میتواند نظر دهد ولی در بعضی از قسمت ها مانند php فقط کاربران میتوانند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # احسان عباسی 1394-04-12 19:59
به تنظیمات سایت مربوط میشه. به سادگی میشه این دسترسی رو تنظیم کرد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # مهدی ربانی 1394-02-02 10:42
دمتون گرم. خیلی کارتون درسته.
راستش من برای آموزش html و css کل اینترنت رو گشتم (البته فقط سایت های فارسی) و هرچی آموزش بود رو دیدم ولی هرکدوم یک مشکلی داشتند. بعضی قدیمی بودند. بعضی کامل نبودند. بعضی استاندارد نبودند و ...
سایت شما به نظرم چون ترجمه ی w3schools هست خیلی استاندارد و خوب هست. فقط نمی دانم چرا رتبه ی شما در موتور های جستجو اول نیست!؟
به هر حال تشکر می کنم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+10 # امیر پهلوان صادق 1394-02-03 09:30
دلیل اینکه کلید واژه "آموزش Bootstrap" صفحه اول گوگل نیست، این است که این آموزش اخیراً توسط آقای عباسی که یکی از مدیران سایت هستند، ترجمه شده ...! و ایندکس شدن آموزش ها زمان بر خواهد بود...!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # احسان عباسی 1394-02-02 12:29
دوست عزیز، از حسن اعتماد و انتخاب شما متشکریم .
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # farshadroozbahani 1394-01-31 07:48
با عرض سلام و خسته نباشید بابت وبسایت بسیار کاربردی که دارید
من طراح وب هستم (سمت کلاینت) الان بوتسترپ خیلی رو بورس هستش اگه بتونید آموزش بوتسترپ
رو هم بزارید خیلی عالی میشه ، لازم به ذکره که توی سایت w3school هم جدیدا bootstrap
رو آموزش داده
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # احسان عباسی 1394-01-31 08:53
با سلام
آموزش های بوتسترپ هم اکنون آماده هستند و می توانید آنها را مطالعه نمایید.
همچنین این آموزش های بوتسترپ، از سایت بسیار موفق w3schools ترجمه شده اند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # وحید_ف 1394-06-16 14:09
سلام ...خسته نباشید ..ممنون از اموزش های خوبتون .... من تقریبا چیزی از طراحی وب نمی دونستم ...اما تقریبا تو یه ماه کلی مطلب مفید از سایت شما یاد گرفتم .... خواهشی که دارم اینه میشه در مورد فریم ورک Foundation هم اموزشی تهیه کنید
خیلی ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-09-11 20:28
سلام . آموزش فریم ورک Foundation در دستور کار تیم بیاموز قرار دارد و به زودی در دست ترجمه و تحلیل قرار خواهد گرفت و برای عموم منتشر خواهد شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی Bootstrap

بستن
مدرس:

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

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!