بررسی اجمالی CSS در بوت استرپ
بررسی اجمالی CSS در بوت استرپ
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به بررسی اجمالی CSS در بوت استرپ خواهیم پرداخت.
این درس مروری بر بخشهای اصلی زیرساختهای بوت استرپ ، از جمله رویکرد بوت استرپ برای توسعه وب بهتر ، سریعتر و قوی تر را ارائه می دهد.
HTML5 doctype
بوت استرپ از برخی عناصر HTML و ویژگی های CSS استفاده می کند که نیاز به استفاده از نوع HTML5 دارد. از این رو در ابتدای تمام پروژه های خود با استفاده از بوت استرپ کد زیر را برای نسخه HTML5 وارد کنید.
|
1 2 3 4 |
<!DOCTYPE html> <html> .... </html> |
Mobile First
از زمان راه اندازی بوت استرپ 3 ، بوت استرپ ابتدا موبایل شده است. این بدان معناست که استایل های “Mobile First” را می توان در کل کتابخانه به جای آنها در پرونده های جداگانه یافت. برای اطمینان از ارائه مناسب و بزرگنمایی لمسی دستگاه های تلفن همراه ، باید متا برچسب viewport را به عنصر <head> اضافه کنید.
|
1 |
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> |
ویژگی width عرض دستگاه را کنترل می کند. تنظیم آن بر روی عرض دستگاه ، اطمینان حاصل می کند که در دستگاه های مختلف (تلفن همراه، رایانه رومیزی، رایانه لوحی …) به درستی ارائه شود.
initial-scale = 1.0 اطمینان حاصل می کند که هنگام بارگذاری ، صفحه وب شما در مقیاس 1: 1 ارائه می شود و هیچ بزرگنمایی از جعبه اعمال نمی شود.
برای غیرفعال کردن قابلیت های بزرگنمایی در دستگاه های تلفن همراه مطابق شکل زیر ، قابلیت مقیاس پذیر بودن کاربر را اضافه کنید: خیر. کاربران فقط با این تغییر قادر به پیمایش و بزرگنمایی نیستند و در نتیجه سایت شما کمی بیشتر شبیه یک برنامه بومی است.
|
1 |
<meta name = "viewport" content = "width = device-width، basic-scale = 1.0، maximum-scale = 1.0، user-scalable = no"> |
به طور معمول حداکثر مقیاس = 1.0 همراه با مقیاس پذیر بودن کاربر = خیر استفاده می شود. همانطور که در بالا ذکر شد کاربر مقیاس پذیر است: خیر ممکن است تجربه ای بیشتر شبیه یک برنامه بومی به کاربران ارائه دهد ، از این رو Bootstrap استفاده از این ویژگی را توصیه نمی کند.
تصاویر پاسخگو
بوت استرپ 3 به شما امکان می دهد تصاویر را با افزودن یک کلاس .img-responsive به تگ <img> پاسخگو کنید. این کلاس حداکثر عرض را اعمال می کند: 100٪؛ و ارتفاع: خودکار؛ به تصویر به طوری که مقیاس خوبی با عنصر والد داشته باشد.
|
1 |
<img src = "..." class = "img-responsive" alt = "Responsive image"> |
تایپوگرافی و لینک ها
Bootstrap یک صفحه اصلی جهانی (پس زمینه) ، تایپوگرافی و سبک های پیوند را تنظیم می کند –
- Basic Global display – مجموعه رنگ پس زمینه: fff#؛ روی عنصر <body>.
- Typography – از ویژگی های font-family-base، @font-size-base@ و line-height-base-base@ به عنوان پایه تایپوگرافی استفاده می کند.
- Link styles – رنگ پیوند جهانی را از طریق ویژگی @ link-color تنظیم می کند و خطوط پیوند را فقط در: شناور اعمال می کند.
اگر قصد استفاده از کد LESS را دارید، می توانید همه این موارد را در داربست پیدا کنید.
Normalize
بوت استرپ از Normalize برای ایجاد سازگاری مرورگر متقابل استفاده می کند.
Normalize.css یک جایگزین مدرن و آماده HTML5 برای بازنشانی های CSS است. این یک فایل CSS کوچک است که سازگاری بهتری را در مرورگر متناوب در سبک دهی پیش فرض عناصر HTML فراهم می کند.
Container
از کلاس Container استفاده کنید تا محتوای یک صفحه را بپیچید و همانطور که در زیر نشان داده شده است به راحتی محتوا را در آن مرکز کنید.
|
1 2 3 |
<div class = "container"> ... </div> |
نگاهی به کلاس .container در پرونده bootstrap.css بیندازید –
|
1 2 3 4 5 6 |
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } |
توجه داشته باشید که به دلیل بالشتک و عرض های ثابت ، ظروف به طور پیش فرض قابل لانه سازی نیستند.
فایل bootstrap.css
|
1 2 3 4 5 |
@media (min-width: 768px) { .container { width: 750px; } } |
در اینجا می توانید مشاهده کنید که CSS پرس و جوهای رسانه ای برای ظروف با عرض دارد. این امر به کاربرد پاسخگویی کمک می کند و در این کلاس کلاس کانتینر متناسب با آن ارائه می شود تا سیستم شبکه را به درستی ارائه دهد.
لیبست جلسات قبل آموزش بوت استرپ
.svg)
دیدگاه شما