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

سبد خرید (0)

فیلم آموزشی


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

Bootstrap 3

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

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

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

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


مثال های "خودتان امتحان کنید" :

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

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

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

<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>

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

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


مراجع بوتسترپ

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

{nice1}


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

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

 

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


دیدگاه‌ها  

+1 # aaa 1395-09-04 23:19
سلام
در فریم ورک foundition بخشی به نام گذر سریع وجود داشت همین قابلیت در بوت استرپ چگونه است ؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1395-09-05 10:56
سلام
بوت استرپ به خودی خود دارای عبور سریع(joyride) نیست. اما شرکت zurb یک پلاگین ارائه داده که با جی کوئری کار می کنه و شامل دو فایل به نام های joyride-2.1.css و jquery.joyride- 2.1.js است. به نظرم می تونید از این پلاگین در بوت استرپ استفاده کنید. روش کار و لینک دانلود در آدرس زیر قرار دارد:
zurb.com/playground/jquery-joyride-feature-tour-plugin
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # arsalan 1395-07-26 02:06
سلام جناب آقای مهندس عباسی عزیز
سوال من اینه که در navigation وقتی صفحه کوچیک میشه چرا دکمه ی buttom من باز میشه ولی بسته نمیشه؟اشکال کارم رو پیدا نمیکنم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1395-07-26 12:13
سلام
این موضوع به نظر بنده علت های مختلفی میتونه داشته باشه. شاید فایل bootstrap.min.j s را به کدهای خودتون اضافه نکرده باشید. و یا شاید مشکل از جی کوئری یا نسخه ی مرورگر شما باشه. آیا مرورگر شما بروز هست؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # arsalan 1395-07-26 18:05
خیلی خیلی ممنونم دقیقا همین بود که فرمودین.آدرس js رو به درستی وارد نکرده بودم.مرسی از رسیدگی خیلی سریعتون.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # صدف علوی 1395-03-04 13:27
سلام
اگر بخوایم بوت استرپ فارسی بشه


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

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

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