Design & UX • Front-end • Scriptcase Criando botões com classes do bootstrap

O que é Bootstrap?

Como sabemos, o Bootstrap é um framework front-end que ajuda os desenvolvedores web a desenvolver páginas com tecnologia mobile (responsivo) sem ter que digitar uma linha de CSS. Além disso, o Bootstrap possui uma diversidade de componentes (plugins) em JavaScript (jQuery) que auxiliam o designer a implementar tootlip, menu-dropdown, modal, carousel, slideshow, entre outros, sem a menor dificuldade; apenas acrescentando algumas configurações no código, sem a necessidade de criar scripts e mais scripts.

Então hoje falaremos sobre como criar e configurar botões usando o bootstrap.

Os botões são criados através da tag <button> </button>, mas o bootstrap dá sempre um visual mais harmonioso para o front-end. Dessa forma apenas incluindo classes dessa biblioteca, transformamos um botão comum e sem estilo, num botão com estilo. Para criar um botão, devemos usar o código:

<button type="button">Nome do Botão</button>

Para acrescentar as classes do bootstrap, precisamos incluir os links da biblioteca bootstrap. São esses três:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

As classes do bootstrap que definem o padrão de cores são: btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, btn-link.

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Podemos também definir o tamanho dos botões acrescentando mais uma classe ao botão, usando btn-lg, btn-md, btn-sm, btn-xs:

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

Desta forma, teremos botões mais apresentáveis utilizando bootstrap. Para usar dentro do scriptcase, você pode criar um campo label recebendo o código do botão ou substituindo a classe do botão utilizando Jquery.

Para mais informações, acesse: http://www.w3schools.com/bootstrap/bootstrap_buttons.asp.

Botões do Scriptcase

Recentemente separamos os temas das aplicações geradas pelo scriptcase das configurações de CSS dos botões. Hoje são duas coisas totalmente independentes uma da outra. Para ajudar nossos clientes a criarem temas avançados para seus botões, nós criamos uma ferramenta de criação dos temas que pode ser encontrada no menu Layout -> “CSS dos botões”.

A ferramenta permite que você faça o upload de imagens, ícones e configure os principais elementos de CSS possíveis em um botão.

Com o template criado, devemos habilitá-lo dentro da aplicação desejada no menu Layout da aplicação -> Visualização -> Botão.

Dessa forma você tem a possibilidade de criar seus temas para botões dentro do Scriptcase mesmo sem ter um conhecimento avançado no assunto.

Deseja saber mais sobre o melhor ferramenta de desenvolvimento web do mercado? Clique aqui e conheça o Scriptcase.