تغییرات مهم بوت استرپ ۴ که باید بدانید
تغییرات مهم بوت استرپ ۴ که باید بدانید
بوت استرپ برای سالیان متمادی از کتابخانه اجزای front-end استفاده می کرده است. بوت استرپ قبلا، به عنوان توییتر طرح آبی شناخته شده بود. علاوه بر این، بوت استرپ برای اجزای مدولار، طراحی واکنش گرا و رویکردش که اول برای موبایل است، شناخته شده است. ویژگی استفاده آسانِ آن و ظاهر مدرنش، کاربران زیادی به دست آورده است. در عین حال، حتی در GitHub نیز دومین رتبه را دارد. به همین دلیل است که بوت استرپ برای توسعه دهندگان front end، تقریبا اساسی است.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
بهتر و بهتر شدن!
از آنجایی که بوت استرپ یک پروژه متن باز و آزاد است، بسیاری از مشارکت کنندگان، تلاش می کنند تا آن را بهتر کنند. به همین دلیل، بوت استرپ به طور مداوم به منظور پاسخ به نیاز های جامعه در طول سال ها بهبود یافته است.
در نتیجه، اولین نسخه آلفا بوت استرپ ۴ در تاریخ ۱۹ آگوست ۲۰۱۵ منتشر شد، در حالی که نسخه بتا در تاریخ ۱۰ اوت ۲۰۱۷ منتشر شد. در حال حاضر بوت استرپ ۴، در این انتشارش تغییرات مهمی داشته است.
تست کدهای بوت استرپ ۴
دیر یا زود، ممکن است بخواهید برخی از کدهای موجود در این مقاله را آزمایش کنید. نگران نباشید، یک ابزار رایگان آنلاین در دسترس وجود دارد که می توانید برای ساده سازی کارهای خود استفاده کنید: ویرایشگر بوت استرپ ۴ یا Bootstrap 4 Editor، که توسط IT Wonders Web ایجاد شده است. همه چیزی که باید انجام دهید این است که فقط کدها را از این مقاله در ویرایشگر کپی کنید و سپس می توانید نتیجه را بلافاصله دریافت کنید. علاوه بر این، شما حتی می توانید برخی استایل های سفارشی دیگری را با توجه به نیازهای خود اضافه کنید.
تغییرات جدید بوت استرپ ۴
- بدون Glyphicons بیشتر!؟
بله، درست است. پس از همه این ها، هیچ پوشه فونتی در مسیر بوت استرپ ۴ وجود ندارد. اگر می خواهید، خودتان باید آن را دریافت کنید.
احتمالا بسیاری از شما سوالاتی در مورد این حذف Glyphicons داشته اید، اما این کار، دلایل خودش را دارد. اولین دلیل این است که، برخی از مردم هرگز از آن ها استفاده نمی کنند. در مورد دلیل دوم باید گفت که، برخی دیگر از افراد، از تغییرات دیگرِ فونت استفاده می کنند. از آنجا که فونت ها در بوت استرپ ۳ به صورت پیش فرض وجود دارند، باعث می شود که اندازه فایل بزرگتر شود. علاوه بر این موارد، هنوز دلایل بسیار دیگری نیز وجود دارد.
در ادامه، برخی از گزینه های آیکون ها آورده شده است، که اگر بخواهید از آیکون ها استفاده کنید، می توانید در نظر بگیرید.
- Glyphicons
- Octicons
- Font Awesome
- Iconic
- Entypo
- آیا بوت استرپ ۴ پشتیبانی می شود یا نه؟
بوت استرپ ۴ در حال حاضر تنها از مرورگر IE10 + و IOS 7+ (و نسخه های بالاتر آن ها) پشتیبانی می کند. در غیر از این دو حالت، باید از v3 استفاده کرد. علاوه بر این، پشتیبانی رسمی برای مرورگر Lollipop اندروید v5.0 و WebView نیز اضافه شده است. نسخه های پیشین مرورگر اندروید و WebView هنوز غیر رسمی پشتیبانی می شوند.
مهمتر از همه این است که پشتیبانی Bower از نسخه Beta 2 به بعد، حذف شده است! زیرا پیش تر هم منسوخ شناخته شده بود. به عنوان جایگزین، شما می توانید Yarn یا NPM را در نظر بگیرید. برای جزئیات بیشتر اینجا را ببینید.
- بوت استرپ ۴ و واحدها
اول از همه، اندازه فونت گلوبال از ۱۴px به ۱۶px افزایش یافته است. به عنوان تغییر دوم، برای استفاده از پشتیبانی جدیدتر CSS، پیکسل ها برای rems و ems عوض شده اند تا تایپوگرافی واکنش گرا شود و همچنین تغییر اندازه ی عناصر نیز آسان تر شود. واحدهای EM و PM در ایجاد طرح کاملا مقیاس پذیر هستند. (به عنوان مثال: Viewport = اندازه پنجره مرورگر است. عرض viewport 50cm =، ۱vw = 0.5cm)
em = نسبت به اندازه فونت عنصر (۲em به معنی ۲ برابر اندازه فونت فعلی است)
rem = نسبت به اندازه فونت عنصر اصلی
اگرچه واحد اصلی CSS اکنون از rem استفاده می کند، پیکسل ها همچنان برای کوئری های مدیا و رفتار شبکه ای استفاده می شوند، زیرا viewport های دستگاه ها، تحت تاثیر اندازه نوشتار قرار نمی گیرند.
- Sass or Less ؟
بوت استرپ ۴، فایل های سورس CSS را ازLess به Sass تغییر داده است. درنتیجه، با بهره گیری از Libsass، با سرعت بیشتری کامپایل می شود. این بدان معنی است که استایل تم اختصاصی، مانند آنچه که برای حالت Less وجود داشت، وجود ندارد. در عوض، می توانید تم ساخته شده را برای افزودن gradients ، سایه و موارد دیگر، فعال کنید. برای مثال با تغییر دادن متغیرها به صورت: $enable-gradients: true
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// Options // // Quickly modify global styling by enabling or disabling optional features. $enable-caret: true !default; $enable-rounded: true !default; $enable-shadows: false !default; $enable-gradients: false !default; $enable-transitions: true !default; $enable-hover-media-query: false !default; $enable-grid-classes: true !default; $enable-print-styles: true !default; |
البته باید از ویرایش فایل های اصلی بوت استرپ اجتناب کنید. به عنوان مثال، در زیر، روش پیشنهادی برای تغییر پیکربندی آورده شده است. (با ایجاد یک SCSS سفارشی)
1 2 3 4 5 6 7 8 9 10 11 12 13 |
your-project/ ├── scss │ └── custom.scss └── node_modules/ └── bootstrap ├── js └── scss |
- در نهایت، یک کارت! در بوت استرپ ۴
به عنوان یکی از رایج ترین عناصر اینترنت، کارت در بوت استرپ ۴ قابل استفاده است. اساسا، کارت، یک کانال محتوا انعطاف پذیر و قابل گسترش است که دارای گزینه های نمایش قدرتمندی است. Well ها، thumbnail ها و پانل ها با کارت جایگزین شده اند، زیرا کارت ها می توانند هر کاری را که انجام می دهند در بهترین حالت انجام دهند.
مثالی از کارت
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="card"> <div class="card-header"> Featured </div> <div class="card-body"> <h5 class="card-title">Special title treatment</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> |
می توانید این مثال را در ویرایشگر بوت استرپ ۴ کپی کنید و آن را امتحان کنید.
- آیا شما انعطاف پذیر هستید؟
به طور خلاصه، این به معنی فاصله گرفتن از floats و استفاده ی بیشتر از عناصر است.
بوت استرپ ۴، طرح بندی، هم ترازی alignment و اندازه ستون های شبکه، navigation ، عناصر و غیره را با مجموعه ی کاملی از ویژگی های flexbox واکنش گرا، با سرعت زیادی مدیریت می کند. برای پیاده سازی های پیچیده تر، CSS سفارشی ممکن است ضروری باشد. «برگرفته از مستندات بوت استرپ»
انتشار بوت استرپ ۴ تا حد زیادی با flexbox گره خورده است. این یک ویژگی قدرتمند است زیرا می تواند ساختار طرح بندی واکنش گرای انعطاف پذیر را بدون نیاز به استفاده از floats یا موقعیت یابی به راحتی انجام دهد. این روش به عنوان یک مدل یک بعدی به جای دو بعدی مثل Grid طراحی شده است. این کار، توزیع فضایی بین آیتم ها را در یک رابط کاربری و قابلیت همگام سازی قدرتمند، ارائه می دهد.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="d-flex justify-content-center mt-3"> <div class="p-2">Flex item</div> <div class="p-2">Flex item</div> <div class="p-2">Flex item</div> </div> <style> div{ border:1px teal solid; } </style> |
بوت استرپ ۴، همچنین، این عناصر را با flexbox بازنویسی کرده است:
- button groups
- list groups
- modal
- navs
- navbar
- pagination
- card
- شبکه در بوت استرپ ۴، یک عضو خانوادگی جدید دارد
بیایید به عضو جدید xl خوش آمد بگوییم! بوت استرپ ۴ در حال حاضر دارای xs، sm، md، lg و xl است. بنابراین، هر ردیف، یک سطح، بهبود یافته است. (به عنوان مثال: .col-md-6 در ورژن ۳، به .col-lg-6 در بوت استرپ ۴، تغییر یافته است)
سیستم گرید نیز به flexbox منتقل شده است. علاوه بر این، با توجه به عضو جدید xl که به خانواده پیوسته است، کلاس های شبکهxs نیازی به infix ندارند تا به درستی نشان دهند که شروع به اعمال استایل در min-width: 0 کرده اند. (به عنوان مثال: به جای .col-xs-6، از .col-6 استفاده کنید.)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// Extra small devices (portrait phones, less than 576px) // No media query since this is the default in Bootstrap // Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) { ... } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... } |
- آیا شما راه اندازی مجدد را انجام داده اید؟
هنوز هم به یاد داشته باشید که هر زمانی که شما خدمات مشتری customer service را فراخوانی کردید، و از شما خواسته شد «آیا سعی کرده اید دستگاه خود را راه اندازی مجدد کنید؟»، راه اندازی مجدد در واقع می تواند بسیاری از مسائل را حل کند و در اینجا چگونگی راه اندازی بوت استرپ آورده شده است.
به عنوان مثال، برخی از سبک های جدول برای یک خط پایه ساده تر، راه اندازی مجدد می شود.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
// // Tables // table { border-collapse: collapse; // Prevent double borders } caption { padding-top: $table-cell-padding; padding-bottom: $table-cell-padding; color: $text-muted; text-align: left; caption-side: bottom; } th { // Matches default `<td>` alignment by inheriting from the `<body>`, or the // closest parent with a set `text-align`. text-align: inherit; } |
- در بوت استرپ ۴، نام کلاس تغییر می کند!
نام بسیاری از کلاس ها در بوت استرپ ۴ تغییر کرده است. در حالی که بسیاری از آن ها تغییر نام داشته اند، هم چنین تعدادی از آن ها در بوت استرپ ۴ حذف شده اند.
در انتها، امیدواریم خواندن این مقاله برای شما مفید و لذت بخش بوده باشد و به خوبی با تغییرات بوت استرپ ۴ آشنا شده باشید و با در نظر گرفتن این تغییرات، استفاده بهتری از بوت استرپ ۴ و حتی نسخه قبلی داشته باشید و وب سایت های بهتری را آسان تر و جذاب تر، طراحی کنید.