%45 تخفیف، با کد Ghadir روی تمام آموزش ها، بمناسبت عید قربان تا غدیر
زمان باقی مانده (آخرین فرصت)

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

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

Wiki

در صورتی که می خواهید مقداری متن ساده را بعد از یک برچسب فرم در داخل یک فرم افقی قرار دهید، می توانید از کلاس form-control-static. در یک عنصر <p> استفاده کنید:

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

 <formclass="form-horizontal"role="form">
  <divclass="form-group">
    <labelclass="control-label col-sm-2"for="email">Email:</label>
    <divclass="col-sm-10">
      <pclass="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. استفاده کنید.

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

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

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

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

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

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

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

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

 

آموزش صوتی Bootstrap

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

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

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

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