Os 14 principais plug-ins gratuitos do jQuery com suporte para bootstrap

Publicados: 2020-08-19

BuiltWith relata que existem 6,9 milhões de sites usando Bootstrap em seu design. Esse é um número insano de sites, ainda mais insano quando percebemos que até 10% dos sites na lista dos 10.000 principais sites estão usando Bootstrap para uma finalidade ou outra. O crescimento dessa estrutura ultrapassou tudo o que os criadores poderiam esperar, e o Bootstrap permanece como a única estrutura doméstica dentro da comunidade de desenvolvimento de front-end.

Existem muitos outros motivos / benefícios para usar o Bootstrap, mas esses serão os únicos que você saberá instantaneamente, ou talvez já saiba. Para procurar plug-ins jQuery com suporte ao Bootstrap, isso deve significar que você já conheceu o Bootstrap antes. O que são esses plug-ins jQuery compatíveis com Bootstrap? Bem, eles são uma coleção de plug-ins jQuery que têm algum tipo de interação com o Bootstrap, que pode estar em dois formatos.

O primeiro formato é que o plug-in influencia diretamente sua experiência de Bootstrap, o outro é que o plug-in está usando Bootstrap para suportar a si mesmo; como estilo e cores. Você pode folhear a lista rapidamente, nós a tornamos acessível, mas se você estiver interessado, verifique as descrições que compartilhamos para saber mais sobre cada uma. As páginas de download levam diretamente ao GitHub, onde você pode obter a versão mais recente de cada plugin / biblioteca e também ler a documentação completa.

As razões para usar o alongamento Bootstrap:

  • Fácil de trabalhar - o Bootstrap não tem uma grande curva de aprendizado. É por isso que foi amplamente adotado por desenvolvedores iniciantes. Começar é tão fácil quanto baixar um dos boilerplates e juntar os componentes necessários do seu projeto.
  • Responsivo - dispositivos móveis, tablets e computadores desktop podem compartilhar o mesmo design e funcionalidade de design quando um site é construído com Bootstrap.
  • Layout de grade - o Bootstrap é construído em uma base de layouts de grade de 12 colunas. E como as classes e seletores são nativos do Bootstrap, você pode posicionar rapidamente a localização dos componentes. Também conhecido como desenvolvimento rápido para a web.
  • Velocidade de desenvolvimento - um dos muitos motivos pelos quais tantos desenvolvedores estão usando o Bootstrap é a quantidade de tempo que leva para desenvolver um site pronto para produção. Para projetos de tamanho menor, pode levar até um dia, até algumas horas, se tudo o que for realmente necessário for conhecido.
  • Customizável - Bootstrap não restringe seus próprios componentes a um único estilo; muito pelo contrário. O Bootstrap incentiva todos a baixar os componentes e estilizá-los com designs e abordagens exclusivos. O resultado final também é conhecido como kits de IU personalizados.
  • Suporte a JavaScript - o Bootstrap oferece suporte a muitos componentes personalizados. Embora, um dos melhores recursos / benefícios para muitos desenvolvedores tenha sido a integração nativa de plug-ins JavaScript que fazem todos os tipos de atividades dinâmicas para o site; guias, controles deslizantes e muito mais.
  • Comunidade - Bootstrap não é apenas um framework. É uma comunidade de desenvolvedores e designers que dão vida à estrutura. Essas são as pessoas que tornam tudo possível. E como pode ser aprendido pelos números, há muito amor nessa estrutura. O aspecto da comunidade também contribui para obter acesso mais fácil ao suporte para quaisquer questões técnicas relacionadas à construção de um site com Bootstrap.

Entrada de arquivo de bootstrap

plug-in jquery de entrada de arquivo de inicialização
Bootstrap Fileinput é um plugin exclusivo que funciona como uma extensão para incluir a seleção de arquivos em seu projeto. Ele vem com muitos recursos, como seleção de vários arquivos, uploads de partes recuperáveis ​​e também oferece suporte a arquivos diferentes. Quanto ao último, você pode empregar Bootstrap Fileinput para imagens, vídeo, áudio, texto, flash, etc. Bootstrap Fileinput vem compatível com o recurso de arrastar e soltar, inclui o andamento do upload e contém uma opção para adicionar e excluir arquivos.

