سلام
خب من طی یه دوره بوت استرپ ۳ رو آموزش دادم و دوستان هم خیلی علاقه نشون دادند و تقریبا دوره خوبی بود، ولی همینطور که اطلاع دارید بوت استرپ ۴ منتشر شد (بالاخره !) و خیلی بهتر و بهینه تر شده و خودم به شخصه ورژن ۴ رو خیلی دوست دارم.
البته بوت استرپ ۳ هنوز ساپورت میشه و شما میتونید مستنداتش رو مطالعه کنید (من مستندات آفلاین ورژن ۳ رو در اینجا هم قرار دادم)
یکی از دوستان به اسم امیر مهدی تو یه کامنت نوشته :
بَه بَه کِههه. بوت‌استرپ ۴ اومد نصف کدهاش تغییر کرده. در کل ساختار بوت‌استرپ یه چیز دیگه شده. نصف چیز‌هایی که از دوره‌ی بوت‌استرپ ۳ خوندیم همه رفت به باد. چه جالب! 🙂
در جواب امیر مهدی جان باید بگم نگران نباش 🙂 من تو این پست بوت استرپ ۴ رو برات توضیح میدم 🙂
ورژن جدید از پایه بازنویسی شده ولی تغییرات به نسبت ورژن ۳ به ۴ کلی بوده و کسی که دوره آموزشی بوت استرپ رو دیده باشه با مشاهده ویدیو این پست میتونه از بوت استرپ ۴ استفاده کنه و در کل همون بوت استرپ خودمونه
ویدیوی این جلسه رو از باکس زیر میتونید دانلود کنید :
| لینک دانلود | 42 مگابایت | 24 دقیقه |
در جدول زیر من تغییرات رو براتون لیست کردم :
| کامپوننت | بوت استرپ ۳ | بوت استرپ ۴ |
| تغییرات عمومی | ||
| سورس فایل های css | LESS | SCSS |
| بخش اصلی css | px | rem |
| سایز فونت پیشفرض | 14px | 16px |
| فونت های پیشفرض | Helvetica Neue, Helvetica, Arial, sans-serif | استفاده از فونت سیستم کاربر |
| Grids | ||
| ستون بندی ها | استفاده از ۴ واحد xs, sm, md, lg | استفاده از ۵ واحد xs, sm, md, lg, xl |
| افست ستون ها | از col-*-offset-* استفاده میشد مثل col-md-offset-4 | از offset-*-* استفاده میشه مثل offset-md-4 |
| جدول | ||
| جدول تبره | ندارد | با کلاس table-dark ایجاد میشه |
| استایل سرتیتر جدول | ندارد | با کلاس های thead-light و thead-dark پیاده میشه |
| جدول فشرده | table-condensed | table-sm |
| رسپانسیو | استفاده از کلاس table-responsive در تگ div والد | استفاده از کلاس table-responsive در تگ table |
| فرم ها | ||
| حالت افقی | از کلاس form-horizontal استفاده میشه | ساپورت نمیشه |
| Checkboxes و Radio Buttons | از کلاس های radio و radio-inline و checkbox یا checkbox-inline استفاده میشه | کلاس های form-check و form-check-label و form-check-input و form-check-inline استفاده میشه |
| سایز آبجکت های فرم | با input-lg و input-sm انجام میشه | از کلاس های form-control-lg و form-control-sm استفاده میشه |
| رنگ بندی آبجکت ها | از has-warning استفاده میشه | ساپورت نمیشه |
| فرم سفارشی | ندارد | دارد |
| دکمه / button | ||
| استایل | شامل کلاس های btn-default و btn-info میشه | شامل کلاس های btn-secondary و btn-light و btn-dark میشه |
| دکمه های outline | ندارد | از کلاس های btn-outline-* برای ساخت استفاده میشه |
| سایز دکمه | از کلاس های btn-xs و btn-sm و btn-lg استفاده میشه | شامل کلاس های btn-lg و btn-sm میشه |
| عکس ها | ||
| رسپانسیو | از کلاس img-responsive استفاده میشه | از کلاس img-fluid استفاده میشه |
| جهت تصاویر | از کلاس های pull-right و pull-left و center-block استفاده میشه | از کلاس های m-x-auto و center-block استفاده میشه |
| منوی کشویی / DropDown | ||
| ساختار | در تگ های ul و li پیاده میشه | در تگ های ul و div پیاده میشه |
| سرتیتر | از کلاس dropdown-header در تگ li استفاده میشه | از کلاس dropdown-header در تگ های h1 , h2 و … قابل استفاده است |
| خط تفکیک کننده / divider | از کلاس divider در تگ li استفاده میشه | از کلاس divider در تگ div استفاده میشه |
| غیر فعال کردن آیتم | از کلاس disabled در تگ li استفاده میشه | از کلاس disabled در تگ a استفاده میشه |
| دکمه های گروهی / Button Groups | ||
| Justified | با کلاس btn-group-justified پیاده میشه | ساپورت نمیشه |
| Extra Small | با کلاس btn-group-xs پیاده میشه | ساپورت نمیشه |
| منو / Navbars | ||
| رنگ بندی | از کلاس های navbar-default برای منو روشن و navbar-inverse برای منو تیره استفاده میشه | از کلاس های navbar-light و navbar-dark استفاده میشه |
| جهت منو | از کلاس های navbar-right و navbar-left استفاده میشه | از کلاس mr-auto استفاده میشه |
| فرم در منو | از کلاس navbar-form استفاده میشه | کلاس navbar-form وجود ندارد |
| منو ثابت | از کلاس های navbar-fixed-top و navbar-fixed-bottom استفاده میشه | از کلاس های fixed-top و fixed-bottom استفاده میشه |
| صفحه بندی / Pagination | ||
| ساختار | با افزودن pagination به تگ ul ایجاد میشه | باید کلاس page-item به تگ li و page-link به تگ a اضافه بشه |
| دکمه بعدی / قبلی | با استفاده از کلاس های previous و next پیاده میشه | ساپورت نمیشه |
| گلیف آیکون / Glyphicons | ||
| Glyphicons | دارد | ندارد |
| لیست گروهی / List Groups | ||
| ساختار | از کلاس list-group-item در تگ a استفاده میشه | از کلاس list-group-item-action در تگ a استفاده میشه |
| Collapse | ||
| ساختار | از کلاس in استفاده میشه | از کلاس show استفاده میشه |
| Cards | ||
| ساختار | پشتیبانی نمیشه / نداره | به جای panels, wells و thumbnails در ورژن ۴ استفاده میشود |
| اسلاید / Carousels | ||
| ساختار | از کلاس item استفاده میشه | از کلاس carousel-item استفاده میشه |
خیلی عالی. ممنونم ازتون
فقط آقای شفیعیان ، اون راستچین هایی که برای بوت استرپ 4 گفتید ، برای beta2 یا beta 3 این ورژن از بوت استرپ هستن . آیا مشکلی ایجاد میکنه؟
خاهش
من خودم از اون سورس ها استفاده نمیکنم ، معمولا تو هر پروژه خودم راستچینش میکنم . سخت نیست با rtl کردن direction و right کردن text-align تگ body شروع میشه
سلام چه عجب بالاخره ما شما رو پیدا کردیم…. اموزش های وردپرس رو هم ادامه بده من خیلی جاها آموزش وردپرس دیدم برای دانلود گذاشته بودن ولی چون با آموزش های شما حال میکنم منتظر موندم….
#مخلص
سلام نیما جان
لطف داری عزیز ، باش حتما 🙂
چیشد آقا حسین؟ 40 دقیقه بیشتر وقت نمیگیره ها 🙁 اذیت نکن آموزش های وردپرس رو ادامه بده
بیشتر از ۴۰ دقیقه وقت برای یه ویدیوی آموزشی صرف میشه نیما جان 🙂
باشه چشم ، قسمت بعدی رو همین امشب ضبط میکنم
دم شما گرم 🙂
مرسی حسین جان من طرفدارتم
مرسی
عالی بود
* دوستان پیشنهاد میکنم به بوت استرپ 4 نیاید !
خیلی از گزینه هاش حذف شده و مشکلات زیادی به بار آورده برای مثال تو مرورگر فایرفاکس ، منو کار نمیکنه.
و اینکه مثلا دیگه گزینه هایی مثل hidden-md hidden-sm و… رو نداریم. کار کردن با این ورژن هم خیلی سخت هستش.
همون 3.3.7 خودمون که آقای شفیعیان هم آموزش دادن ، خوبه.
داریم برادر
برو این صفحه
https://v4-alpha.getbootstrap.com/layout/responsive-utilities/
این برای ورژن آلفا 4 هستش
با سلام
وقت به خیر
من با نرم افزار نت بینز برنامه نویسی انجام میدم، وقتی فایل css بوت استرپ 4 رو به پروژه اضافه میکنم تو پارسینگ کامپایل مشکل وجود داره و خطایی با عنوان error parsing file به وجود میاد و به هیچ وجه glyphicon ، carousel و.. لود نمیشه.
لطفا در صورت امکان منو راهنمایی کنید
با تشکر
سلام
من تجربه استفاده از نت بینز رو نداشتم ، ولی بوت استرپ ۴ اصلا گلیف آیکون نداره !
عذر میخوام برای اینکه بوت استرپ 3 بتونه گلیف آیکنای جدید (مثل گلیف آیکن اسلاید) رو بشناسه باید چه کار کرد؟
ممنونم
بجاش میتونید از fontawesome استفاده کنید
سلام و خدا قوت چه عجب… داداش خیلی منتظرت موندیم
به به بوت استرپ 4
بوت استرپ 4 فقط مرورگر فایرفاکس رو جواب می ده رو بقیه مرورگر ها حالت رسپانسیو بودنشو از دست می ده چرا؟
تست کنید. من سایتمو ریختم تو گوشیم تست کردم فقط تو مرورگر فایرفاکس رسپانسیو بود رو بقیه مرورگر ها نبود
سلام
من تست میکنم موردی نداره !!!
عشقی به مولا 😁😉
نوکرتم 🙂
استاد فوق العاده هستی،مراقب خودت باش یه وقت چشم نخوری
سلام آقای شفیعیان خیلی ممنون از آموزش های خوبتون
فقط یه سوال
چرا فایل Bootstrap 4 صدا نداره؟؟؟
سلام
صدا داره ، از کدک ها برای پلی کردن ویدیو استفاده کنید
والا من که هر کاری کردم نتونستم یه فونت جدید اضافه کنم
خسته نباشید خیلی عالیه
آی لاو یوووو
خاهش
من متعلق به همتونم 🙂
شما عزیزید
مخصوصا وقتی میگید من حسین شفیعیان هستم مدیر سایت آقای برررنامه نویس دات نت
اقا ناموسن دمت گرم . من از 0 شروع کردم به طراحی قالب. با دیدن ویدیو های اموزشی شما الان به عنوان web developer توی 2تا شرکت مشغول شدم . فول تایم درحال کارم . خدا خیرت بده . ایشالا یه زن خوب گیرت بیاد. ; – )))
بهزاد عزیز
خیلی خوشحالم که برات مفید بوده ، هر جا هستی موفق باشی
سلام آقای شفیعیان
چرا اکثر برنامه نویس ها از لینوکس و مکینتاژ استفاده می کنند؟!
سلام
چون از ویندوز خوششون نمیاد 🙂
اگه اوضاع مالیشون خوب باشه مک دارن ، اگر نه لینوکس
سلام به اقا حسین گل
فقط میخوام شدیدا تشکر کنم
من معمولا نظر نمیدم تو سایت ها مگر اینکه واقعا از کسی متشکر باشم و یا اینکه به اصطلاح از کسی شاکی باشم خخخخ
بازم ممنون اقا حسین گل…
سلام
خاهش
خوشحالم که مفید بوده 🙂
سلام
مرسی جناب شفیعیان
سیستم Git و Github چیه؟!
گیت یه برنامه برای مدیریت پروژه هست
گیت هاب یه سایت هست که گیت رو به صورت یک سرویس به کاربرانش میده
سلام
مثل همیشه عاااااااااااااااااااااااااااالی
سلام جناب شفیعیان
چرا برای طراحی قالب از فریم ورک استفاده میکنند؟!
مگه برای طراحی قالب از فتوشاپ استفاده نمیکنند و بعد PSD رو به HTML , CSS تبدیل کنند.
سلام خسته نباشيد ممنون از مطالب آموزندتون،ميخواستم بپرسم امكانش هست سايتي كه با bootstrap 3نوشته شده رو به 4تغيير بديم؟سايت روي هاست هست ممكنه بهم بريزه؟
سلام دوست عزیز سایت عالی داری پر از اموزش های کاربردی همین طور داشتم سایتو بررسی می کردم دو تا مشکل توش دیدم گفتم خدمتتون عرض کنم که تصحیح کنید اول این که هنگام ورود به کنترل پنل بجای این که اسم کسی رو که عضو شده بنویسه اسم شما رو یعنی حسین شفیعیان رو نوشته فکر کنم تو داینامیک کردن این قسمت رو از قلم انداختید دوم هم این که اگه سه صفحه ارتاط با ما هم برای سایت درست کنید خیلی خوب میشه ،دیگه لازم نیست کسی مثل من یه دیدگاه بدون هیچ ربطی به موضوع مطلب ارسال کنه 🙂 بازم خسته نباشید بهتون میگم
سلام
مرسی از توجه و نکاتی که فرمودین
قالب جدید در دست طراحیه و بزودی رونمایی میشه و این موارد رو پیاده میکنم
دوباره سلام یاد رفت اینو هم بگم یه کم سئو سایتتون رو درست کنید صد البته رتبه سایتتون تو موتور های جستجو هم بهتر میشه اگه با یاس سئو که رو وردپرستون هست کار کنید خیلی زودتر پیش میرید ،چند تا غلط املایی هم تو دیدگاه قبلی داشتم به بزرگی خودتون ببخشید
سلام وخسته نباشید ممنون از سایت خوبتون
چرا ی سری لینک های خطا میده مثلا مستندات بوت استرپ3
حسین اقای عزیز
یه لطفی کن فایل های بوت استرپ 4 به همراه فارسی شده(بدون مشکل) رو بزار
متشکرم
من آخر این هفته میگردم تو سیستمم دنبال فایل ها و آپلودش میکنم حتما