Слияние кода завершено, страница обновится автоматически
В разных браузерах Select в стиле Bootstrap отображается по-разному, но одинаково некрасиво. Поскольку выпадающий список часто используется вместе с текстовым полем для ввода данных и отображения информации, то при использовании стиля form-control ширина выпадающего списка не совпадает с шириной текстового поля, что создаёт неудобства при работе. Автор переработал выпадающий список, сделав его более удобным и красивым, а также идеально подходящим для использования вместе с текстовыми полями.
Одностраничная демонстрация: http://longbowenterprise.gitee.io/longbow-select/
Демонстрация внутри проекта: http://argo.zylweb.cn/ (данный проект представляет собой открытый исходный код бэкенд-фреймворка для управления административной частью сайта [BootstrapAdmin])
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css">
<link href="./disk/longbow-select.css">
Скопируйте и вставьте теги <link>, которые импортируют таблицы стилей, в раздел <head> перед всеми остальными таблицами стилей.
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="./disk/longbow-select.js"></script>
Скопируйте и вставьте тег <script>, который импортирует скрипт, в конец раздела <body>.
Добавьте элемент HTML на веб-страницу:
<select id="test" class="d-none">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
</select>
<select id="test" class="d-none">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
</select>
<script>
$('#test').lgbSelect();
</script>
Можно настроить заполнитель, цвет рамки и другие параметры в соответствии с вашими потребностями:
<select id="test" class="d-none">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
</select>
<script>
$('#test').lgbSelect({ borderClass: 'primary' });
</script>
Пожалуйста, перейдите на страницу Issues, чтобы сообщить о проблемах.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )