آموزش صفر تا صد کار با کامپوننت Forms در بوت استرپ 4-قسمت21

Name: آموزش صفر تا صد کار با کامپوننت Forms در بوت استرپ 4-قسمت21
Uploaded: 2021-07-03T13:56:06+04:30
Duration: 22 min 32 s
Description: آموزش کامپوننت forms در بوت استرپ 4 در این بخش از آموزش، با کامپوننت بسیار مهم و کاربردی forms در بوت استرپ 4 آشنا مشوید کلاس های موجود در کامپ

آموزش کامپوننت forms در بوت استرپ 4: در این بخش از آموزش، با کامپوننت بسیار مهم و کاربردی forms در بوت استرپ 4 آشنا می‌شوید. کلاس های موجود در کامپوننت forms: form-group: برای گروه‌بندی برچسب‌ها، کنترل‌های فرم و فاصله مناسب بین آن‌ها به کار می‌رود. form-control: کنترل‌های فرم به صورت پیش فرض شامل استایل‌های از پیش تعریف شده‌ایی می‌باشند. همه عناصر متنی ،

و <select> با کلاس form-control دارای عرض %100  هستند.      form-control-*(size): برای تنظیم سایزهای مختلف از کلاس های form-control-sm یا form-control-lg استفاده می‌شود. readonly: با استفاده از این کلاس می‌توان inputها فقط خواندنی شوند و نمی توان ورودی‌های آن را تغییر داد. form-control-plaintext: عناصر فقط خواندنی را در فرم به صورت متن ساده قرار می‌دهد. form-inline: عناصر فرم مانند برچسب‌ها، کنترل‌های فرم و دکمه را کنار هم و در یک ردیف افقی نمایش داده می‌شوند. form-check: برای اطمینان از فاصله مناسب برچسب‌ها و باکس‌های انتخاب استفاده می‌شود. برای برچسب‌ها کلاس form-check-label را اضافه می‌کنیم و برای باکس‌های انتخاب کلاس  form-check-input را اضافه می‌کنیم. form-check-inline: باکس‌های چک یا رادیوها را در یک ردیف افقی نمایش می‌دهد. form-row: برای کنترل عرض و تراز کردن input های فرم می توان از کلاس col استفاده کرد، اما باید آن ها در کلاس form-row قرار داد. col-form-label: برچسب با کنترل‌های فرم مرتبط خود به صورت عمودی در مرکز قرار می‌گیرد. می توانیم با کلاس‌های col-form-label-lg و col-form-label-sm در سایزهای مختلف نمایش دهیم. custom-control-*(control): برای ساخت کنترل‌های سفارشی استفاده می‌شود. custom-selec </div>

<div class="videodes"></div>
	
	
	<style>
.collapsible {
 background-color: #3e115d;
color: white;
cursor: pointer;
padding: 18px;
width: 95%;
border: none;
outline: none;
font-size: 15px;
display: flex;
justify-content: space-between;
border-radius: 4px;
margin: 10px;
  margin-right: 10px;
  margin-left: 10px;
margin-right: auto;
margin-left: auto;
}

.active, .collapsible:hover {
  background-color: #160423;
}

.collapsible::after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right !important;
  margin-left: 5px;
  text-align: left;
}

.collapsible.active::after {
content: "\2212";
  
}
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
</style>
	 
                                               
                                                                                                            <script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>
                                                             <style>#parent{margin: 15px;}#parent div{display:contents}#first{text-align:right}#second{text-align:center}#third{text-align:left}</style>
                                                             
	
<div class="yn-bnr" id="ynpos-14514"></div>

<ul itemscope="" itemtype="http://schema.org/BreadcrumbList" class="breadcrumb"> <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">❖ <a itemprop="item" href="/plist/funny" title="تفریحی"><span itemprop="name">تفریحی</span></a><meta itemprop="position" content="1">

</li> </ul>

</div><div id="third"><a onclick="comment()"><button style="background: #006382;" class="clickbtnred">نظرات</button> </a><a onclick="report()"><button style="" class="clickbtnred"><span class="namaicon-flag"></span> گزارش</button> </a><a onclick="share()"><button style="background:#273ba0" class="clickbtnred"><span class="namaicon-share"></span> اشتراک</button> </a>
</div> </div> <div id="report" style="display:none"> <form method="POST" action="" style="background:#cacaca;padding:20px;display:block"> <fieldset> <div class="form-group tg-inputwithicon"> <textarea style="padding:7px 10px 7px 10px;width:100%;border-radius:3px;border:1px solid #c5c5c5;box-sizing:border-box;box-shadow:0 0 5px rgba(49,49,49,0.1);margin-bottom:20px" placeholder="دلیل گزارش خود را توضیح دهید ..." name="des" required="">