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

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.

Por ,

7 de junho de 2016

Compartilhar esta postagem

a

Você pode gostar também…

Tendências de TI para 2024: Rumo a Novos Horizontes Tecnológicos

O mundo da Tecnologia da Informação (TI) e do Desenvolvimento Web está em constante evolução, ...

Low-code: Simplificando o desenvolvimento sem sacrificar a qualidade

No mundo ágil e competitivo de hoje, a produtividade é fundamental para o sucesso de qualquer emp...

Como a revolução da IA tem impactado os sistemas web

O mundo de TI está em constante evolução e sempre surgem novas tendências, muitas vezes fica at...

Você pode gostar também…

Receba novas postagens, recursos, ofertas e muito mais a semanalmente.

Nós utilizaremos seu email para te adicionar a nossa Newsletter semanal. Você pode sair desta lista a qualquer momento clicando no link no final dos emails recebidos, ou entrar em contato conosco em vendas@scriptcase.com.br. Conheça nossa Política de Privacidade.