PROF. ANA PAULA AMBRÓSIO ZANELATO …...Como programar com ASP.NET e C#. São Paulo: Novatec, 2010....
Transcript of PROF. ANA PAULA AMBRÓSIO ZANELATO …...Como programar com ASP.NET e C#. São Paulo: Novatec, 2010....
P R O F . A N A P A U L A A M B R Ó S I O Z A N E L A T O
L I N G U A G E N S E T E C N O L O G I A S D E P R O G R A M A Ç Ã O I V
Bootstrap
Sumário
• Definição
• Passos
• Sistema de Grid
• TipoGrafia
•Formulário
• Botões
• Imagens
• Classes Auxiliares
• Classes Responsivas
• Referências Bibliográficas.
Definição
Bootstrap é um framework front-end que facilita a vida dos desenvolvedores web a criar sites com tecnologia mobile (responsivo) .
Passos
1. Download Bootstrap
http://getbootstrap.com.br/
2. Entenda a estrutura
Versão minificada: utilizar nos projetos.
Passos
3. Adicione o Jquery
jquery.com/download
4. Lembre-se que podemos personalizar!
Sistemas de Grid
A Classe container é uma div, que garante que o seu layout vai ficar alinhado na página, e com margens para as laterais. Ele também centraliza o conteúdo na tela do browser.
<div class="container"> </div>
Sistemas de Grid
A classe .container-fluid para fazer o container (e o layout) ficar com 100% de largura.
<div class=" container-fluid "> </div>
Sistemas de Grid
A classe row (linhas), define as divisões horizontais do seu layout.
<div class"container"> <div class="row"> ... </div> </div>
Sistemas de Grid
As columns (colunas), no Bootstrap, definem as divisões verticais das rows (linhas) do seu layout.
OBS: A soma sempre deve ser menor ou igual a 12.
<div class"container"> <div class="row"> <div class="col-md-6"> </div> <div class="col-md-6"> </div> </div> </div>
Sistemas de Grid
<div class="row"> <!-- 3 + 6 + 3 = 12 --> <div class="col-md-3"> </div> <div class="col-md-6"> </div> <div class="col-md-3"> </div> </div>
A classe col-md-offset-X : insere colunas a esquerda e direita.
Sistemas de Grid
Tipografia
Sublinhado:
<u>Essa linha de texto se tornará sublinhada</u>
Negrito:
<strong>renderiza como texto em negrito</strong>
Itálico
<em>renderizado como texto em itálico</em>
Tipografia
Alinhamento:
<p class="text-left">Texto alinhado à esquerda.</p>
<p class="text-center">Texto alinhado ao centro.</p>
<p class="text-right">Texto alinhado à direita.</p>
<p class="text-justify">Texto justificado.</p>
<p class="text-nowrap">Texto sem alinhamento.</p>
Tipografia
Transformações:
<p class="text-lowercase">Texto em minúsculo.</p>
<p class="text-uppercase">Texto em maiúsculo.</p>
<p class="text-capitalize">Texto capitalizado.</p>
Tipografia
Listas sem estilo:
<ul class="list-unstyled">
<li>...</li>
</ul>
Listas em linha:
<ul class="list-inline">
<li>...</li>
</ul>
Formulário
<form> <div class="form-group"> <label for="exampleInputEmail1">Endereço de e-mail</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Senha</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">Entrada de arquivo</label> <input type="file" id="exampleInputFile"> </div> <div class="checkbox"> <label> <input type="checkbox"> Me selecione </label> </div> <button type="submit" class="btn btn-default">Enviar</button> </form>
Formulário
Formulário em linha: (form-line)
Formulário
Formulário em linha: (form-horizontal)
Formulário
Radio: classes: “radio” e “radio-inline” Checkbox: classes: “checkbox” e “checkbox -inline”
Formulário
Label classes: “control-label” Adicionar help: <span class="help-block">Formato Correto dd/mm/aaaa</span>
Formulário
Classes de validação: <div class="has-warning form-group"> ....... </div> • has-warning • has-error • has-success
Formulário
Classes de validação (ícone): Classe: has-feedback Adicionar tag span após o input, com as classes: Glyphicon, form-control-feedback e: • glyphicon-ok • glyphicon-remove • glyphicon- warning-sign
Botões
Adicionar a classe btn e: • btn-default • btn-warning • btn-danger • btn-success • btn-primary • btn-link • btn-block: deixa o botão ocupando toda coluna.
Imagens
• img-responsive: deixa a imagem responsiva. • img-rounded: arredonda os cantos. • img-circle: deixa a imagem arredondada. • img-thumbail: adiciona uma borda em torno da imagem.
Classes Auxiliares
• Cor de Texto: • text-primary • text-success • text-warning • text-info • text-danger
• Cor de fundo: • bg-primary • bg-success • bg-warning • bg-info • bg-danger
Classes Auxiliares
• Flutuação: • pull-left: flutua para a esquerda • pull-right: flutua para a direita • clearfix: limpa a flutuação
• center-block: insere display block, margem esquerda e direita auto. • mostrar/esconder:
• show: mostra • hidden: esconde um elemento
Classes Responsivas
• para determinar quais devem aparecer: • visible-xs-block • visible-sm-block • visible-md-block
• para esconder: • hidden-xs • hidden-sm • hidden-md
Ícones
• Utilizar a classe Glyphicons e : • http://getbootstrap.com/components/
<span class=“glyphicon glyphicon-search></span> <a href=“#” class=“btn btn-default”><span class=“glyphicon glyphicon-search></span> Buscar </a>
Tabs
• Adicionar em uma lista a classe nav e nav-tabs. • Adicionar a regra tablist
Tabs
• Adicionar em uma lista a classe nav e nav-pills. • Para deixar na vertical, adicione a classe nav-stacked. • Para ficar responsivo, adicionar a classe nav-justified.
NavBar
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="collapse navbar-collapse" > <div class="navbar-form " role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Busca"/> <input type="submit" value="OK" class="btn btn-default" /> </div> </div> </div> </div> </nav>
Janelas Modal
<!-- janela modal --> <div class="modal fade" id="modal01" role="dialog" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span> <span class="sr-only">Fechar janela modal</span> </button> <h4 class="modal-title">Janela Modal</h4> </div> <div class="modal-body"> <p>Conteúdo da janela modal</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button> <button type="button" class="btn btn-primary">Outro botão</button> </div> </div> </div> </div> <!-- // janela modal -->
Janela Modal
Chamar a janela modal: <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal01">Abrir janela modal</button> - Adicionar BootsTrap.js e Jquery.js
Carousel
-Adicionar BootsTrap.css, BootsTrap.js e Jquery.js
<div class="container"> <div class="row"> <div class="col-xs-12"> <div id="carousel01" class="carousel slide" data-ride="carousel" data-interval="3000"> </div> </div> </div> </div>
Carousel
- Imagens: <div class="carousel-inner"> <div class="item active"> <img src="imgs/slider/foto1.jpg" alt="Imagem escrito Foto1" > <div class="carousel-caption"> <h3>Título da imagem</h3> <p>texto relativo a imagem</p> </div> </div> </div>
Carousel
- Adicionar botões de voltar e avançar: <a class="left carousel-control" href="#carousel01" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel01" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a>
Carousel
- Adicionar botões: <ol class="carousel-indicators"> <li data-target="#carousel01" data-slide-to="0" class="active"></li> <li data-target="#carousel01" data-slide-to="1"></li> <li data-target="#carousel01" data-slide-to="2"></li> </ol>
Referências Bibliográficas
SHARP, John. Microsoft Visual C# 2008:passo a passo. Tradução Edson Furmankiewicz. Porto Alegre: Bookman, 2008.
LOTAR, Alfredo. Como programar com ASP.NET e C#. São Paulo: Novatec, 2010.
MANZANO, José Augusto N. G.. Estudo dirigido de Microsoft Visual C# 2010 express. São Paulo: Érica, 2010.
DEITEL, Harvey M.. C# como programar. São Paulo: Pearson Makron Books, 2003.
CAMACHO JÚNIOR, Carlos Olavo de Azevedo. Desenvolvimento em camadas com C# . Net. Florianópolis: Visual Books, 2008.
TROELSEN, Andrew. Profissional C# e a plataforma .Net 3.5 curso completo:dominando completamento o universo .Net. São Paulo: Alta Books, 2009.