سبد (0)

تبلیغات

input ها در بوت استرپ

کنترل استاتیک

Wiki

در صورتی که می خواهید مقداری متن ساده را بعد از یک برچسب فرم در داخل یک فرم افقی قرار دهید، می توانید از کلاس 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">این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید</p>
    </div>
  </div>
</form>

خودتان امتحان کنید »

حالت های مختلف input ها در بوت استرپ

Wiki

  • حالت فوکِس ورودی: خط بیرونی ورودی(input) حذف شده است و یک box-shadow بر روی focus اضافه شده است.
  • حالت ورودی های غیر فعال: برای غیرفعال کردن یک فیلد ورودی(input)، خصوصیت disabled را اضافه کنید.
  • حالت  FIELDSETS غیر فعال: می توانید خصوصیت disabled را به یک fieldset اضافه کنید تا تمام کنترل های داخل آن را غیرفعال کنید.
  • حالت ورودی های فقط خواندنی: یک خصوصیت readonly را به یک فیلد ورودی(input) اضافه کنید تا از نوشتن ورودی توسط کاربر اجتناب کنید.
  • حالات اعتبار سنجی: بوتسترپ شامل استایل هایی برای حالات اعتباز سنجی می باشد، این حالات عبارتند از پیام های error(خطا) و warning(اخطار) و success(موفقیت). برای استفاده از این حالات، کلاس های has-warning. و has-error. و has-success. را استفاده کنید.
  • آیکن ها: شما می توانید آیکن های فیدبک را به وسیله ی کلاس has-feedback. و یک آیکن، اضافه کنید.
  • برچسب های مخفی: بر روی برچسب های مخفی، می توانید از کلاس 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>

خودتان امتحان کنید »

در اینجا نیز یک مثال وجود دارد که در آن از مقداری کنترل کننده های فرم در یک فرم خطی استفاده شده است:

مثال (ورودی های بوتسترپ)

<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>

خودتان امتحان کنید »

آموزش صوتی Bootstrap

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

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