BS kiritish maydonlari o‘lchami


ULASHISH

Formalarda kiritish maydonlari o‘lchami

Input elementlarining balandligini .input-lg va .input-sm kabi klasslar yordamida belgilang.

Elementlarning kengligini .col-lg-* va .col-sm-* kabi grid ustun klasslari yordamida belgilang.


Balandlik o‘lchami

Quyidagi misollarda turli balandlikdagi input elementlari ko‘rsatilgan:

Misol

<form>   <div class="form-group">     <label for="inputsm">Small input</label>     <input class="form-control input-sm" id="inputsm" type="text">   </div>    <div class="form-group">     <label for="inputdefault">Default input</label>     <input class="form-control" id="inputdefault" type="text">   </div>   <div class="form-group">     <label for="inputlg">Large input</label>     <input class="form-control input-lg" id="inputlg" type="text">   </div> </form>
O‘zingiz sinab ko‘ring »

<div class="form-group"> elementiga .form-group-* ni qo‘shib, gorizontal forma ichidagi yorliqlar va forma boshqaruv elementlarining o‘lchamini tezda o‘zgartirishingiz mumkin:

Misol

<div class="form-group form-group-lg">
O‘zingiz sinab ko‘ring »

Shuningdek, .input-group-sm yoki .input-group-lg klasslari yordamida .input-group ichidagi barcha kiritish maydonlari va boshqa elementlarning o‘lchamini tezda o‘zgartirishingiz mumkin:

Misol

<div class="input-group input-group-lg">
O‘zingiz sinab ko‘ring »


Ustun bo‘yicha o‘lcham

Quyidagi misollarda turli .col-xs-* klasslari yordamida turli kenglikdagi input elementlari ko‘rsatilgan:

Misol

<div class="form-group row">   <div class="col-xs-2">     <label for="ex1">col-xs-2</label>     <input class="form-control" id="ex1" type="text">   </div>   <div class="col-xs-3">     <label for="ex2">col-xs-3</label>     <input class="form-control" id="ex2" type="text">   </div>   <div class="col-xs-4">     <label for="ex3">col-xs-4</label>     <input class="form-control" id="ex3" type="text">   </div> </div>
O‘zingiz sinab ko‘ring »

Yordamchi matn

Formalarga blok darajasidagi yordamchi matn qo‘shish uchun .help-block klassidan foydalaning:

Misol

<div class="form-group">   <label for="pwd">Password:</label>   <input type="password" class="form-control" id="pwd" placeholder="Enter password">   <span class="help-block">This is some help text...</span> </div>
O‘zingiz sinab ko‘ring »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!