ابزار واکنش گرایی در بوت استرپ

[saeed410]

در قسمت قبل با برخی از کلاسهای کمکی در بوت استرپ (http://sypna.ir/AllArticles/ID/15/%D8%A7%D9%85%D9%88%D8%B2%D8%B4-%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7-%DA%A9%D9%84%D8%A7%D8%B3%D9%87%D8%A7%DB%8C-%DA%A9%D9%85%DA%A9%DB%8C) آشنا شدیم. بوت استرپ مجموعه ایی از کلاسها را فراهم کرده که به طراحی سایت (http://Sypna.ir) و توسعه آن با رویکرد و اولویت موبایل کمک میکند. با استفاده از این کلاسها میتوانید واکنش گرایی را به صفحات خود اضافه کنید. این کلاسها میتوانند محتواهایی را در دستگاههای مختلف مخفی یا نمایش دهند.در جدول زیر کلاسهای نمایانی در بوت استرپ را مشاهده میکنید:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/011/Responsive-utililites-bootstrap.JPG کلاسهای کمکی برای چاپ در بوت استرپ : از این کلاسها میتوانید برای کنترل نمایش هنگام چاپ استفاده کنید. جدول زیر این کلاسها را نشان میدهد»
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/011/print-utililites-bootstrap.JPG
مثال : در این مثال از تمام کلاسها استفاده شده است. با کوچک و بزرگ کردن مرورگر میتوانید نتایج استفاده از کلاسها را مشاهده کنید:

<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>
تصویر در اندازه کوچک : با کوچک و بزرگ کردن مرورگر میتوانید نتیجه کد را ببینید.
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/011/Responsive-utililites-bootstrap-demo.JPG
در اینجا مجموعه آموزش های بخش بوت استرپ و CSS (http://sypna.ir/AllArticles/articleType/CategoryView/categoryId/4/%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-CSS)کامل شد. در آموزشهای بعدی با کامپوننت های لایه بندی در بوت استرپ اشنا خواهیم شد.


در گروه: بوت استرپ و CSS (http://sypna.ir/AllArticles/articleType/CategoryView/categoryId/4/%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-CSS)
منبع: طراحی سایت (http://Sypna.ir)