Existem vários exemplos disponíveis para usos básicos, avançados e outros da ferramenta, para que você tenha uma ideia melhor de como o Bootstrap Fileinput faz as coisas. Para colocar o Bootstrap Fileinput em jogo, você pode usar o NPM ou o Yarn, ele funciona até mesmo com o jsDelivr, apenas para garantir. O processo de instalação e a documentação adicional também fazem parte do pacote para sua conveniência.

Download

PNotify

plugin pnotify jquery
Você deseja incluir notificações diferentes em seu aplicativo ou projeto? Se for esse o caso, faça a coisa certa escolhendo PNotify. Este plugin jQuery com suporte para Bootstrap faz o truque com muitas opções excelentes para escolher. Quanto à exibição de notificações, você pode usar estilos de brinde e barra de ferramentas, banners, diálogos, alertas e a lista continua. Ele garante uma excelente experiência do usuário, mesmo quando se trata de exibir várias notificações ao mesmo tempo.

Download

Calendário de bootstrap

plugin jquery de calendário de bootstrap
Este próximo projeto é bastante autoexplicativo, já que o nome revela tudo. Se você estiver procurando por um calendário de visualização completa, é melhor considerar o uso do plugin Bootstrap Calendar. É uma solução 100% reutilizável, ou seja, você pode adaptá-la às suas necessidades. Por exemplo, todos os botões que permitem ao usuário visualizar e carregar eventos são individuais. A visualização do calendário é realmente ajustável, mas vem com o básico, como ano, mês, semana e dia. Você também pode experimentar em primeira mão acessando a demonstração ao vivo e ver o Calendário Bootstrap em vigor. Se você está procurando incorporar um grande calendário, agora você pode com o uso deste plugin Bootstrap e jQuery.

Download

Controle deslizante de bootstrap

plugin jquery de controle deslizante de bootstrap

Os controles deslizantes são widgets de site versáteis. Mas não estamos falando sobre controles deslizantes de conteúdo aqui. De certa forma, nós somos, mas realmente não somos. O tipo de controle deslizante de que estamos falando aqui, que pode ser construído com esta biblioteca, é o tipo que você usa para deslizar para cima e para baixo com valores definidos especificamente. Isso significa que você pode criar controles deslizantes interativos com a finalidade de permitir que os usuários selecionem o preço por meio de um controle deslizante. Você pode criar um controle deslizante que permite criar uma ferramenta de seleção de cores, uma mistura de cores e correspondência, se desejar. Esses são os controles deslizantes que a biblioteca Bootstrap Slider permite que você crie. Recomendamos que você reserve um tempo e dê uma olhada mais de perto na documentação para explorar os controles deslizantes de demonstração disponíveis, para entender melhor o propósito desta biblioteca em seu próprio site.

Download

Classificável por bootstrap

classificável por bootstrap

Já discutimos uma biblioteca de tabelas. Agora é hora de outro, e acreditamos sinceramente que isso pode complementar muito o anterior. O Bootstrap Sortable permite que você anexe uma biblioteca jQuery ao seu site que permitiria aos visitantes classificar os dados da tabela de acordo com suas próprias preferências. Isso significa classificar dados para valores ASC / DSC, também classificar por alfabeto e outros valores de classificação comuns que encontramos em plataformas que permitem classificar dados.

Download

Filtros jQuery Backoffice

filtros backoffice jquery

Executando um conjunto de dados complicado dentro dos aspectos internos da sua empresa e precisa de uma maneira de classificar os dados sem perder tempo ou desempenho? Os filtros jQuery Backoffice podem ajudar. É uma biblioteca projetada para ajudá-lo a classificar qualquer tipo de banco de dados / dados de site por meio do uso de filtros específicos. Os filtros podem ser selecionados e configurados por você. Isso significa que você ainda tem controle total sobre a forma como os dados aparecerão para você. E, claro, os filtros poderiam ser tecnicamente aplicados para uso de front-end também, em situações em que seria necessário que os usuários classificassem possíveis correspondências para retornos de dados específicos; como mecanismos de pesquisa, lojas de comércio eletrônico e outros.

