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">&times;</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.