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>
001

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>
002

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>
003

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”.

 

004

 

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.

 

005
006

 

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

 

007

 

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.

Você pode gostar de…

Recepção de Parâmetros via GET em Aplicações do Tipo Formulário

Enviar um parâmetro a uma aplicação é sempre fácil quando feito dentro do ambiente do Scriptca...

Tendências de desenvolvimento web para 2017

Você verá neste post tendências para 2017 em Web Design, no meio Digital e em Desenvolvimento. Me...

Importando a biblioteca Bootstrap para dentro do Scriptcase

Neste artigo, mostraremos um exemplo prático de como tornar a biblioteca Bootstrap disponível no...

Comente este post

Receba novos posts, ofertas e muito mais toda semana.