آموزش کامل فریم ورک بوت استرپ 3 برای طراحی صفحات ریسپانسیو
بوت استرپ یک فریم ورک سمت کلاینت است که برای ساخت صفحات ریسپانسیو به کار می رود. بعد از پدید آمدن بوت استرپ سرعت طراحی صفحات Responisve به شدت افزایش یافت و به جرات می توان گفت boostrap محبوب ترین و پرکابردترین و بهترین روش برای ساخت صفحات ریسپانسیو است
- 6/3/1398 22/5/1400
جلسه اول - مقدمه آموزش بوت استرپ
بوت استرپ یک فریم ورک سمت کلاینت است که برای ساخت صفحات ریسپانسیو به کار می رود. بعد از پدید آمدن بوت استرپ سرعت طراحی صفحات Responisve به شدت افزایش یافت و به جرات می توان گفت boostrap محبوب ترین و پرکابردترین و بهترین روش برای ساخت صفحات ریسپانسیو است
جلسه دوم - دانلود و راه اندازی بوت استرپ
در این جلسه آموزشی بوت استرپ را از سایت اصلی آن دانلود کرده و با فایل هایی که بوت استرپ در اختیار ما قرار میدهد آشنا می شویم.
جلسه سوم - آموزش گرید بندی بوت استرپ( قالب ریسپانسیو)
در جلسه سوم از دوره آموزشی بوت استرپ 3 به مهمترین مبحث یعنی گرید بندی( همان ریسپانسیو) می پردازیم
جلسه چهارم - ساخت منوی ریسپانسیو (بخش اول)
یکی از چالش هایی که طراحان وب با آن دست و پنجه نرم میکنند، ایجاد کردن یک منوی دراپ دان و ریسپانسیو کردن آن در حالت موبایل و تبلت می باشد. در این ویدئوی آموزشی به طور کامل با ساختن منوی در بوت استرپ 3 آشنا می شویم
جلسه چهارم - ساخت منوی ریسپانسیو (بخش دوم)
جلسه چهارم - ساخت منوی ریسپانسیو (بخش سوم)
جلسه چهارم - ساخت منوی ریسپانسیو (بخش چهارم)
جلسه پنجم - تگ viewport چیست؟
جلسه ششم بوت استرپ - ریسپانسیو کردن تصاویر
جلسه هفتم -ساخت جداول ریسپانسیو در بوت استرپ
جلسه هشتم- آموزش ساخت تب در بوت استرپ 3
جلسه نهم - ساخت اسلایدر تصویر در بوت استرپ
جلسه دهم - کار کردن با فرم ها
- جلسه اول - مقدمه حجم 20 مگابایت
- جلسه دوم - دانلود و نصب بوت استرپ حجم 19 مگابایت
- جلسه سوم - گرید بندی حجم 33 مگابایت
- جلسه چهارم - ایجاد منوی ریسپانسیو حجم 48 مگابایت
- جلسه پنجم - آشنایی با کلاس های مفید حجم 18 مگابایت
- جلسه ششم - کار کردن با تصاویر حجم 63 مگابایت
- جلسه هفتم - ساخت جدول ریسپانسیو حجم 20 مگابایت
- جلسه هشتم - ساخت تب حجم 13 مگابایت
- جلسه نهم - اسلایدر تصاویر حجم 40 مگابایت
- جلسه دهم - فرم ها در بوت استرپ حجم 28 مگابایت
ارسال نظر درباره این موضوع
در حال حاضر خیر و برنامه ای هم برای ضبط ندارم فعلا
سلام. این دوره برای بوت استرپ 3 هست و در کل بوت استرپ هیچ چیز خاصی نداره جز مفهوم گرید بندی که بسیار بسیار مهم هست. مابقی چیزها کپی پیست هست. حتی نیاز نیست اسم کلاس هاش رو حفظ باشید..
الان قصد دارم که بوت استرپ 4 رو ضبط کنم که خیلی کامل تر شده. فقط شما پیشنهاد میکنم حتما این دوره رو ببینید. چون اگه اینم بلد باشید بوت استرپ 4 رو راحت تر درک میکنید
سلام دوست عزیز.. دقیقا مشکل تدریس کجاس؟ چه جاهایی براتون قابل فهم نبود؟
از طریق سایت flaticon.com میتونید این کارو انجام بدید
به طور کلی قالب های آماده بوت استرپ رو شما میتونید تغییر بدید. ولی بهترین کار این هست خودتون کد نویسی کنید. با توجه به اینکه میگید برای بیان قالب میزنید باید بر اساس امکانات بیان قالب رو پیاده سازی کنید. معمولا قالب های آماده به کار شما نمیان. import کردن معنی نداره. شما میتونید کدهای html اون قالب ها رو توی قالب های خودتون استفاده کنید. در صورتی که سی اس اس اختصاصی هم نوشته باشن که باید اون هارو هم کپی کنید
سلام فایل های rtl رو باید به صورت جداگانه دانلود کنید. اون فایل style.css هم فایلی بوده که خودم ایجادش کردم
$("body").on('click', '.toggle-password', function() { $(this).toggleClass("fa-eye fa-eye-slash"); var input = $("#pass_log_id"); if (input.attr("type") === "password") { input.attr("type", "text"); } else { input.attr("type", "password"); } });
برای این کار باید کمی جی کوئری بلد باشید.. بلد هستید؟
برای انجام این مدل از کارها باید با کد نویسی جی کوئری هم آشنا باشید . یه جورایی میتونم بگم html , css خالی یاد گرفتن کافی نیست و حتما جی کوئری هم آموزش ببینید
آیا به input ها به صورت دستی width دادین؟
سورس کد خودتون رو برای بررسی بهتر برام آپلود کنید و بفرستید تا تست کنم
همونطور که گفتم به Input شما به صورتی دستی width دادی اونم به پیکسل
نباید اینجوری باشه خط 3334 توی فایل سی اس اس رو ویرایش کن و width:100% بزن جای px
سلام. متوجه نشدم. یعنی چی؟
سلام. اگر از hover استفاده میکنید نیازی نیست که از جی کوئری استفاده بشه. توی خود سی اس اس میتونید این کارو انجام بدید و به راحتی هم توی موبایل کار میکنه دستورش به این صورت میشه
.menu li:hover >ul{
}
سلام. بله . به طور کلی فرم ها برای انتقال اطلاعات از کلاینت به سرور استفاده می شود
سلام از دستور زیر استفاده کنید در فایل سی اس اس
@media (min-width: 768px) and (max-width: 1000px) { .collapse { display: none !important; } }
سلام. زمانی که من داشتم این آموزش هارو ضبط میکردم بوت استرپ 4 خیلی فراگیر نشده بود. تصمیم گرفتم کلا توی جلسات بعدی یه پکیج بوت استرپ 4 رو ضبط کنم
سلام. انشالله بعد از عید آموزش های جدید روی سایت قرار خواهد گرفت
منظورتون اینه مثلا یک سایت از یک فونتی استفاده کرده شما فونت های اون سایت رو استفاده کنید؟
به طور کلی نمیشه توی کامنت این مورد رو توضیح داد باید براش یه فیلم اموزشی ضبط کنم
با سلام. در حال حاضر همین قسمت ها ضبط شده. فیلم آموزشی بعدی به صورت عملی و 0 تا صد یک قالب پیاده سازی میشه. البته قبلش باید بوت استرپ 4 رو آموزش بدم که پیش نیاز پروژه عملی بشه
فعلا توی اولویت ضبط آموزش های فتوشاپ رو دارم چون به خیلی ها قول دادم فتوشاپ رو ضبط کنم بعد از اون میرم سراغ ضبط بوت استرپ. تقریبا فکر میکنم اوایل دی ماه بتونم بوت استرپ رو استارت بزنم برای ضبط فیلم آموزشی
سلام. با تشکر از اطلاع رسانی شما لینک دانلود اصلاح شد
سلام. بله مبحث گرید گرید بندی و ریسپانسیو به طور کامل توضیح داده شده
سلام چه فونتی مد نظرتون هست؟ فونت آیکن میخواید استفاده کنید؟
برای دانلود فونت صمیم میتونید از این لینک استفاده کنید www.rastikerdar.github.io/samim-font
برای اینکه بتونم بهتر شمارو راهنمایی کنم کل سورس پروژه رو یه جایی آپلود کنید و لینک دانلودش رو در ادامه همین نظر برام قرار بدید تا بررسی کنم.