۲۲
مرداد

جلسه ۲۳ : ورودی های Input پیشرفته در Bootstrap 3

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 3 را دنبال می کنند.تاکنون شما را با input های ساده و اصلی در bootstrap 3 آشنا کرده ایم. علاوه بر ورودی های اصلی و پایه در bootstrap 3، طرح های پیشرفته تر و پیچیده تری از عناصر input در bootstrap 3 ، ارائه شده است. که این طرح ها برای موارد گوناگونی از جمله ایجاد نوار جستجو ، اعتبار سنجی ورودی ها و… کاربرد دارد. در ادامه ی این مباحث شما را با ورودی های Input پیشرفته در bootstrap 3 آشنا خواهیم کرد.

ورودی های Input پیشرفته در bootstrap 3

ورودی های ایستا(static)

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

ورودی های ایستا(static)

مثال:

مثال :

<form class="form-horizontal">
  <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>

گروه بندی عناصر input

از کلاس .input-group یک container برای ایجاد کنترل های ورودی با یک آیکون یا عناصر button و یک متن کمکی “help text” استفاده می شود.

از کلاس .input-group-addon برای افزودن یک آیکون یا متن کمکی به فیلد input استفاده می شود.

گروه بندی عناصر input

مثال:

مثال :

<form>
  <div class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
    <input id="email" type="text" class="form-control" name="email" placeholder="Email">
  </div>
  <div class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
    <input id="password" type="password" class="form-control" name="password" placeholder="Password">
  </div>
  <div class="input-group">
    <span class="input-group-addon">Text</span>
    <input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
  </div>
</form>

<form>

</div>

</div>

</div>

</form>

از کلاس .input-group-btn برای یک button بعد از یک فیلد text استفاده می شود. این ویژگی اغلب برای ایجاد یک نوار search استفاده می شود.

ایجاد نوار جستجو

مثال:

مثال :

<form>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search">
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit">
        <i class="glyphicon glyphicon-search"></i>
      </button>
    </div>
  </div>
</form>

<form>

</button>

</div>

</form>

وضعیت های مختلف فرم در bootstrap 3

INPUT FOCUS: خط outline دور کنترل input حذف شده و یک box با سایه قرار می گیرد.
DISAbLED INPUTS: با استفاده از کلاس disabled می توان یک فیلد را غیر فعال می کند.
DISAbLED FIELDSETS: با استفاده ازکلاس disabled تمام کنترل های فیلد ورودی را غیر فعال می کند.
READONLY INPUTS : با افزودن صفت readonly از ورود یا ویرایش اطلاعات توسط کاربر جلوگیری می کند.
VALIDATION STATES: شامل کلاسهای .has-warning, .has-error یا.has-success برای اعتبار سنجی ورودی کاربر است.
ICONS: با استفاده از کلاس .has-feedback می توانید یک آیکون بازخورد اضافه کرد.
HIDDEN LAbELS: افزودن کلاس .sr-only باعث عدم نمایش برچسب (Label) ها می شود.

مثال زیر چگونگی استفاده از وضعیت های فوق را در فیلدهای ورودی یک فرم Horizontal نشان می دهد:

مثال :

<form class="form-horizontal">
  <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="disabledInput" 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="disabledInput" 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>

با افزودن تغییراتی در مثال فوق، یک فرم Inline در مثال زیر ایجاد می کنیم:

مثال :

<form class="form-inline">
  <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>

کلام آخر

در مباحث فوق که به نوعی در تکمیل مباحث بخش قبل، ارائه گردید. شما را با انواع ورودی های Input پیشرفته در bootstrap 3 آشنا کردیم. امیدواریم که از مباحث بخوبی استفاده کرده باشید.

QR: جلسه ۲۳ : ورودی های Input پیشرفته در Bootstrap 3

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۲۳ : ورودی های Input پیشرفته در Bootstrap 3

مقدمه

ورودی های Input پیشرفته در bootstrap 3

ورودی های ایستا(static)

گروه بندی عناصر input

وضعیت های مختلف فرم در bootstrap 3

کلام آخر

لیست مطالب دوره

آموزش بوت استرپ 3

سیستم grid در Bootstrap 3

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