Bootstrap Colorpicker
Функциональный плагин для Bootstrap, добавляет параметры цвета через input, сделано подробное описание, используются форматы hex, rgb, rgba, hsl, hsla.* Demo plugin, download file.
Версия: v3.4.0
Каталог: Плагины Bootstrap
Категория: Улучшение
Bootstrap: 3, 4, 5
Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, WHMCS
Язык: Английский
Вес файла: 648.7 Kb
Уникальный ID: 845
Посмотрели: 1719 раз
Скачать бесплатно
Помощь: установка & настройка
Скачали бесплатно: 38 раз
Прокомментировали: 0 раз
Рейтинг: 5.0 / 5 - 1 голосов
Тип лицензии: CC BY 4.0
Авторство: https://itsjavi.com/bootstrap-colorpicker/index.html
Информация: Пользователям
Информация: Правообладателям
Поделился: BootstrapТема
Добавлено: 2016-04-03 в 20:17
Метка: 1656695938
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" /> <link href="https://itsjavi.com/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css" rel="stylesheet"> <style> .colorpicker.colorpicker-2x { width: 272px; } .colorpicker-2x .colorpicker-saturation { width: 200px; height: 200px; } .colorpicker-2x .colorpicker-hue, .colorpicker-2x .colorpicker-alpha { width: 30px; height: 200px; } .colorpicker-2x .colorpicker-alpha, .colorpicker-2x .colorpicker-preview { background-size: 20px 20px; background-position: 0 0, 10px 10px; } .colorpicker-2x .colorpicker-preview, .colorpicker-2x .colorpicker-preview div { height: 30px; font-size: 16px; line-height: 160%; } .colorpicker-saturation .colorpicker-guide { height: 10px; width: 10px; border-radius: 10px; margin: -5px 0 0 -5px; } </style> </head> <body> <div id="cp2" data-color="#6D2781"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script> <script src="https://itsjavi.com/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js"></script> <script> $(function () { $('#cp2').colorpicker({ inline: true, container: true, format: null, customClass: 'colorpicker-2x', sliders: { saturation: { maxLeft: 200, maxTop: 200 }, hue: { maxTop: 200 }, alpha: { maxTop: 200 } } }); }); </script> </body>
Посоветуйте этот материал другу отправив ему письмо на E - mail
Написать администрации по поводу этого материала