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.

You might also like…

Criando um Site Gerenciável com Habemus e Scriptcase – Parte I

Criando um site gerenciável com Habemus e Scriptcase. Hoje iremos tirar o site do Habemus col...

Criando um Site Gerenciável com Habemus e Scriptcase – Parte II

Hoje vamos dar continuidade ao post anterior “Criando um Site Gerenciável com Habemus e Scriptca...

Como testes A/B podem melhorar a qualidade do design do seu website e gerar mais conversões

Testes A/B permitem comparar duas versões de um mesmo produto e observar a eficácia de ...

You might also like…

Get new posts, resources, offers and more each week.

We will use the information you provide to update you about our Newsletter and Special Offers. You can unsubscribe any time you want by clinck in a link in the footer of any email you receive from us, or by contacting us at sales@scriptcase.net. Learn more about our Privacy Police.