آموزش طراحی سایت (HTML CSS Javascript) | آتریا

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

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

در صورتی که می خواهید مقداری متن ساده را بعد از یک برچسب فرم در داخل یک فرم افقی قرار دهید، می توانید از کلاس 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>

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

: نوشته شده توسط احسان عباسی; بازدید: 11696

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

آموزش صوتی Bootstrap

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

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

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی