کلاسهای کمکی در بوت استرپ

[saeed410]

در قسمت قبل با روشهای مختلف استایل دهی به فرم ها در بوت استرپ (http://sypna.ir/AllArticles/ID/14/%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-%D9%81%D8%B1%D9%85-%D9%87%D8%A7) آشنا شدیم. علاوه بر این بوت استرپ تعدادی کلاسهای کمکی دارد که ممکن است در طراحی سایت (http://Sypna.ir)از آنها استفاده کنید. در این قسمت به این کلاسها اشاره خواهیم کرد.آیکون Close در بوت استرپ :از این کلاس میتوانید در کاموننت های modal و alert که در آینده مورد بحث قرار خواهند گرفت ؛ استفاده کنید. این کلاس یک آیکون Close به کنترل اضافه میکند. مثال :

<div class="row">
<p>مثال آیکون بستن
<button type="button" class="close" aria-hidden="true">
&times;
</button>
</p>
</div>
تصویر :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/010/Close-Icon-Bootstrap-class.JPG
علامت هشتک(caret) در بوت استرپ:از این کلاس میتوان برای ایجاد منوی بازشو استفاده کرد. توضیح کامل در قسمت کامپوننت های dropdown آورده خواهد شد.


<p>مثال هشتک
<span class="caret"></span>
</p> تصویر :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/010/Caret-Icon-Bootstrap-class.JPG
تغییر جهت شناوری(float) در بوت استرپبرای اینکه شناوری یک div را به راست یا چپ تغییر دهید میتوانید از کلاسهای pull-left و pull-right استفاده کنید.
مثال :

<div class="pull-left">
Quick Float to left
</div>
<div class="pull-right">
Quick Float to right
</div>تصویر :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/010/Quick-float-Bootstrap-class.JPG
چینش بلاک ها در وسط:برای وسط قرار دادن یک شیء در بوت استرپ از کلاس center-block استفاده کنید. مثال :

<div class="center-block" style="width:200px;background-color:#ccc;">
مثال چینش یک شیء در وسط
</div>تصویر :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/010/Center-Block-Content-Bootstrap-class.JPG
کلاس Clearfix :برای حذف کردن شناوری اشیاء از این کلاس استفاده میشود. مثال :

<div class="clearfix" style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
<div class="pull-left" style="background:#58D3F7;">
Quick Float to left
</div>
<div class="pull-right" style="background: #DA81F5;">
Quick Float to right
</div>تصویر :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/010/Clearfix-Bootstrap-class.JPG
نمایش و پنهان سازی محتوا در بوت استر:برای اجبار (force) نمایش یا پنهان سازی یک محتوا میتوانی از کلاسهای show و hidden استفاده کنید.کلاس Show بیشتر برای نرم افزارهای Screen reader استفاده میشود:
مثال :

<div class="row" style="padding: 91px 100px 19px 50px;">
<div class="show" style="left-margin:10px;width:300px;background-color:#ccc;">
مثال برای نمایش
</div>
<div class="hidden" style="width:200px;background-color:#ccc;">
مثال برای پنهان سازی
</div>
</div>

نرم افزار Screen Reader چیست؟ یک نرم افزار است که قابلیت خواندن صفحات وب را دارد و میتواند به افراد ناتوان کمک کند.

محتواهای مخصوص Screen Reader در بوت استرپبا استفاده از کلاس sr-only میتوانید اشیاء را در همه دستگاهها مخفی کنید و فقط برای نرم افزار های صفحه خوان نمایان باشد. این کلاس میتواند برای کمک به افراد ناتوان مورد استفاده قرار بگیرد. در این حالت میتوانید توضیحی را قرار دهید که توسط نرم افزار صفحه خوان به مختاطب ارجاع میشود.مثال :

<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="email">ایمیل</label>
<input type="email" class="form-control" placeholder="ایمیل خود را وارد کنید">
</div>
<div class="form-group">
<label class="sr-only" for="pass">رمز عبور</label>
<input type="password" class="form-control" placeholder="رمز عبور را وارد کنید">
</div>
</form>
در این مثال دو لیبل تعریف کرده اییم که فقط در نرم افزارهای صفحه خوان قابل دیدن هستند.تصویر :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/010/Screen-Reader-Content-Bootstrap-class.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)
منبع: طراحی سایت (http://Sypna.ir)