آموزش ورودی فرم های بوت استرپ – آموزش بوت استرپ

0 دیدگاه

ورودی فرم های بوت استرپ

سلام و عرض ادب و احترام خدمت تمامی دوستان عزیز. توی این مطلب از آموزش های وب سایت آموزش برنامه نویسی سورس باران در این جلسه آموزش ورودی فرم های بوت استرپ رو تقدیم حضور شما دوستان می نماییم. لطفا با ما همراه باشید….

ورودی فرم های بوت استرپ

کنترل فرم های پشتیبانی شده

بوت استرپ از کنترل فرم های زیر پشتیبانی میکند :

input
textarea
checkbox
radio
select

ورودی بوت استرپ : Input

بوت استرپ از انواع ورودی های HTML5 مانند text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, و color پشتیبانی میکند .

نکته : اگر نوع ورودی را مشخص نکنید به طور کامل استایل دهی نمیشوند

مثال زیر حاوی دو عنصر ورودیست. یکی از نوع تایپ متن (type,text) و دیگری از نوع رمز (password)

 <div class="form-group">
  <label for="usr">Name:</label>
  <input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
</div>

</div>

<label for="pwd">Password:</label>

</div>

محل متن در بوت استرپ : Textarea

مثال زیر حاوی یک Textarea می باشد:

<div class="form-group">
  <label for="comment">Comment:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div>

<label for="comment">Comment:</label>

</div>

چک باکس های بوت استرپ : Checkboxes

اگر میخواهید که کاربر از بین چند گزینه از یک لیست حاضر یکی را انتخاب کند باید از چک باکس ها استفاد ه کنید :

مثال زیر حاوی سه عدد چک باکس میباشد . که گزینه اخر ان غیر فعال است

 <div class="checkbox">
  <label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
  <label><input type="checkbox" value="" disabled>Option 3</label>
</div>

<label><input type="checkbox" value="">Option 1</label>

</div>

<label><input type="checkbox" value="">Option 2</label>

</div>

<label><input type="checkbox" value="" disabled>Option 3</label>

</div>

و اگر از کلاس checkbox-inline استفاده کنید به شکل زیر خواهد شد :

 <label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>

<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>

<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>

<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>

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

اگر میخواهید کاربر را محدود کنید تا تنها بتواند یک گزینه از لیست را انتخاب کند از دکمه های رادیویی استفاده کنید .

مثال زیر حاوی سه دکمه رادیویی ست که یک گزینه ان غیر فعال است

 <div class="radio">
  <label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
  <label><input type="radio" name="optradio" disabled>Option 3</label>
</div>

<label><input type="radio" name="optradio">Option 1</label>

</div>

<label><input type="radio" name="optradio">Option 2</label>

</div>

<label><input type="radio" name="optradio" disabled>Option 3</label>

</div>

اگر میخواهید که این دکمه های رادیویی در یک خط قرار بگیرند از کلاس radio-inline استفاده نمایید:

 <label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>

<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>

<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>

<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>

Bootstrap select list : لیست انتخاب بوت استرپ

وقتی که میخواهید به کاربر اجازه دهید تا از بین چند گزینه انتخاب کند از لیست هی انتخاب استفاده کنید. مثال زیر حاوی یک لیست کشویی ست (یک لیست انتخاب کشویی )

<div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

<label for="sel1">Select list:</label>

</select>

</div>

کنترل استاتیک در بوت استرپ :

اگر نیاز دارید یک متن اشکار (plain-text) را کنار یک برچسپ در فرم افقی قرار دهید از کلاس form-control-static روی یک عنصر .<p> استفاده کنید.

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <p class="form-control-static">someone@example.com</p>
    </div>
  </div>
</form>

<label class="control-label col-sm-2" for="email">Email:</label>

<p class="form-control-static">someone@example.com</p>

</div>

</form>

[alert color=”green” icon=””]

حتما بخوانید : آموزش کار با فرم های بوت استرپ

[/alert]

حالت های مختلف کنترل فرم ها در بوت استرپ :

