Tornando-se um desenvolvedor : Bootstrap

Mostrando postagens com marcador Bootstrap. Mostrar todas as postagens

terça-feira, 10 de janeiro de 2017

Desenvolvimento de web sites

Muita gente não sabe mas eu tenho desenvolvido web sites. Apesar do meu interesse maior ser Java, desenvolver web sites representa um desafio que se torna gratificante ao ser vencido. Segue meu Site e os trampos que faço, todos com custo bem abaixo do mercado, pois o foco é trabalhar com pequenos negócios.

gogetterz.com.br

quarta-feira, 25 de novembro de 2015

Bootstrap - Criando uma página de Login com Modais

Modais no Bootstrap são simples mas flexíveis caixas de dialogo. Um modal renderiza um cabeçalho, corpo, e uma coleção de ações no footer. Exemplo:

Então eu resolvi fazer um formulário de login com o Modal.

Para melhor entendimento eu dividi o código em três parte: modal-header que é a Tag do cabeçario, modal-body que é a Tag do corpo e modal-footer que é onde fica os botões ou ações do Modal/Caixa.

	<div id="loginModal" class="modal show" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog">
	<div class="modal-content">
Cabeçalho:	<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
	<h1 class="text-center">Login</h1>
	</div>
Corpo:	<div class="modal-body">
	<form class="form col-md-12 center-block">
	<div class="form-group">
	<input type="text" class="form-control input-lg" placeholder="Email">
	</div>
	<div class="form-group">
	<input type="password" class="form-control input-lg" placeholder="Senha">
	</div>
	<div class="form-group">
	<button class="btn btn-primary btn-lg btn-block">Logar</button>
	<span class="pull-right"><a href="#">Registrar</a></span>
	<span><a href="#">Precisa de Ajuda?</a></span>
	</div>
	</form>
	</div>
Coleções de ações no Footer:	<div class="modal-footer">
	<div class="col-md-12">
	<button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
	</div>
	</div>
	</div>
	</div>
	</div>

Todas as tags são do Bootstrap, e o código fonte você pode baixar aqui: Bootstrap Examples ou visualizar aqui: Bootstrap Examples GitHub.

segunda-feira, 23 de novembro de 2015

O que é o Bootstrap? Primeiros Passos

Bootstrap é um framework front-end que facilita a vida dos desenvolvedores web a criar sites com tecnologia mobile (responsivo). 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.

Características:

Possui uma interface super amigável e moderna;
Atualmente possui uma grande diversidade de templates;
Grande quantidade de plugins adaptados ou desenvolvidos para o framework;
Sistema responsivo;
Um dos frameworks mais utilizados no desenvolvimento de portais e sistemas do mundo;
Guia de aplicação;
Download facilitado e totalmente FREE!

Primeiros Passos com Bootstrap:

Faça o download do framework no site do desenvolvedor getbootstrap.com

Após realizar o download, você terá os seguintes arquivos:

bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

Adicione os arquivos nas respectivas pastas do seu projeto.
Chame o CSS e o JS dentro da tag <head> do seu HTML

<html> <head>
<title>Bootstrap - Primeiros Passos</title>



<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

</head>

Ao usar o bootstrap.js é necessário como requisito o famoso e poderoso jQuery, lembre-se de incluí-lo antes do Bootstrap

<body>

...

</body>

</html>

E pronto!

Não existe um arquivo executável, pois ele é somente um emaranhado de códigos que são aplicados ao seu projeto através da chamada no html.

O Bootstrap não é nada mais do que esses arquivos. Lembrando que para ambiente de desenvolvimento o melhor é incluir no seu HTML os arquivos identados: bootstrap.css e bootstrap.js, entretanto em ambiente de produção o indicado são os arquivos com o final .min pois são comprimidos e economizam muitos bytes o que melhora o carregamento das páginas HTML (principalmente em conexões 3G). Os arquivos no diretório img/ são os icones padrões do Bootstrap e são incluídos pelo arquivo css.

Código Fonte: Bootstrap Examples.

Crie uma página de login com: Modais do Bootstrap

Melissa Lobo.

quarta-feira, 31 de dezembro de 2014

Buttons - Bootstrap

Foi um bom ano, aprendi muitas coisas novas, e compartilhei parte desse conhecimento aqui. Pude ajudar e conhecer algumas pessoas. Mudei alguns conceitos, o emprego, a vida. E aos poucos venho me tornando a tal da Desenvolvedora. Agradeço a todos os leitores pelo apoio dicas, e pelas duvidas que me motivaram muito a escrever, ajudar e estudar ainda mais. Espero ter ajudado de alguma forma algum leitor ou futuro desenvolvedor. Aos poucos o Blog vai avançando, os assuntos e o nível de sabedoria também. Espero que em 2015 possamos aprender ainda mais. Que haja mais dicas, duvidas, sugestões e novos posts com novos temas. Pra finalizar segue abaixo uma dica que encontrei e venho aqui compartilhar com vocês. Que venha 2015!

Pra quem constrói Sites e não quer perder tempo com alguns detalhes, segue opções de botões, baseado em CSS puro e utilizando o Framework de css mais famoso do mundo, o bootstrap, bem bonitinhos e fofinhos, rápidos e fáceis de se utilizar.

Download

Melissa Lobo.


	<html> <head> <title>Bootstrap - Primeiros Passos</title>
	<!-- Incluindo o CSS do Bootstrap -->
	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
	</head>