English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
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>Проверьте, посмотрите ‹/›
Результат выполнения после запуска: