saeed410
جمعه 28 آذر 1393, 20:14 عصر
در قسمت قبل با برخی از کلاسهای کمکی در بوت استرپ (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)را به صفحات خود اضافه کنید. این کلاسها میتوانند محتواهایی را در دستگاههای مختلف مخفی یا نمایش دهند.در جدول زیر کلاسهای نمایانی در بوت استرپ را مشاهده میکنید: 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)
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)