Cмотреть на GitHub
Управление формой
Придание элементам управления текстовых формы, таким как <input> и <textarea> обновленных пользовательских стилей, размеров, состояний фокуса и многого другого.
На этой странице
Пример
<divclass="mb-3"><labelfor="exampleFormControlInput1"class="form-label">Email address</label><inputtype="email"class="form-control"id="exampleFormControlInput1"placeholder="name@example.com"></div><divclass="mb-3"><labelfor="exampleFormControlTextarea1"class="form-label">Example textarea</label><textareaclass="form-control"id="exampleFormControlTextarea1"rows="3"></textarea></div>Размеры
Для создания форм заданной высоты используются классы, такие как .form-control-lg и .form-control-sm.
<inputclass="form-control form-control-lg"type="text"placeholder=".form-control-lg"aria-label=".form-control-lg example"><inputclass="form-control"type="text"placeholder="Default input"aria-label="default input example"><inputclass="form-control form-control-sm"type="text"placeholder=".form-control-sm"aria-label=".form-control-sm example">Отключенная
Добавьте логический атрибут disabled чтобы он выглядел серым и не действовали события указателя.
<inputclass="form-control"type="text"placeholder="Disabled input"aria-label="Disabled input example"disabled><inputclass="form-control"type="text"placeholder="Disabled readonly input"aria-label="Disabled input example"disabledreadonly>Только для чтения
Добавьте атрибут булеанова readonly в форму ввода для предотвращения возможности изменения значения ввода. Такие типы ввода выглядят светлее (как неактивные формы ввода), но сохраняют стандартный курсор.
<inputclass="form-control"type="text"placeholder="Readonly input here..."aria-label="readonly input example"readonly>Простой текст только для чтения
Если в ваших формах вы хотите стилизовать элементы <input readonly> как простой текст, используйте класс .form-control-plaintext для удаления оформления форм по умолчанию и сохранения правильных отступов.
<divclass="mb-3 row"><labelfor="staticEmail"class="col-sm-2 col-form-label">Email</label><divclass="col-sm-10"><inputtype="text"readonlyclass="form-control-plaintext"id="staticEmail"value="email@example.com"></div></div><divclass="mb-3 row"><labelfor="inputPassword"class="col-sm-2 col-form-label">Password</label><divclass="col-sm-10"><inputtype="password"class="form-control"id="inputPassword"></div></div><formclass="row g-3"><divclass="col-auto"><labelfor="staticEmail2"class="visually-hidden">Email</label><inputtype="text"readonlyclass="form-control-plaintext"id="staticEmail2"value="email@example.com"></div><divclass="col-auto"><labelfor="inputPassword2"class="visually-hidden">Password</label><inputtype="password"class="form-control"id="inputPassword2"placeholder="Password"></div><divclass="col-auto"><buttontype="submit"class="btn btn-primary mb-3">Confirm identity</button></div></form>Выбор файла
<divclass="mb-3"><labelfor="formFile"class="form-label">Default file input example</label><inputclass="form-control"type="file"id="formFile"></div><divclass="mb-3"><labelfor="formFileMultiple"class="form-label">Multiple files input example</label><inputclass="form-control"type="file"id="formFileMultiple"multiple></div><divclass="mb-3"><labelfor="formFileDisabled"class="form-label">Disabled file input example</label><inputclass="form-control"type="file"id="formFileDisabled"disabled></div><divclass="mb-3"><labelfor="formFileSm"class="form-label">Small file input example</label><inputclass="form-control form-control-sm"id="formFileSm"type="file"></div><div><labelfor="formFileLg"class="form-label">Large file input example</label><inputclass="form-control form-control-lg"id="formFileLg"type="file"></div>Палитра цветов
<labelfor="exampleColorInput"class="form-label">Color picker</label><inputtype="color"class="form-control form-control-color"id="exampleColorInput"value="#563d7c"title="Choose your color">Списки данных
Списки данных позволяют вам создать группу <option>, к которой можно получить доступ (и автозаполнение) из <input>. Они похожи на элементы <select>, но имеют больше ограничений и различий в стиле меню. Хотя большинство браузеров и операционных систем включают некоторую поддержку элементов <datalist>, их стиль в лучшем случае несовместим.
Узнайте больше о поддержке элементов списка данных.
<labelfor="exampleDataList"class="form-label">Datalist example</label><inputclass="form-control"list="datalistOptions"id="exampleDataList"placeholder="Type to search..."><datalistid="datalistOptions"><optionvalue="San Francisco"><optionvalue="New York"><optionvalue="Seattle"><optionvalue="Los Angeles"><optionvalue="Chicago"></datalist>Sass
Переменные
$input-padding-y:$input-btn-padding-y;$input-padding-x:$input-btn-padding-x;$input-font-family:$input-btn-font-family;$input-font-size:$input-btn-font-size;$input-font-weight:$font-weight-base;$input-line-height:$input-btn-line-height;$input-padding-y-sm:$input-btn-padding-y-sm;$input-padding-x-sm:$input-btn-padding-x-sm;$input-font-size-sm:$input-btn-font-size-sm;$input-padding-y-lg:$input-btn-padding-y-lg;$input-padding-x-lg:$input-btn-padding-x-lg;$input-font-size-lg:$input-btn-font-size-lg;$input-bg:$white;$input-disabled-bg:$gray-200;$input-disabled-border-color:null;$input-color:$body-color;$input-border-color:$gray-400;$input-border-width:$input-btn-border-width;$input-box-shadow:$box-shadow-inset;$input-border-radius:$border-radius;$input-border-radius-sm:$border-radius-sm;$input-border-radius-lg:$border-radius-lg;$input-focus-bg:$input-bg;$input-focus-border-color:tint-color($component-active-bg,50%);$input-focus-color:$input-color;$input-focus-width:$input-btn-focus-width;$input-focus-box-shadow:$input-btn-focus-box-shadow;$input-placeholder-color:$gray-600;$input-plaintext-color:$body-color;$input-height-border:$input-border-width*2;$input-height-inner:add($input-line-height*1em,$input-padding-y*2);$input-height-inner-half:add($input-line-height*.5em,$input-padding-y);$input-height-inner-quarter:add($input-line-height*.25em,$input-padding-y*.5);$input-height:add($input-line-height*1em,add($input-padding-y*2,$input-height-border,false));$input-height-sm:add($input-line-height*1em,add($input-padding-y-sm*2,$input-height-border,false));$input-height-lg:add($input-line-height*1em,add($input-padding-y-lg*2,$input-height-border,false));$input-transition:border-color.15sease-in-out,box-shadow.15sease-in-out;$input-* используется большинством элементов управления формы (но не кнопками).
$form-label-margin-bottom:.5rem;$form-label-font-size:null;$form-label-font-style:null;$form-label-font-weight:null;$form-label-color:null;$form-text-margin-top:.25rem;$form-text-font-size:$small-font-size;$form-text-font-style:null;$form-text-font-weight:null;$form-text-color:$text-muted;$form-file-* are for file input.
$form-file-button-color:$input-color;$form-file-button-bg:$input-group-addon-bg;$form-file-button-hover-bg:shade-color($form-file-button-bg,5%);