غلبه بر کلاس‌های Bootstrap با استفاده از CSS

آیا در تغییر برخی از خصوصیات کلاس‌های بوت استرپ با CSS مشکل دارید؟

من درک می‌کنم که تغییر جزئیات ریز و درشت باید بسیار ناامید کننده و طاقت فرسا باشد. اما می‌توانم با چند ترفند به شما کمک کنم تا از پس آن برآیید.

بیشتر صفحات وب با استفاده از CSS و یا سایر فریمورک‌های CSS استایل دهی می‌شوند. بوت استرپ محبوب‌ترین این فریمورک‌ها است. این فریمورک از کلاس‌های مختلفی تشکیل شده است که توسعه وبسایت‌های واکنش گرا و mobile-first را آسان و سریع‌تر می‌کند. Bootstrap ۴ آخرین نسخه این فریمورک است.

طراحی وب واکنش‌گرا شامل استفاده از HTML و CSSبرای تغییر اندازه صفحات وبسایت است تا در همه دستگاه‌ها (تلفن‌های هوشمند، تبلت‌ها، دسکتاپ و یا حتی صفحه‌های تلویزیون) ظاهر خوبی داشته باشد، اگرچه Bootstrap ۴ برخلاف نسخه‌های دیگر پیشرفت بیشتری داشته و استایل دهی یک صفحه وب را بیشتر می‌کند و برای طراحی بهتر صفحه وب به CSS بیشتری نیاز دارد.

چگونه می‌توان استایل کلاس‌های بوت استرپ را تغییر داد؟

در ابتدا تغییر کلاس‌های بوت استرپ می‌تواند بسیار ناامید کننده باشد. به دلیل اولویتی که مرورگر به کلاس‌ها می‌دهد، این مشکل رایج است. از این رو همه اینها به خصوصیات CSS خلاصه می‌شود.

چرا قوانین CSS برای برخی از عناصر، به ویژه در بوت استرپ اعمال نمی‌شود. این لینک به شما کمک می‌کند تا درباره اصول خصوصیات در CSS بیشتر بدانید.

بر اساس این اصول، هر سلکتور اولویت عددی خود را به شرح زیر دارد:

۰ امتیاز برای سلکتور گلوبال (*)، body و مقادیر ارثی (اولویت صفر)
۱ امتیاز برای انتخاب تگ‌ها و شبه عناصر (اولویت حداقل)
۱۰ امتیاز برای کلاس‌ها و شبه کلاس‌ها (از جمله کلاس‌های بوت استرپ؛ اولویت کم)
۱۰۰ امتیاز برای id# (اولویت بیشتر)
۱۰۰۰ امتیاز برای استایل داخلی (بیشترین اولویت)

از این رو وقتی دو یا چند استایل وجود دارد، مرورگر همیشه بیشترین اولویت را اول انتخاب می‌کند.

5 ترفند برای غلبه بر کلاس‌های بوت استرپ

۱ - مطمئن شوید که <link> موردنظرتان در صفحه استایل شما مستقیما بعد از <link> بوت استرپ در تگ <head> باشد.

<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/ ۴.۴.۱/css/bootstrap.min.css" integrity="sha۳۸۴Vkoo۸x۴CGsO۳+Hhxv۸T/Q۵PaXtkKtu۶ug۵TOeNV۶gBiFeWPGFN۹MuhOf۲۳Q۹Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">

۲ - در صورت امکان از اعلان {important!} خودداری کنید. در بیشتر موارد، برخی از توسعه دهندگان از آن استفاده می‌کنند، اما این انعطاف‌پذیری کمتری دارد زیرا بعدا ممکن است لازم باشد برخی از استایل‌ها را تغییر دهید.

۳ - شما می‌توانید منابع بوت استرپ را بررسی کنید. مشخص کنید دقیقا استایل خاصی که می‌خواهید بر آن غلبه کنید تعریف شده است. سپس می‌توانید آن را تغییر دهید.

۴ - در بعضی موارد ممکن است لازم باشد سلکتور خاصی را که در بوت استرپ استفاده شده شناسایی کرده و سلکتور خود را جایگزین کنید.

به عنوان مثال، با استفاده از <"class="bg-basic> به عنوان کلاس بوت استرپ برای رنگ پس زمینه، می‌توانید آن را از HTML حذف کرده و با کلاس <"class="background_color> جایگزین کنید که می‌توانید در فایل CSS خود آن را استایل دهید. این از داشتن دو استایل متناقض برای یک عنصر جلوگیری می‌کند.

۵ - یکی از ساده‌ترین راه‌های نادیده گرفتن کلاس‌های بوت استرپ، افزودن "id" به عنصر مستقیم یا غیرمستقیم والد آن است، مانند این: <"div id="bg_color-overrides> با این کار ۱۰۰ امتیاز یکباره به id# اضافه می‌شود و به آن اولویت بیشتری می‌دهد.

برای نمونه:

/*Bootstrap class for color*/                                                                jumbotron_fluid
h۱ bg-primary { /* ۱۰+۱+۱۰=۲۱ numerical weight */                                              color: dogderblue;                                                                                                       }
/*Your initial attempt to override color */                                                         h۱ { /* ۱ point, inadequate to override Bootstrap declaration*/                color: blue;                                                                                                                  }
/*Better way of overriding */                                                                 #bg_color-overrides h۱ { /* ۱۰۰+۱=۱۰۱  ۱۰۱ > ۲۱*/                                    color: blue;                                                                                                                   }

امیدوارم با این چند ترفند بتوانید بر کلاس‌های بوت استرپ غلبه کنید. اگر به اطلاعات بیشتری نیاز دارید، از http://css-tricks.com/specifics-on-css-specificity بازدید کنید، این می‌تواند راهنمای خوبی برای شما باشد.

حتما نظرات خود را در بخش زیر با ما در میان بگذارید.

منبع