English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Настройка форм Bootstrap4

    Bootstrap4 позволяет настроить некоторые стили форм, чтобы заменить стиль по умолчанию браузера.

Настройка галочки

Если нужно настроить галочку, можно установить <div> в качестве родительского элемента, класс .custom-control и .custom-checkbox, галочка как дочерний элемент поместить в этот <div>, затем галочка настроена type="checkbox"класс .custom-control-input.

Текст флажка использует label используется класс .custom-control-label,label of for Значения свойств должны соответствовать id флажка.

<!DOCTYPE html>
<html>
<head>
  <title>Пример Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>Настройка флажка</h2>
  <p>Если нужно настроить флажок, можно установить <div> в качестве родительского элемента, класс .custom-control и .custom-checkbox, флажок в качестве дочернего элемента поместить в этот <div>, затем флажок установить type="checkbox", класс .custom-control-input.</p>
  <p>Текст флажка использует тег label, класс label использует .custom-control-label, значение свойства for тега label должно соответствовать id флажка.</p>
  <form action="/action_page.php">
    <div class="custom-control custom-checkbox mb-3">
      <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
      <label class="custom-control-label" for="customCheck"> Настройка флажка</label>
    </div>
    <input type="checkbox" id="defaultCheck" name="example2">
    <label for="defaultCheck"> Standart флажок</label>
    <br>
    <button type="submit" class="btn btn-primary">Подтвердить</button>
  </form>
</div>
</body>
</html>
Проверьте, посмотрите ‹/›

Результат выполнения после запуска:


Настройка полосового переключателя

Если нужно настроить полосовой переключатель, можно установить <div> в качестве родительского элемента, класс .custom-control и .custom-radio, полосовой переключатель в качестве дочернего элемента поместить в этот <div> внутри, затем полосовой переключатель установить type="radio"класс .custom-control-input.

текст полосового переключателя использует label используется класс .custom-control-label,label of for Значения свойств должны соответствовать тегу id.

<!DOCTYPE html>
<html>
<head>
  <title>Пример Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>Настройка полосового переключателя</h2>
  <p>Если нужно настроить полосовой переключатель, можно установить div в качестве родительского элемента, класс .custom-control и .custom-radio, флажок в качестве дочернего элемента поместить в этот div, затем полосовой переключатель установить type="radio", класс .custom-control-input.</p>
  <p>Текст радиокнопки используется тегом label, тег label использует класс .custom-control-label, значение атрибута for тега label должно соответствовать id радиокнопки.</p>
  <form action="/action_page.php">
    <div class="custom-control custom-radio">
      <input type="radio" class="custom-control-input" id="customRadio" name="example1">
      <label class="custom-control-label" for="customRadio">Пользовательская радиокнопка</label>
    </div>    
    <input type="radio" id="defaultRadio" name="example2">
    <label for="defaultRadio"> Standartная радиокнопка</label>
    <br>
    <button type="submit" class="btn btn-primary">Подтвердить</button>
  </form>
</div>
</body>
</html>
Проверьте, посмотрите ‹/›

Результат выполнения после запуска:

Пользовательские элементы формы отображаются на одном ряду

Мы можем использовать класс .custom-control-inline на внешнем элементе для обертывания пользовательских элементов формы, чтобы они отображались на одном ряду:

<!DOCTYPE html>
<html>
<head>
  <title>Пример Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>Пользовательские элементы формы отображаются на одном ряду</h2>
  <p>Мы можем использовать класс .custom-control-inline на внешнем элементе для обертывания пользовательских элементов формы, чтобы они отображались на одном ряду:</p>
  <form action="/action_page.php">
    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" class="custom-control-input" id="customRadio1" name="example1">
      <label class="custom-control-label" for="customRadio1">Пользовательская радиокнопка 1</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" class="custom-control-input" id="customRadio2" name="example2">
      <label class="custom-control-label" for="customRadio2">Пользовательская радиокнопка 2</label>
    </div>
    <button type="submit" class="btn btn-primary">Подтвердить</button>
  </form>
