Основной курс Bootstrap4

Слайд-шоу Bootstrap4 Группы ввода Bootstrap4

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

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

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

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

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

Пример Bootstrap4

<!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.

Пример Bootstrap4

<!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 на внешнем элементе для обертывания пользовательских элементов формы, чтобы они отображались на одном ряду:

Пример Bootstrap4

<!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 к элементу:

Пример Bootstrap4

<!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 для настройки их размера:

Пример Bootstrap4

<!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 к вводу для настройки пользовательского ползунка:

Пример Bootstrap4

<!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.

Пример Bootstrap4

<!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>

Проверьте, посмотрите ‹/›

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

Слайд-шоу Bootstrap4 Группы ввода Bootstrap4