چهارشنبه , مهر ۴ ۱۳۹۷
خانه / مقالات / برنامه نویسی / web developer / Front End / ویژگی های بوتسترپ 4
بوتسترپ 4

ویژگی های بوتسترپ 4

بوتسترپ 4 – در این مقاله قصد دارم ویژگی جدید و تغییراتی که در بوتسترپ 4 اضافه شده رو بصورت خیلی خلاصه معرفی کنم.

پشتیبانی مرورگرها از بوتسترپ 4

بوتسترپ 4 توسط  IE8, IE9, و iOS 6 پشتیبانی نمی شود .البته یکسری کتابخانه های در گیت هاب وجود دارد که امکان پشتیبانی ورژن های پایان مرورگرها را برای بوتسترپ امکان پذیر می سازد. این ورژن در حال حاضر بروی  IE10 ، iOS 7 و Android v5.0 به طور کامل قابل پشتیبانی است و همچنین در نسخه های نهایی مرورگرهای مطرح مثل کروم و فیرفاکس به راحتی پشتیبانی می شود.

تغییرات کلی ورژن 4 بوتسترپ

  • فعال بودن Flexbox بصورت پیش فرض
  • تغییر از less به sass در سورس کنترل css
  • تغییر واحد اصلی استفاده شده در css از px به rem
  • فونت سایز پیش فرض از 14px به 16px تغییر کرد
  • اصلاح سطوح گرید بندی و اضافه شدن سطح پنجم در گرید بندی
  • تم اختیاری جداگانه با قابلیت کانفیگ از طریق فایل sass
  •  استفاده از یک سری از اسکریپت به منظور ساخت سیستم npm بجای Grunt
  • حالت غیر فعال کردن رسپانسیو در این ورژن قابل استفاده نیست.
  • اضافه شدن ده ها کلاس css جدید

سیستم گرید بندی

دو تغییر اساسی در سیستم گرید بندی این ورژن اعمال شده از جمله استفاده از flexbox و اضافه شدن سطح xl در زیر مشخصات هر سطح در این نسخه بوتسترپ آورده شده است.

  • col-xs برای صفحات نمایش بسیار کوچک کمتر از ۳۴em
  • col-sm برای صفحات نمایش کوچک با سایز ۳۴em و بالاتر
  • col-md برای صفحات نمایش سایز میانه  ۴۸em  و بالاتر
  • col-lg برای صفحات نمایش بزرگ ۶۲em و بالاتر
  • col-xl برای  صفحات نمایش بسیار بزرگ ۷۵em و بالاتر

اضافه شدن کلاس جدید Cards

در نسخه جدید panel و thumnails و wells حذف شده و با cards جایگزین شده است. این کامپوننت میتواند محتوی متفاوتی مانند لینک , متن, تصویر , هدر و فوتر و …. را رنگ پس زمینه دلخواه نمایش دهد. برای فعال سازی cards باید کلاس های .card  و .card-block را به قسمت مورد نظر اضافه کنید.. همچنین کلاس های دیگری هم هستند که میتوانید در .card از آن استفاده کنید مانند :

  • .card-title  نمایش عنوان
  • .card-text نمایش متن
  • .card-header نمایش سربرگ
  • .card-footer نمایش فوتر
<div class="card">
        <!-- Card Header -->

        <div class="card-header">
            Card Header
        </div>

        <div class="card-block">
            <!-- Card Title -->

            <h4 class="card-title">This is the Card Title</h4><!-- Image -->
            <img alt="" src="http://goo.gl/oxHSMr" width="280"> 
            <!-- Card Text -->

            <p class="card-text">These are card text. See? They are
            awesome!</p>
        </div><!-- Card Footer -->

        <div class="card-footer">
            Card Footer
        </div>
</div>

حذف Glyphicons

حذف Glyphicons که بصورت پیش فرض در بوتسترپ 3 وجود داشت در این نسخه میتوانید از کلاسی فونت آیکون استاندارد زیر استفاده کنید.

تغییر استفاده از کلاس های مربوط به image

  • تغییر نام  img-responsive به img-fluid
  • تغییر نام img-rounded به rounded
  • تغییر نام  img-circle  به rounded-circle

برای مطالعه مقاله مرجع به Migrating to v4 مراجعه کنید.

 

  • آیا این مقاله مفید بود؟
  • بله   خیر

با تمام وجود علاقمندم مباحث جدید مربوط به برنامه نویسی رو یاد بگیرم و به دیگران یاد بدم. نیمی از زمان روزانه رو صرف یادگیری میکنم. سعی میکنم مقالات مفید و جدید در حوزه برنامه نویسی و به ویژه جاوا اسکریپت رو برای شما دوستان عزیز در لایو گوگل منتشر کنم.

یک کامنت

  1. نکته اینکه نصب بوت استرپ 4 بوسیله bower دیگر امکانپذیر نیست و باید از YAML استفاده کرد

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.