اگر با مدیا کوئری ها(media query) آشنایی ندارید می توانید از اینجا اطلاعاتی را به دست بیاورید .
فریم ورک bootstrap از مدیا کوئری ها استفاده می کند و صفحه های نمایش با اندازه های مختلف را
پشتیبانی می کند . اندازه ی صفحه ی موبایل ها و تبلت ها از 320 پیکسل تا 1280 پیکسل
متغیر است .
بوتسترپ از مدیا کوئری ها استفاده می کند تا برای هر اندازه صفحه نمایش یک نوع پردازش انجام دهد .
این بدین معنی است که سایت شما بسیار بهتر در موبایل ها و دیگر وسایل، نمایش داده خواهد شد .
فریم ورک بوتسترپ از مدیا کوئری های زیر استفاده می کند :
اندازه کوچکتر یا مساوی 480 پیکسل
اندازه کوچکتر یا مساوی 767 پیکسل
از 768 پیکسل تا تا 979 پیکسل .
از 980 پیکسل به بالا .
از 1200 پیکسل به بالا .
Title
@media (max-width: 480px) {
/* Your CSS here {} */
}
@media (max-width: 767px) {
/* Your CSS here {} */
}
@media (max-width: 979px) {
/* Your CSS here {} */
}
@media (min-width: 768px) and (max-width: 979px) {
/* Your CSS here {} */
}
@media (min-width: 980px) {
/* Your CSS here {} */
}
@media (min-width: 1200px) {
/* Your CSS here {} */
}
هر مدیا کوئری دستورات css مخصوص به خود را دارد . در ادامه ی این آموزش ها شما مثال های زیادی در مورد مدیا کوئری ها خواهید دید و نحوه ی استفاده از آنها را فرا خواهید گرفت .
ساختار HTML و کلاس ها در bootstrap
در سورس فایل های جوملا 2.5 و جوملا 3 شما می توانید تعدادی کلاس تعریف شده و همچنین تعدادی عنصر HTML پیدا کنید اما کلاس ها و عنصر های اچ تی ام ال بوتسترپ نیز وجود دارند که در بوتسترپ کار می کنند و استفاده می شوند .
در جوملای 2.5 شما برای اینکه یک قالب بسازید نیاز داشتید که دستورات CSS زیادی را تعریف کنید . اما در جوملای 3 لازم نیست
این همه دستور CSS را بنویسید . بنا براین کار با جوملای 3 بسیار راحت تر است . بگذارید یک مثال بیاوریم :
در جوملای 2.5 ما نیاز داریم که برای عنصر h1 در فایل template.css استایل هایی را تعریف کنیم . اما در css های بوتسترپ چنین دستوراتی از قبل تعریف شده است :
مثال (bootstrap و media query ها)
h1 {
margin: 10px 0;
font-family: inherit;
font-weight: bold;
line-height: 1;
color: inherit;
text-rendering: optimizelegibility;
}
h1 {
font-size: 36px;
line-height: 40px;
}
اگر می خواهید استایل های bootstrap را تغییر دهید نباید آنها را در فایل اصلی bootstrap تغییر دهید بلکه می توانید انها را در فایل template.css تغییر دهید .
