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