آموزش بوت استرپ
معرفی Bootstrap
بوت استرپ (Bootstrap) یکی از محبوب ترین فریم ورک های HTML و css و javascript است.
با استفاده از بوت استرپ می توانید سایت های واکنش گرا و پاسخ گرا به موبایل ایجاد نمایید.
بوت استرپ کاملا رایگان است و می توانید آن را دانلود کرده و استفاده کنید.
هم اکنون یادگیری بوت استرپ را آغاز نمایید!
یادگیری Bootstrap با استفاده از مثال های "خودتان امتحان کنید"
در این سری آموزش ها، قصد داریم تا با استفاده از صدها مثال، بوت استرپ را به شما آموزش دهیم.
به وسیله ی ادیتور آنلاین ما، شما می توانید کدهای بوت استرپ را ویرایش کنید و سپس با فشردن یک دکمه، نتیجه را مشاهده کنید.
یک مثال از بوت استرپ
<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>
خودتان امتحان کنید »
بر روی دکمه ی "خودتان امتحان کنید" کلیک کنید تا نتیجه را مشاهده نمایید.
مرجع کلاس های بوت استرپ در سایت بیاموز
شما می توانید در سایت بیاموز، مرجعی کامل از تمام کلاس های بوت استرپ را مشاهده کنید. لیست این مراجع در زیر آورده شده است:
- کلاس های تایپوگرافی در بوت استرپ
- دکمه ها در بوت استرپ
- فرم ها در بوت استرپ
- کلاس های helper در بوت استرپ
- عکس ها در بوت استرپ
- جدول ها در بوت استرپ
- انواع آیکن ها در بوت استرپ
- منوی کشویی در بوت استرپ
- کلاس های nav در بوت استرپ
- پلاگین collapse در بوت استرپ
آموزش تصویری مطلب بالا (فیلم آموزش بوت استرپ) |
---|
درس شماره 1 (مقدمه آموزش بوت استرپ) زمان فیلم: 14:12 |
خرید و دانلود مستقیم فیلم آموزش بوت استرپ- حجم دانلود 2.32 گیگابایت (کلیک کنید +) |
- نوشته شده توسط احسان عباسی
- بازدید: 134294
دیدگاهها
سلام خسته نباشید عالی بود.
سلام
درباره اسلایدر یا همون carousel ، چطور میتونم اندازه هاش رو تغییر بدم؟ وقتی استایل میزنم تغییری نمیکنه :(
ممنون میشم کمکم کنید
با سلام و تبریک بابت آموزشهای خوبتون
سلام و عرض خسته نباشید به مهندسین خوب سایت بیاموز خدا قوت عزیزان من میخواستم بدونم کاربرد aside , article در html چیست من متوجه نمیشم کاربرد آن چیه ؟
با سلام و خسته نباشید.
میخاستم بپرسم که چطور میشه هدر سایت رو در همه صفحات سایت اجرا کرد، بدون اینکه بخواهیم کدهای هدر سایت رو در همه صفحات دیگر قرار دهیم؟؟ یعنی هر صفحه ای که باز می کنیم نخواهیم دوباره همه کدهای هدر سایت رو توش بنویسیم؟! آیا ممکنه ؟؟چجوری؟؟
با تشکر از همتون
سلام. ممنون.
تنها راهی که به نظرم می رسه اینه که کدها رو در داخل یک فایل php قرار دهید و اونها(هدر) رو به هر صفحه ای می خواهید include کنید.
سلام
عالی بود.
سلام و خسته نباشید
یک سوال داشتم ! زمانیکه در یک صفحه میخواهم یکی از مثال های Bootstrap رو تست کنم بطور صحیح خرجی نمایش داده می شود، اما بار دوم که میخواهم یک مثال دیگر از بوتسترپ رو بنویسم در همان صفحه، با اینکه مثال اول رو پاک میکنم و با مثال دوم جایگزین می کنم ولی همون مثال اول رو اجرا میکنه. مجبور میشم یکبار نرم افزار و ببندم و باز کنم تا برنامه جدید رو اجرا کنه.
ممنون میشم راهنمایی کنید
سلام این مشکل بخاطر Cache شدن اطلاعات در مرورگر اتفاق می افته و راه حل، استفاده از CTRL+F5 است.
کلید ترکیبی مذکور باعث می شود که مرورگر از حافظه Cache صرفنظر کرده و اطلاعات رو مجدد بارگذاری کند.
سلام میخواستم بدونم ایا این اموزش بوت استارپ 3 هست؟
سلام. بله این آموزش، مربوط به بوت استرپ 3 هست.
ممنون از سایت و آموزش های خوبتون....واقعا خیلی به من کمک کرده.خسته نباشید.
برا سایز تبلت چرا بهم میریزه همه چیز؟؟
من یه سایت نوشتم تو سایز موبایل خوبه و حتی سایز md ولی تبلت همچیز بهم ریحته میشه
شاید کلاس های شبکه بندی بوت استرپ رو اشتباه نوشته باشید. یا شاید بوت استرپ کامل لود نشده باشه.
سلام ببخشید برای آموزش Bootstrap باید حتما کل css رو بلد باشم تا بیام بوسترپ رو یاد بگیرم؟؟
سلام، بله پیشنیاز آموزش Bootstrap ، یادگیری CSS است. بنابراین قبل از شروع آموزش بوتسترپ، از لینک زیر آموزش CSS را مطالعه فرمایید:
beyamooz.com/css-tutorial
سلام
در فریم ورک foundition بخشی به نام گذر سریع وجود داشت همین قابلیت در بوت استرپ چگونه است ؟
سلام
بوت استرپ به خودی خود دارای عبور سریع(joyride) نیست. اما شرکت zurb یک پلاگین ارائه داده که با جی کوئری کار می کنه و شامل دو فایل به نام های joyride-2.1.css و jquery.joyride- 2.1.js است. به نظرم می تونید از این پلاگین در بوت استرپ استفاده کنید. روش کار و لینک دانلود در آدرس زیر قرار دارد:
zurb.com/playground/jquery-joyride-feature-tour-plugin
سلام خسته نباشید. وقتی یه برنامه رو با بوتسترپ مینویسیم آیا نیازه که یه فایل css هم در کنارش داشته باشیم؟ چطور اینکارو انجام میدیم؟
سلام، در اکثر موارد نیاز هست که تغییرات دلخواهی در استایل دهی های Bootstrap اعمال نماییم.
بنابراین یک فایل Custom.css به پروژه تان اضافه نمایید و تغییرات را در آن لحاظ فرمایید.
سلام جناب آقای مهندس عباسی عزیز
سوال من اینه که در navigation وقتی صفحه کوچیک میشه چرا دکمه ی buttom من باز میشه ولی بسته نمیشه؟اشکال کارم رو پیدا نمیکنم
سلام
این موضوع به نظر بنده علت های مختلفی میتونه داشته باشه. شاید فایل bootstrap.min.j s را به کدهای خودتون اضافه نکرده باشید. و یا شاید مشکل از جی کوئری یا نسخه ی مرورگر شما باشه. آیا مرورگر شما بروز هست؟
خیلی خیلی ممنونم دقیقا همین بود که فرمودین.آدرس js رو به درستی وارد نکرده بودم.مرسی از رسیدگی خیلی سریعتون.
با سلام
چطور می توانم کدهای css بوت استرپ را در وردپرس اعمال کنم
یا
وردپرس رو با بوت استرپ ریسپانسیو کنیم
سلام، از قالبی استفاده کنید که واکنشگرا باشد.
با سلام.
برای این کار باید ترجیحا یه قالب بسازید.
یا میتونید فایلهای بوتاسترپ رو در فایل header.php بذارید. بعد از اون کلاسهای بوت استرپ در دسترس خواهند بود و شما میتونید از اونها استفاده کنید.
سلام
اگر بخوایم بوت استرپ فارسی بشه
هردوی این استایل هارو باید اضافه کنیم؟
من هردو رو گذاشتم بازم راست چین نیست.
بعد از اینکه فایل بوتسرپ را اینکلود کردید باید فایل بوتس رپ فارسی را نیز اینکلود بنمایید
با سلام.
بوتاسترپ برای زبانهای چپ به راست هست و برای زبانهای راست به چپ مثل فارسی خوب عمل نمیکنه. یعنی استایلهای آن طوری هست که عناصر سایت ما در زبانهایی مثل فارسی به هم میریزه.
برای این کار شما باید علاوه بر استفاده از فایل بوتاسترپ، فایل بوتاسترپ فارسی رو هم به پروژه link کنید.
فایل بوتاسترپ فارسی در اینترنت هست و با یه سرچ ساده میتونید گیرش بیارید.
دقت کنید که این فایل باید در کنار بوتاسترپ معمولی افزوده بشه.
سلام ، خسته نباشید
پی دی اف آموزش بوتسترپ کی آماده میشه؟یا اصلا این اموزش ها پی دی اف خواهند داشت یا نه؟؟؟
سلام، ممنون شما هم خسته نباشید
بله فایل PDF آموزش بوتسترپ در حال آماده سازی است و ان شا الله بزودی در اختیار شما قرار خواهد گرفت.
برای javascript, php,...هم پی دی اف دارین ؟ برای htmlو css,جوملا دارم می نویسم خیییییلی قت گیره
سلام
برای خرید PDF آموزش های PHP، JavaScript, Bootstrap و ... از سمت راست همین صفحه اقدام فرمایید.
سلام
خسته نباشید.
ممنون از آموزش،
اگر اجازه بدید میخواستم از دوستانی که در بوت استرپ خبره هستند دعوت به همکاری در یک شرکت معتبر با حقوق مناسب بکنم.
لطفا رزومه خودشون رو به این ایمیل ارسال فرمایند.
[email protected]
با سلام و تشکر.
آیا به صورت دورکاری هم امکان همکاری هست؟؟؟
یه سوال
من دیدم در یک آموزشی بجای کلاس col lg 4 کلا به جای همه ی اینها از کلاس span4 استفاده میشد
کلاس spanعدد آیا جایگزین تمام کلاس ها با خاصیت های مختلف میشود؟
چی هست این کلاس من که جایی ندیدم ولی کار میکنه ؟!
با سلام.
در برخی سایتها با عوض کردن اسم کلاسها، این کار رو انجام میدن. ولی در کل منطق همونه!
در یه سایتی که با جوملا ساخته شده بود، من هم این رو دیدم. منطق بوتاسترپ رو با اسامی دیگه پیادهسازی کرده بود.
الان فهمیدم که اون شکل از کلاس مربوط به بوتس رپ 2 بوده نه 3.
سلام
آموزش ساخت قالب رسپانسیو که برای من ارسال میشه بدون فایل pdf ارسال میشه شما نوشتید که پی دی اف داره لطفا راهنمایی کنید
سلام
بعد از اینکه پروژه ی رسپانسیو را دانلود کردید. اگر دقت کنید در پوشه ی اصلی Bootstrap دانلود شده، یک فایل با نام learning وجود دارد که شامل دو فایل PDF است.
یک نکته جالب
در بعضی قسمت ها مانند قسمت بوتسترپ سایت شما؛هر کسی میتواند نظر دهد ولی در بعضی از قسمت ها مانند php فقط کاربران میتوانند.
به تنظیمات سایت مربوط میشه. به سادگی میشه این دسترسی رو تنظیم کرد.
دمتون گرم. خیلی کارتون درسته.
راستش من برای آموزش html و css کل اینترنت رو گشتم (البته فقط سایت های فارسی) و هرچی آموزش بود رو دیدم ولی هرکدوم یک مشکلی داشتند. بعضی قدیمی بودند. بعضی کامل نبودند. بعضی استاندارد نبودند و ...
سایت شما به نظرم چون ترجمه ی w3schools هست خیلی استاندارد و خوب هست. فقط نمی دانم چرا رتبه ی شما در موتور های جستجو اول نیست!؟
به هر حال تشکر می کنم.
دلیل اینکه کلید واژه "آموزش Bootstrap" صفحه اول گوگل نیست، این است که این آموزش اخیراً توسط آقای عباسی که یکی از مدیران سایت هستند، ترجمه شده ...! و ایندکس شدن آموزش ها زمان بر خواهد بود...!
دوست عزیز، از حسن اعتماد و انتخاب شما متشکریم .
با عرض سلام و خسته نباشید بابت وبسایت بسیار کاربردی که دارید
من طراح وب هستم (سمت کلاینت) الان بوتسترپ خیلی رو بورس هستش اگه بتونید آموزش بوتسترپ
رو هم بزارید خیلی عالی میشه ، لازم به ذکره که توی سایت w3school هم جدیدا bootstrap
رو آموزش داده
با سلام
آموزش های بوتسترپ هم اکنون آماده هستند و می توانید آنها را مطالعه نمایید.
همچنین این آموزش های بوتسترپ، از سایت بسیار موفق w3schools ترجمه شده اند.
سلام ...خسته نباشید ..ممنون از اموزش های خوبتون .... من تقریبا چیزی از طراحی وب نمی دونستم ...اما تقریبا تو یه ماه کلی مطلب مفید از سایت شما یاد گرفتم .... خواهشی که دارم اینه میشه در مورد فریم ورک Foundation هم اموزشی تهیه کنید
خیلی ممنون
سلام . آموزش فریم ورک Foundation در دستور کار تیم بیاموز قرار دارد و به زودی در دست ترجمه و تحلیل قرار خواهد گرفت و برای عموم منتشر خواهد شد.