آموزش کلاس های کمکی در بوت استرپ
آموزش کلاس های کمکی در بوت استرپ
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش کلاس های کمکی در بوت استرپ خواهیم پرداخت.
در این درس برخی از کلاس های کمکی در بوت استرپ که ممکن است مفید باشد را مورد بحث قرار می دهد.
آیکون بستن
از آیکون بستن عمومی برای رد کردن محتوایی مانند روش های هشدار و هشدار استفاده کنید. برای دریافت آیکون بستن از کلاس close استفاده کنید.
|
1 2 3 4 5 |
<p>Close Icon Example <button type = "button" class = "close" aria-hidden = "true"> &times; </button> </p> |
Carets
برای نشان دادن عملکرد و جهت کشویی از دندانه دار استفاده کنید. برای دریافت این قابلیت از کلاس class با عنصر <span> استفاده کنید.
|
1 |
<p>Caret Example<span class = "caret"></span></p> |
منو شناور
می توانید یک عنصر را به سمت چپ یا راست با کلاس pull-left یا pull-right شناور کنید به ترتیب مثال زیر این را نشان می دهد.
|
1 2 |
<div class = "pull-left">Quick Float to left</div> <div class = "pull-right">Quick Float to right</div> |
برای تراز کردن مولفه ها در navbars با کلاسهای سودمندی ، به جای آن از navbar-left. یا navbar-right. استفاده کنید. برای جزئیات بیشتر به بخش navbar مراجعه کنید.
بلوک های محتوای مرکز
برای تنظیم یک عنصر در مرکز از بلوک center-block استفاده کنید.
|
1 2 3 4 5 |
<div class = "row"> <div class = "center-block" style = "width:200px; background-color:#ccc;"> This is an example for center-block </div> </div> |
Clearfix
برای پاک کردن شناور از هر عنصر ، از کلاس clearfix. استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
نمایش و پنهان کردن محتوا
با استفاده از کلاس های .show و .hidden می توانید عنصری را مجبور کنید که نمایش داده یا پنهان شود (از جمله برای خوانندگان صفحه).
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class = "row" style = "padding: 91px 100px 19px 50px;"> <div class = "show" style = "left-margin:10px; width:300px; background-color:#ccc;"> This is an example for show class </div> <div class = "hidden" style = "width:200px; background-color:#ccc;"> This is an example for hide class </div> </div> |
محتوای صفحه خوان
شما می توانید یک عنصر را در همه دستگاه ها به جز صفحه خوان ها با کلاس sr-only. پنهان کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class = "row" style = "padding: 91px 100px 19px 50px;"> <form class = "form-inline" role = "form"> <div class = "form-group"> <label class = "sr-only" for = "email">Email address</label> <input type = "email" class = "form-control" placeholder = "Enter email"> </div> <div class = "form-group"> <label class = "sr-only" for = "pass">Password</label> <input type = "password" class = "form-control" placeholder = "Password"> </div> </form> </div> |
لیست جلسات قبل آموزش بوت استرپ
.svg)
دیدگاه شما