سلام دوستان ، حالتون چطوره؟امیدوارم که خوب باشید .در این بخش در مورد گروه های کمک کننده twitter bootstrap فراخواهید گرفت.
کمک کننده های تویتر بوت استرپ
تویتر بوت استرپ تعدادی گروه های CSS برای استفاده های مداوم ارائه می دهد.
رنگ های متنی
شما می توانید از گروه های رنگ متنی مانند . text-succes, .text-info, .text-warningو غیره برای تاکید متن استفاده کنید.
زمینه های متنی
مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
<p class=”bg-primary”>
Important: Please read the instructions carefully before proceed.
</p>
<p class=”bg-success”>
Success: Your message has been sent successfully.
</p>
<p class=”bg-info”>
Note: You must agree with the terms and conditions to complete the sign up process.
</p>
<p class=”bg-warning”>
Warning: There was a problem with your network connection.
</p>
<p class=”bg-danger”>Error: An error has been occurred while submitting your data.</p>
خروجی مثال زیر مانند تصویر زیر خواهد بود.
Bootstrap
نکته:
گروه های پیش زمینه ی متنی فقط رنگ زمینه ی CSS را روی عنصر به کار می برند. برای سازگار کردن فضای بین محتوا و جعبه ی حاشیه باید لایه ی CSS را خودتان تنظیم کنید.
آیکن بستن
تویتر بوت استرپ تعدادی گروه های CSS برای استفاده های مداوم ارائه می دهد.
مثال :
?
۱
۲
۳
۴
۵
۶
۷
<div class=”alert alert-warning”>
<a class=”close” href=”#”>
×
</a>
<strong>Warning!</strong> There was a problem with your network connection.
</div>
خروجی مثال بالا مانند تصویر زیر می باشد.
Bootstrap آیکن هشتک (caret).
آیکن هشتک (caret)
بوت استرپ یک آیکن هشتک کلی برای نشان دادن عملکرد رو به پایین ارائه می دهد. جهت آیکن هشتک در منوهای رو به بالا به طور خودکار معکوس می شود.
مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
<ul class=”nav nav-pills”>
<li class=”active”>
<a href=”#”>
Home
</a>
</li>
<li><a href=”#”>About</a></li>
<li class=”dropdown”>
<a class=”dropdown-toggle” href=”#”>
Services <span class=”caret”>
</span>
</a>
<ul class=”dropdown-menu”>
<li><a href=”#”>Design</a></li>
<li><a href=”#”>Development</a></li>
</ul>
</li>
</ul>
خروجی مثال فوق مانند تصویر زیر می باشد.
Bootstrap
مرکز ترازبندی بلوک های محتوا
شما می توانید از گروه بوت استرپ .center-block برای تنظیم افقی محتوای بلوک مرکزی استفاده کنید. به هرحال برای تنظیم تاثیر این گروه باید عرض بلوک محتوا را خودتان تنظیم کنید که باید کمتر از دارنده ی عنصر اصلی باشد.
مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
<!–
.wrapper {
margin: 20px;
padding: 10px;
background: #fffacd;
border: 1px solid #000;
}
.center-block {
width: 50%;
padding: 30px;
background: #e3b740;
}
–>
<div class=”wrapper”>
<div class=”center-block”>
Center Aligned DIV Box
</div>
<p><strong>Note:</strong>Play with .center-block width property value to understand how it works.</p>
</div>
شناورهای فوری
شما می توانید با استفاده از گروه های .pull-left و .pull-rightعنصری را به سرعت در سمت راست یا چپ قرار دهید. این گروه ها دارای اعلامیه ی !import antCSS می باشند تا از مشخص شدن مطالب جلوگیری کنند.
مثال :
?
۱
۲
۳
۴
۵
۶
۷
<div class=”pull-left”>
Floated to left.
</div>
<div class=”pull-right”>Floated to right.</div>
گروه .clear fix
شناور را بر روی هر عنصری مشخص می کند. این گروه به طور گسترده ای برای ثابت کردن منبع از هم پاشیده استفاده می شود، جایی که عنصر منبع دارای جعبه های شناور می باشد.
مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
.wrapper {
margin: 20px;
padding: 10px;
background: #fffacd;
border: 1px solid #000;
}
.pull-left,.pull-right {
padding: 20px;
background: #e3b740;
}
<div class=”wrapper clearfix”>
<div class=”pull-left”>
Float to left
</div>
<div class=”pull-right”>
Float to right
</div>
</div>
گروه.clear fix
شناور را بر روی هر عنصری مشخص می کند. این گروه به طور گسترده ای برای ثابت کردن منبع از هم پاشیده استفاده می شود، جایی که عنصر منبع دارای جعبه های شناور می باشد.
مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
.wrapper {
margin: 20px;
padding: 10px;
background: #fffacd;
border: 1px solid #000;
}
.pull-left,.pull-right {
padding: 20px;
background: #e3b740;
}
<div class=”wrapper clearfix”>
<div class=”pull-left”>
Float to left
</div>
<div class=”pull-right”>
Float to right
</div>
</div>
نمایش دادن و پنهان کردن محتوا
شما می توانید کاری کنید که عنصری روی همه ی دستگاه هایی که از گروه های .show و .hiddenاستفاده می کنند، نمایش داده شود و یا مخفی شود. این گروه ها نیز دارای پیام CSS !important برای جلوگیری از تضاد ها می باشند، درست مثل شناورهای فوری. به علاوه شما می توانید از گروه .invisible برای پوشاندن قابل رویت بودن یک عنصر استفاده کنید، به هرحال عنصر هنوز فضایی را در لی اوت اشغال کرده است.
مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
<div class=”show”>
This is visible to the user.</div>
<div class=”hidden”>
This is not visible to the user.</div>
<div class=”invisible”>This is not visible but affects the layout.</div>
محتوای مخصوص صفحه ی خواننده ها
گروه خاص .sr-only یک عنصر را برای همه ی دستگاه ها به جز صفحات خواننده ها پنهان می کند.
مثال :
?
۱
۲
۳
<p>This paragraph is visible to all devices.</p>
<p class=”sr-only”>This paragraph is only visible to screen readers.</p>
پنهان کردن متن
شما می توانید از گروه .text-hide استفاده کرده و محتوای متنی را از یک عنصر پنهان کنید.
مثال :
?
۱
۲
۳
۴
۵
۶
<h1 class=”text-hide”>
The text of this heading is not visible</h1>
<p class=”text-hide”>The text of this paragraph is not visible.</p>
توجه:
قبل از استفاده از این گروه خوب فکر کنید، زیرا این گروه با استفاده از color: transparent و font-size: 0px متن را پنهان می کند. موتورهای جستجو تکنیک هایی مانند اسپم را در نظر می گیرند که ممکن است منجر به جریمه شوند.