Download

Formulário de contato de bootstrap com reCaptcha do Google

bootstrap 3 formulário de contato com googles recaptcha

Qual seria a aparência da web se não houvesse formulários de contato. Essa é a beleza da web. Um recurso verdadeiramente necessário será naturalmente desenvolvido por alguém, e que dia foi quando alguém decidiu criar um formulário de contato para a web. Hoje em dia, os foms de contato evoluíram além dos recursos básicos. Você pode usar o formulário de contato para enviar dados confidenciais, se candidatar a um emprego, enviar uma mensagem simples e muito mais. A única coisa que falta em muitos formulários de contato modernos é a capacidade de se protegerem contra spammers. E para lidar melhor com o spam, a maioria dos desenvolvedores profissionais da web recomendará o uso da plataforma reCAPTCHA do Google. A base sobre a qual esta biblioteca particular foi construída. Um formulário de contato orientado para Bootstrap que usa reCAPTCHA para proteger seu formulário de contato contra spammers.

Download

Índice jQuery

índice do jquery

É muito provável que em algum ponto durante o seu histórico de navegação na web, você tenha encontrado um conteúdo tão grande que precisava de um índice analítico. Se não, pense em qualquer livro que você leu ou pegou no passado. Ele tinha o que é chamado de página de capítulos, onde todos os capítulos do livro são listados. Você pode comparar isso com o índice do livro específico. Na web, as pessoas costumam usá-lo para discutir a documentação, mas também em grandes partes do conteúdo; como tutoriais e guias, e esta biblioteca, Tocify, vai ajudá-lo a criar páginas de conteúdo individuais acompanhadas por um índice analítico, para ajudar seus leitores a se envolverem melhor com seu conteúdo e para ajudá-los a compreender melhor a estrutura geral do que você ' está tentando transmitir.

Você pode opcionalmente estilizar Tocify com Bootstrap ou jQuery UI Themeroller e, opcionalmente, animado com efeitos de exibição / ocultar jQuery. Tocify também fornece opcionalmente suporte para rolagem suave, realce de rolagem, extensão de página de rolagem e suporte para botões de avançar e voltar.

Download

Editor Bootstrap Grid

editor de grade de bootstrap

Ter uma grade, em primeiro lugar, já é um grande impulso para o fluxo de trabalho de design de sites. Mas ser capaz de reorganizar a grade usando um sistema de arrastar e soltar, isso é revolucionário! O Grid Editor é um editor específico do Bootstrap para reorganizar a aparência do seu sistema de grade do Bootstrap. Os criadores o construíram de uma maneira que permitirá que você edite o conteúdo, a aparência e a localização do Grid por meio do uso de ferramentas tradicionais de gerenciamento de conteúdo. Você não saberá o quão útil e conveniente esta ferramenta realmente é, até que você tente em seu próprio site Bootstrap.

Download

Notificação de bootstrap

notificação de bootstrap

Notificações de sites recebem muita atenção atualmente. Os scripts de notificação e pop-up estão aumentando à medida que mais proprietários de sites percebem que, para capturar totalmente a atenção dos usuários, é necessário fazer experiências com as notificações. Os pop-ups podem ser irritantes, mas quando têm um propósito mais profundo, eles realmente fazem muito sentido de usar. Você pode tomar o formulário de contato como um bom exemplo. Você pode criar uma notificação para alertar o usuário após um envio bem-sucedido. Ou você pode usar a notificação para alertar o usuário quando houver um erro em seu perfil. Os usos para notificações são muitos, e a biblioteca Bootstrap Notify leva Alertas para o próximo nível. Uma plataforma de configurações personalizadas está disponível para selecionar configurações diferentes para criar a notificação perfeita que irá capturar a atenção dos visitantes.

Download

Seleção múltipla de bootstrap

seleção múltipla de bootstrap