</div>
</body>
</html>
Проверьте, посмотрите ‹/›

Результат выполнения после запуска:

Пользовательский список выбора

Создать пользовательский список выбора можно на <select> Добавить класс .custom-select к элементу:

<!DOCTYPE html>
<html>
<head>
  <title>Пример Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>Пользовательское меню выбора</h2>
  <p>Создание пользовательского меню выбора можно выполнить, добавив класс .custom-select к элементу select:</p>
  <form>
  <select name="cars" class="custom-select-sm">
    <option selected>Пользовательское меню выбора</option>
    <option value="Google">Google</option>
    <option value="w3codebox">w3codebox</option>
    <option value="Taobao">Taobao</option>
  </select>
 </form>
</div>
</body>
</html>
Проверьте, посмотрите ‹/›

Результат выполнения после запуска:

если мы хотим настроить размер пользовательского меню выбора, мы можем использовать .custom-select-sm, .custom-select-lg для настройки их размера:

<!DOCTYPE html>
<html>
<head>
  <title>Пример Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>Размер пользовательского меню выбора</h2>
  <p>Если мы хотим настроить размер пользовательского меню выбора, мы можем использовать .custom-select-sm, .custom-select-lg для настройки их размера:</p>
  <form>
    <!-- Маленькие -->
    <select name="cars" class="custom-select-sm">
      <option selected>Маленькие пользовательские меню выбора</option>
      <option value="Google">Google</option>
      <option value="w3codebox">w3codebox</option>
      <option value="Taobao">Taobao</option>
    </select>
   
    <!-- Большие -->
    <select name="cars" class="custom-select-lg">
      <option selected>Большие пользовательские меню выбора</option>
      <option value="Google">Google</option>
      <option value="w3codebox">w3codebox</option>
      <option value="Taobao">Taobao</option>
    </select>
  </form>
</div>
</body>
</html>
Проверьте, посмотрите ‹/›

Результат выполнения после запуска:

пользовательский ползунок

мы можем добавить class  для type="range" добавить класс .custom-range к вводу для настройки пользовательского ползунка:

<!DOCTYPE html>
<html>
<head>
  <title>Пример Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>Настройка ползунка по умолчанию</h2>
  <p>Мы можем добавить класс .custom-range к вводу type="range" для настройки пользовательского ползунка:</p>
  <form action="/action_page.php">
    <label for="customRange">Настройка ползунка по умолчанию</label>
    <input type="range" class="custom-range" id="customRange" name="points1">
    <label for="defaultRange">Стандартный ползунок</label>
    <input type="range" id="defaultRange" name="points2">
    <p><button type="submit" class="btn btn-primary">Подтвердить</button></p>
  </form>
</div>
</body>
</html>
Проверьте, посмотрите ‹/›

Результат выполнения после запуска:

настройка контроллера загрузки файлов

Мы можем добавить класс .custom-file в  class установлено type="file" и добавляет .custom-file-input:

текст контроллера загрузки файлов использует label метки, метки используются классом .custom-file-label,label of for значение атрибута должно соответствовать контроллеру загрузки файлов id.

<!DOCTYPE html>
<html>
<head>
  <title>Пример Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>Настройка контроллера загрузки файлов</h2>
  <p>Мы можем добавить класс .custom-file к родительскому элементу, затем установить input типа "file" и добавить .custom-control-label:</p>
  <form action="/action_page.php">
    <p>Настройка стиля загрузки файла по умолчанию:</p>
    <div class="custom-file mb-3">
      <input type="file" class="custom-file-input" id="customFile" name="filename">
      <label class="custom-file-label" for="customFile">Выберите файл</label>
    </div>
    
    <p>Стандартный стиль загрузки файла:</p>
    <input type="file" id="myFile" name="filename2">
  
    <div class="mt-3">
      <button type="submit" class="btn btn-primary">Подтвердить</button>
    </div>
  </form>
</div>
</body>
</html>
Проверьте, посмотрите ‹/›

Результат выполнения после запуска: