кодесурса
«Twitter

Учебное пособие по Twitter Bootstrap Forms

script1adsense2code
script1adsense3code

Вступление

В этом уроке вы узнаете, как создавать формы, используя Twitter Bootstrap toolkit Version 2.0.

Twitter Bootstrap имеет стили для элементов управления формы, таких как input, textarea и select, имеет поддержку списков и флажков, имеет стили для отключенных элементов управления формы и включает такие состояния, как ошибка, предупреждение и успех для каждого элемента управления формы.

Начиная с версии 2.0, Twitter Bootstrap предоставляет вам четыре типа макетов форм:

  • Вертикальный (который является макетом формы по умолчанию)
  • Поиск
  • В соответствии
  • горизонтальный

В предыдущей версии Twitter Bootstrap Form Layouts горизонтальный макет был по умолчанию. Но не в версии 2.0. Здесь вертикальное расположение по умолчанию.

Создать вертикальный макет формы

Стиль для макета формы Twitter Bootstrap по умолчанию (вертикальная форма) соответствует классу .form-vertical файла bootstrap.css. Но. поскольку это макет формы по умолчанию, вам не нужно указывать класс .form-vertical при создании формы с макетом по умолчанию. В следующем примере показана форма, созданная с помощью макета формы Twitter Bootstrap Version2.0 по умолчанию.

Класс .well используется для создания контейнера форм (но у него есть и другое использование). Этот класс находится в строке от 1650 до 1663 файла bootstrap.css. Для этого макета входы являются блочными . В следующем примере показано, как создать макет формы по умолчанию с помощью Twitter Bootstrap. 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Version2.0 default form layout example</title> 
<meta name="description" content="Twitter Bootstrap Version2.0 default form layout example from w3resource.com."> 
<link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="well">
  <label>Label name</label>
  <input type="text" class="span3" placeholder="Type something…">
  <span class="help-inline">Associated help text!</span>
  <label class="checkbox">
    <input type="checkbox"> Check me out
  </label>
  <button type="submit" class="btn">Submit</button>
</form>
</body>
</html>

Смотреть онлайн

Посмотрите приведенный выше пример в другом окне браузера .

Создать макет формы поиска

Используя класс .form-search, который находится в строке с номерами 962-1003 (эти строки также содержат стиль для .form-inline) файла bootstrap.css, можно создать форму поиска. Для этого макета входы являются блочными . Ниже приведен пример: 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Version2.0 search form layout example</title> 
<meta name="description" content="Twitter Bootstrap Version2.0 search form layout example from w3resource.com."> 
<link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="well form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">Search</button>
</form>
</body>
</html>

Смотреть онлайн

Посмотрите приведенный выше пример в другом окне браузера .

Создать макет встроенной формы

Используя класс .form-inline, который расположен в строке с номерами 962-1003 (эти строки также содержат стиль для .form-search) файла bootstrap.css, можно создать форму поиска. Для этого макета входы встроены . Ниже приведен пример: 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Version2.0 inline form layout example</title> 
<meta name="description" content="Twitter Bootstrap Version2.0 inline form layout example from w3resource.com."> 
<link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="well form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox"> Remember me
  </label>
  <button type="submit" class="btn">Sign in</button>
</form>
</body>
</html>

Смотреть онлайн

Посмотрите приведенный выше пример в другом окне браузера .

Создать горизонтальный макет формы

Используя класс .form-inline, который расположен в строке с номерами 962-1003 (эти строки также содержат стиль для .form-search) файла bootstrap.css, можно создать форму поиска. Для этого макета входы встроены . Ниже приведен пример: 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Version2.0 horizontal form layout example</title> 
<meta name="description" content="Twitter Bootstrap Version2.0 horizontal form layout example from w3resource.com."> 
<link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="form-horizontal">
        <fieldset>
          <legend>Controls Bootstrap supports</legend>
          <div class="control-group">
            <label class="control-label" for="input01">Text input</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="input01">
              <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="optionsCheckbox">Checkbox</label>
            <div class="controls">
              <label class="checkbox">
                <input type="checkbox" id="optionsCheckbox" value="option1">
                Option one is this and that—be sure to include why it's great
              </label>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="select01">Select list</label>
            <div class="controls">
              <select id="select01">
                <option>something</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="multiSelect">Multicon-select</label>
            <div class="controls">
              <select multiple="multiple" id="multiSelect">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="fileInput">File input</label>
            <div class="controls">
              <input class="input-file" id="fileInput" type="file">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="textarea">Textarea</label>
            <div class="controls">
              <textarea class="input-xlarge" id="textarea" rows="3"></textarea>
            </div>
          </div>
          <div class="form-actions">
            <button type="submit" class="btn btn-primary">Save changes</button>
            <button class="btn">Cancel</button>
          </div>
        </fieldset>
</form>
</body>
</html>

Смотреть онлайн

Посмотрите приведенный выше пример в другом окне браузера .

Элементы управления состояния браузера Bootstrap в браузере

Когда поле ввода получает фокус или если оно отключено или доступно только для чтения, Twitter Bootstrap подразумевает специальные стили для них. От строки № 677 до 697 для bootstrap.css указываются стили для фокусированного ввода и элементы textarea.

Ранее Webkit «контур» использовался как значение для «: focus», но теперь он был изменен на «box-shadow».

Вот пример, показывающий, как стили изменяются для сфокусированного ввода, ввода только для чтения, отключенного ввода, отключенного флажка и отключенной кнопки. 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Version2.0 horizontal form browser status example</title> 
<meta name="description" content="Twitter Bootstrap Version2.0 horizontal form browser status example from w3resource.com."> 
<link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="form-horizontal">
        <fieldset>
          <legend>Controls Bootstrap supports</legend>
          <div class="control-group">
            <label class="control-label" for="input01">Focused Input</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="input01">
              <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="input01">Read only Input</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="input01" readonly="true">
              <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
            </div>
          </div>
		  <div class="control-group">
            <label class="control-label" for="input01">Disabled Input</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="input01" disabled>
              <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
            </div>
          </div>
		  <div class="control-group">
            <label class="control-label" for="optionsCheckbox" reado>Checkbox (disabled)</label>
            <div class="controls">
              <label class="checkbox">
                <input type="checkbox" id="optionsCheckbox" value="option1" disabled>
                Option one is this and that—be sure to include why it's great
              </label>
            </div>
          </div>
          <div class="form-actions">
            <button type="submit" class="btn btn-primary" disabled>Save changes (disabled button)</button>
            <button class="btn">Cancel</button>
          </div>
        </fieldset>
</form>
</body>
</html>

Смотреть онлайн

Посмотрите приведенный выше пример в другом окне браузера .

Стили для проверки формы

Twitter Bootstrap версии 2.0 имеет стили для ошибок, предупреждений и успеха при проверке формы. Это замечательная функция, так как всегда требуется применять другой стиль, чтобы показать, что пользователь создал ошибку при предоставлении данных в форму, или когда вам нужно сгенерировать предупреждение или даже уведомить пользователя, что он успешно введенные данные.

Вот пример: 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Version2.0 form error example</title> 
<meta name="description" content="Twitter Bootstrap Version2.0 form error example from w3resource.com."> 
<link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="form-horizontal">
        <fieldset>
          <legend>Form validation error, warning and success</legend>
          <div class="control-group error">
            <label class="control-label" for="inputError">Input with error</label>
            <div class="controls">
              <input type="text" id="inputError">
              <span class="help-inline">Please correct the error</span>
            </div>
          </div>
		  <div class="control-group warning">
            <label class="control-label" for="inputWarning">Input with warning</label>
            <div class="controls">
              <input type="text" id="inputWarning">
              <span class="help-inline">Something may have gone wrong</span>
            </div>
          </div>
		  <div class="control-group success">
            <label class="control-label" for="inputSuccess">Input with success</label>
            <div class="controls">
              <input type="text" id="inputSuccess">
              <span class="help-inline">Successfully entered</span>
            </div>
          </div>
		  <div class="control-group success">
            <label class="control-label" for="selectError">Select with success</label>
            <div class="controls">
              <select id="selectError">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
              <span class="help-inline">Successfully selected</span>
            </div>
          </div>
        </fieldset>
</form>
</body>
</html>

Смотреть онлайн

Посмотрите приведенный выше пример в другом окне браузера .

Вы можете скачать все файлы HTML, CSS, JS и изображения, используемые в наших руководствах, здесь.

Предыдущий: Twitter Bootstrap Tables учебник 3
Следующий: Twitter Bootstrap 3 кнопки учебник

Новый контент: Composer: менеджер зависимостей для PHP , R программирования

script1adsense4code
script1adsense5code
disqus2code
script1adsense6code
script1adsense7code
script1adsense8code
buysellads2code