saeed410
عضو جدید
در قسمت قبل با روشهای مختلف استایل دهی به فرم ها در بوت استرپ آشنا شدیم. علاوه بر این بوت استرپ تعدادی کلاسهای کمکی دارد که ممکن است در [h=1]طراحی سایت از آنها استفاده کنید. در این قسمت به این کلاسها اشاره خواهیم کرد.[/h][h=2]آیکون Close در بوت استرپ :[/h]از این کلاس میتوانید در کاموننت های modal و alert که در آینده مورد بحث قرار خواهند گرفت ؛ استفاده کنید. این کلاس یک آیکون Close به کنترل اضافه میکند. مثال :
[h=2]علامت هشتک(caret) در بوت استرپ:[/h]از این کلاس میتوان برای ایجاد منوی بازشو استفاده کرد. توضیح کامل در قسمت کامپوننت های dropdown آورده خواهد شد.
[h=2]تغییر جهت شناوری(float) در بوت استرپ[/h]برای اینکه شناوری یک div را به راست یا چپ تغییر دهید میتوانید از کلاسهای pull-left و pull-right استفاده کنید.
مثال :
[h=2]چینش بلاک ها در وسط:[/h]برای وسط قرار دادن یک شیء در بوت استرپ از کلاس center-block استفاده کنید. مثال :
[h=2]کلاس Clearfix :[/h]برای حذف کردن شناوری اشیاء از این کلاس استفاده میشود. مثال :
[h=2]نمایش و پنهان سازی محتوا در بوت استر:[/h]برای اجبار (force) نمایش یا پنهان سازی یک محتوا میتوانی از کلاسهای show و hidden استفاده کنید.کلاس Show بیشتر برای نرم افزارهای Screen reader استفاده میشود:
مثال :
در قسمت بعد با کلاسها و ابزار های واکنش گرایی در بوت استرپ اشنا خواهیم شد.
در گروه: بوت استرپ و CSS
منبع: طراحی سایت
<div class="row">
<p>مثال آیکون بستن
<button type="button" class="close" aria-hidden="true">
×
</button>
</p>
</div>
تصویر :<p>مثال آیکون بستن
<button type="button" class="close" aria-hidden="true">
×
</button>
</p>
</div>
[h=2]علامت هشتک(caret) در بوت استرپ:[/h]از این کلاس میتوان برای ایجاد منوی بازشو استفاده کرد. توضیح کامل در قسمت کامپوننت های dropdown آورده خواهد شد.
<p>مثال هشتک
<span class="caret"></span>
</p>
تصویر :<span class="caret"></span>
</p>
[h=2]تغییر جهت شناوری(float) در بوت استرپ[/h]برای اینکه شناوری یک div را به راست یا چپ تغییر دهید میتوانید از کلاسهای pull-left و pull-right استفاده کنید.
مثال :
<div class="pull-left">
Quick Float to left
</div>
<div class="pull-right">
Quick Float to right
</div>
تصویر :Quick Float to left
</div>
<div class="pull-right">
Quick Float to right
</div>
[h=2]چینش بلاک ها در وسط:[/h]برای وسط قرار دادن یک شیء در بوت استرپ از کلاس center-block استفاده کنید. مثال :
<div class="center-block" style="width:200px;background-color:#ccc;">
مثال چینش یک شیء در وسط
</div>
تصویر :مثال چینش یک شیء در وسط
</div>
[h=2]کلاس Clearfix :[/h]برای حذف کردن شناوری اشیاء از این کلاس استفاده میشود. مثال :
<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>
تصویر :<div class="pull-left" style="background:#58D3F7;">
Quick Float to left
</div>
<div class="pull-right" style="background: #DA81F5;">
Quick Float to right
</div>
[h=2]نمایش و پنهان سازی محتوا در بوت استر:[/h]برای اجبار (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>
<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 چیست؟ یک نرم افزار است که قابلیت خواندن صفحات وب را دارد و میتواند به افراد ناتوان کمک کند.
<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>
در این مثال دو لیبل تعریف کرده اییم که فقط در نرم افزارهای صفحه خوان قابل دیدن هستند.تصویر :<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>
در قسمت بعد با کلاسها و ابزار های واکنش گرایی در بوت استرپ اشنا خواهیم شد.
در گروه: بوت استرپ و CSS
منبع: طراحی سایت