input focus : خطوط بیرونی ورودی حذف شده ند و یک box-shadow بر روی فوکِس اعمال میشود .
Disable inputs : برای غیر فعال کردن یک بخض ورودی خاصیت disabled را بر روی آن اعمال می کنیم.
FIELDSETS های غیر فعال : خاصیت disabled را به یک fieldset اعمال کنید تا تمام کنترل های درون ان را غیر فعال کنید.
ReadOnly inputs : برای جلوگیری از وارد کردن اطلاعات توسط کاربر از خاصیت readonly استفاده کنید.
Validation states : بوت استرپ شامل استایل های معتبر سازی برای پیام های Error , warning و success میباشد . برای استفاده از انها کلاس های .has-warning, .has-error و یا .has-successرا به عنصر والد اضافه کنید .
Icons : میتوانید با استفاده از کلاس .has-feedback و یک ایکون ، ایکون های فیدبک بسازید .
Hidden labels : برای برچسب های مخفی از کلاس .sr-onlyاستفاده کنید.

مثال زیر نشان دهنده برخی از حالت های کنرتل فرم های بالا در فرم های افقی ست :

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Focused</label>
    <div class="col-sm-10">
      <input class="form-control" id="focusedInput" type="text" value="Click to focus">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Disabled</label>
    <div class="col-sm-10">
      <input class="form-control" id="disabledInput" type="text" disabled>
    </div>
  </div>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput" class="col-sm-2 control-label">Fieldset disabled</label>
      <div class="col-sm-10">
        <input type="text" id="disabledTextInput" class="form-control">
      </div>
    </div>
    <div class="form-group">
      <label for="disabledSelect" class="col-sm-2 control-label"></label>
      <div class="col-sm-10">
        <select id="disabledSelect" class="form-control">
          <option>Disabled select</option>
        </select>
      </div>
    </div>
  </fieldset>
  <div class="form-group has-success has-feedback">
    <label class="col-sm-2 control-label" for="inputSuccess">
    Input with success and icon</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputSuccess">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
  </div>
  <div class="form-group has-warning has-feedback">
    <label class="col-sm-2 control-label" for="inputWarning">
    Input with warning and icon</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputWarning">
      <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
    </div>
  </div>
  <div class="form-group has-error has-feedback">
    <label class="col-sm-2 control-label" for="inputError">
    Input with error and icon</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputError">
      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    </div>
  </div>
</form>

<label class="col-sm-2 control-label">Focused</label>

</div>

<label for="inputPassword" class="col-sm-2 control-label">Disabled</label>

</div>

<label for="disabledTextInput" class="col-sm-2 control-label">Fieldset disabled</label>

</div>

<option>Disabled select</option>

</select>

</div>

</fieldset>

Input with success and icon</label>

</div>

Input with warning and icon</label>

</div>

Input with error and icon</label>

</div>

</form>

مثال زیر هم حاوی برخی از حالت های کنترل فرم در یک فرم درون خطی ست :

 <form class="form-inline" role="form">
  <div class="form-group">
    <label for="focusedInput">Focused</label>
    <input class="form-control" id="focusedInput" type="text">
  </div>
  <div class="form-group">
    <label for="inputPassword">Disabled</label>
    <input class="form-control" id="disabledInput" type="text" disabled>
  </div>
  <div class="form-group has-success has-feedback">
    <label for="inputSuccess2">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess2">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
  <div class="form-group has-warning has-feedback">
    <label for="inputWarning2">Input with warning</label>
    <input type="text" class="form-control" id="inputWarning2">
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
  <div class="form-group has-error has-feedback">
    <label for="inputError2">Input with error</label>
    <input type="text" class="form-control" id="inputError2">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  </div>
</form>

<label for="focusedInput">Focused</label>

</div>

<label for="inputPassword">Disabled</label>

</div>

<label for="inputSuccess2">Input with success</label>

</div>

<label for="inputWarning2">Input with warning</label>

</div>

<label for="inputError2">Input with error</label>

</div>

</form>

امیدواریم که آموزش ورودی فرم های بوت استرپ مورد توجه شما دوستان قرار گرفته باشد.

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

برچسب ها: آموزش بوت استرپ

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

دوره آموزش طراحی فروشگاه اینترنتی بدون کد نویسی در 8 ساعت

انتشار: ۲۵ تیر ۱۳۹۵

آموزش ورودی فرم های بوت استرپ – آموزش بوت استرپ

ورودی فرم های بوت استرپ

صابر بوستانی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط