سبد (0)

bootstrap و media query ها

اگر با مدیا کوئری ها(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 تغییر دهید . 

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه