saeed410
عضو جدید
در قسمت قبل با برخی از کلاسهای کمکی در بوت استرپ آشنا شدیم. بوت استرپ مجموعه ایی از کلاسها را فراهم کرده که به [h=1]طراحی سایت[/h] و توسعه آن با رویکرد و اولویت موبایل کمک میکند. با استفاده از این کلاسها میتوانید [h=1]واکنش گرایی[/h] را به صفحات خود اضافه کنید. این کلاسها میتوانند محتواهایی را در دستگاههای مختلف مخفی یا نمایش دهند.در جدول زیر کلاسهای نمایانی در بوت استرپ را مشاهده میکنید:
[h=2]کلاسهای کمکی برای چاپ در بوت استرپ :[/h] از این کلاسها میتوانید برای کنترل نمایش هنگام چاپ استفاده کنید. جدول زیر این کلاسها را نشان میدهد»
مثال : در این مثال از تمام کلاسها استفاده شده است. با کوچک و بزرگ کردن مرورگر میتوانید نتایج استفاده از کلاسها را مشاهده کنید:
در اینجا مجموعه آموزش های بخش بوت استرپ و CSS کامل شد. در آموزشهای بعدی با کامپوننت های لایه بندی در بوت استرپ اشنا خواهیم شد.
در گروه: بوت استرپ و CSS
منبع: طراحی سایت
مثال : در این مثال از تمام کلاسها استفاده شده است. با کوچک و بزرگ کردن مرورگر میتوانید نتایج استفاده از کلاسها را مشاهده کنید:
<div class="container" style="padding: 40px;">
<div class="row visible-on">
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-xs">بسیار کوچک</span>
<span class="visible-xs">✔ روی دستگاه های بسیار کوچک قابل نمایش است: x-small</span>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-sm">کوچک</span>
<span class="visible-sm">✔ روی دستگاههای کوچک قابل نمایش است</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-md">متوسط</span>
<span class="visible-md">✔ روی دستگاههای متوسط قابل نمایش است</span>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-lg">بزرگ</span>
<span class="visible-lg">✔ روی دستگاههای بزرگ قابل نمایش است</span>
</div>
</div>
</div>
تصویر در اندازه کوچک : با کوچک و بزرگ کردن مرورگر میتوانید نتیجه کد را ببینید.<div class="row visible-on">
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-xs">بسیار کوچک</span>
<span class="visible-xs">✔ روی دستگاه های بسیار کوچک قابل نمایش است: x-small</span>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-sm">کوچک</span>
<span class="visible-sm">✔ روی دستگاههای کوچک قابل نمایش است</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-md">متوسط</span>
<span class="visible-md">✔ روی دستگاههای متوسط قابل نمایش است</span>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-lg">بزرگ</span>
<span class="visible-lg">✔ روی دستگاههای بزرگ قابل نمایش است</span>
</div>
</div>
</div>
در اینجا مجموعه آموزش های بخش بوت استرپ و CSS کامل شد. در آموزشهای بعدی با کامپوننت های لایه بندی در بوت استرپ اشنا خواهیم شد.
در گروه: بوت استرپ و CSS
منبع: طراحی سایت