Ainda estamos explorando ativamente as bibliotecas que nos ajudam a manipular nossos formulários. Formulários são muito importantes, e esta biblioteca mostra. O Bootstrap Multiselect nos permite criar ações de formulários específicos que nos permitiriam selecionar várias opções dentro de um formulário. Uma biblioteca muito útil que pode ser útil para situações em que o usuário precisa selecionar a quantidade de algo, mas também em diferentes variações. Ou selecione entre os estilos em que várias opções de estilo estão presentes, nem é preciso dizer - os formulários de processo de candidatura também podem se beneficiar desta biblioteca, porque os candidatos muitas vezes recebem perguntas que exigem várias opções de resposta e às vezes é necessário selecionar várias respostas para melhor retratar a proficiência do usuário.

Download

Plug-ins jQuery Premium desenvolvidos com suporte a Bootstrap

Plugins como tais começaram a se originar no mercado de código aberto gratuito. Colocar um preço em algo não era realmente uma coisa. Claro, exceto para aqueles que trabalharam como freelancers nos estágios iniciais da evolução da web. Atualmente, os plug-ins premium são bastante comuns. Eles oferecem recursos e funcionalidades exclusivos que ninguém mais se preocupou em criar no espaço de código aberto. A equipe Colorlib abraça esse conteúdo, mesmo que você se sinta afiliado a essas empresas de vez em quando, não é porque estamos de alguma forma tentando ordenhar nossa comunidade, é porque podemos garantir o que outros estão criando e queremos nosso comunidade ter a mesma experiência boa que estamos tendo. Se nenhum dos plug-ins de código aberto for de grande interesse para você, talvez alguns dos premium sejam. É tudo apenas para se divertir, de qualquer maneira.

Widget RSS jQuery & Bootstrap

widget jquery bootstrap rss

Os feeds RSS ainda são algumas das formas mais populares de consumir conteúdo em trânsito. O processo de verificação de cada site que lemos individualmente, em busca de novos conteúdos, pode ser muito demorado e enfadonho. Rapidamente perdemos a paciência e é aí que os feeds RSS são realmente úteis. O script a seguir é para alinhar o jQuery e o Bootstrap. Ele cria uma experiência única de busca de feed RSS para o seu site. Basta anexar a biblioteca e especificar o local usando uma chamada jQuery e está tudo pronto. Você pode configurar quantos feeds desejar.

Download

Bootstrap JQuery Paypal Shopping Cart

bootstrap jquery paypal shopping cart

Inicie rapidamente uma loja online que aceite pagamentos via PayPal. Os desenvolvedores usaram o Bootstrap para fazer todo o estilo. Dá-lhe a liberdade de adicionar quaisquer componentes Bootstrap adicionais ao seu projeto conforme desejar. Esta é uma solução completa de carrinho de compras. Portanto, você deve ter certeza de que conhece o propósito desta biblioteca antes de usá-la. Você pode extrair tecnicamente componentes individuais para uso pessoal, se desejar.

Download

DMSS - Bootstrap jQuery Style Switcher

dmss bootstrap jquery style switcher

Diga olá ao DMSS - um alternador de estilo pessoal construído com jQuery e compatível com Bootstrap para websites. Agora, os desenvolvedores direcionaram este produto a qualquer webmaster. Os desenvolvedores, em particular os web designers, que desejam exibir seu trabalho final em uma variedade de estilos. Não ajuda criar apenas um único estilo e, em seguida, refazer outro estilo e fazer com que o usuário o visualize. Em vez disso, uma escolha muito mais flexível seria programar / codificar um design inteligente. Esse design deve permitir que o alternador de estilo mude rapidamente a aparência geral do estilo do site. Esse é o tipo de biblioteca que você está vendo aqui. Eles também adicionariam um widget simples ao seu site. Isso permite que os usuários alterem completamente a aparência do estilo que estão visualizando, com base em suas próprias recomendações.

Download

Bibliotecas jQuery com suporte para Bootstrap

No final, há variedade suficiente de scripts, plug-ins e bibliotecas para fazer uma coleção real deles. Estes são os melhores e mais relevantes plug-ins jQuery que suportam a integração do Bootstrap como algo nativo. De formulários ao gerenciamento direto do site, até scripts totalmente abrangentes que adicionam experiências únicas ao seu site. Adicionamos tudo isso para seus visitantes. Deixe-nos saber o que você achou desta coleção. Estamos ansiosos para apresentar ângulos novos e frescos para essas peças.