fernando vaz de lima framework twitter …...cdn’s (java script e jquery) ... (google chrome,...

FERNANDO VAZ DE LIMA

INFORMAÇÃO E COMUNICAÇÃO

FRAMEWORK TWITTER BOOTSTRAP 3

A expansão do Ensino Técnico no Brasil, fator importante para

melhoria de nossos recursos humanos, é um dos pilares do

desenvolvimento do País. Esse objetivo, dos governos estaduais e federal, visa à

melhoria da competitividade de nossos produtos e serviços, vis-à-vis com os dos

países com os quais mantemos relações comerciais.

Em São Paulo, nos últimos anos, o governo estadual tem investido de forma

contínua na ampliação e melhoria da sua rede de escolas técnicas - Etecs e Classes

Descentralizadas (fruto de parcerias com a Secretaria Estadual de Educação e com

Prefeituras). Esse esforço fez com que, de agosto de 2008 a 2011, as matrículas

do Ensino Técnico (concomitante, subsequente e integrado, presencial e a distância)

evoluíssem de 92.578 para 162.105. Em 2016, no primeiro semestre, somam 186.619.

A garantia da boa qualidade da educação profissional desses milhares

de jovens e de trabalhadores requer investimentos em reformas, instalações,

laboratórios, material didático e, principalmente, atualização técnica e

pedagógica de professores e gestores escolares.

A parceria do Governo Federal com o Estado de São Paulo, firmada por

intermédio do Programa Brasil Profissionalizado, é um apoio significativo para

que a oferta pública de Ensino Técnico em São Paulo cresça com a qualidade

atual e possa contribuir para o desenvolvimento econômico e social do Estado e,

consequentemente, do País.

Almério Melquíades de Araújo Coordenador do Ensino Médio e Técnico

Centro Estadual de Educação Tecnológica Paula Souza

Diretora SuperintendenteLaura Laganá

Vice-Diretor SuperintendenteCésar Silva

Chefe de Gabinete da SuperintendênciaLuiz Carlos Quadrelli

REALIZAÇÃOUnidade do Ensino Médio e Técnico

CoordenadorAlmério Melquíades de Araújo

Centro de Capacitação Técnica, Pedagógica e de Gestão - Cetec Capacitações

ResponsávelLucília dos Anjos Felgueiras Guerra

Responsável Brasil ProfissionalizadoSilvana Maria Brenha Ribeiro

Professores Coordenadores de ProjetosCarlos Eduardo RibeiroFabricio Braoios AzevedoTiago Jesus de Souza

AutorFernando Vaz de Lima

Projeto de formação continuada de professores da educação profissional do Programa Brasil Profissionalizado - Centro Paula Souza - Setec/MEC

Sumário

CapacitaçãodeTwitterBootstrap3..................................................................................................4

Introdução......................................................................................................................................4

OqueéoTwitterBootstrap?.........................................................................................................4

QuemutilizaoTwitterBootstrap?................................................................................................5

PorqueutilizaroframeworkTwitterBoostrap?..........................................................................6

MarcaçãoHTML..............................................................................................................................7

DownloaddoTwitterBoostrap3...................................................................................................8

CDN’s(JavaScripteJQuery)........................................................................................................14

PrimeiraPágina!!.........................................................................................................................15

ComofuncionamosGrids............................................................................................................16

CustomizaçãodeGrids.................................................................................................................18

Breakpoints..................................................................................................................................21

Multiclasses,aninhadoeoffset...................................................................................................23

Modelandoeinserindoelementosdepáginaemwebsitebásico.............................................27

Conteúdos.....................................................................................................................................27

Ícones.........................................................................................................................................27

Botões........................................................................................................................................29

Breadcrumbs.............................................................................................................................30

Jumbotron.................................................................................................................................30

Thumbnails................................................................................................................................31

Alerts.........................................................................................................................................32

Panels........................................................................................................................................33

Navegação....................................................................................................................................35

Formulários..................................................................................................................................36

Mídia.............................................................................................................................................38

ConhecendooBootswatch..........................................................................................................41

Downloaddetemplatesecustomização.....................................................................................41

DesenhandoecodificandoaHomePage....................................................................................44

Menu.........................................................................................................................................45

Finalização....................................................................................................................................48

CapacitaçãodeTwitterBootstrap3

Introdução

Sempre que abordamos o tema “Desenvolvimento para WEB”, nos remete a uma

cargamuitograndedecódigosvoltadosparaaprogramaçãodofront-endeback-end,

poisadiversidadededispositivoserecursosexistentesparaofuncionamentodeWeb

ServiceseSitestornouaacessibilidademaioremaisdinâmicaparaousuário,porémo

trabalho e o conhecimento do desenvolvedor deve ser muito amplo, acarretando

diretamente em problemas de produtividade. Para minimizar esses empecilhos, o

desenvolvedorpodecontarcomosframeworksparaWEB.Emresumo,umframework

WEB é um conjunto de códigos prontos e reutilizáveis que aumentam

consideravelmenteaprodutividadedotrabalhodoprogramador.

OqueéoTwitterBootstrap? OBootstrap,éumframeworkdecódigoabertomuitoutilizadonodesenvolvimentode

projetosparaWEB.CriadoporMarkOttoeJacobThorntonquandoaindatrabalhavam

paraaredesocialTwitter,comointuitodepadronizaroconjuntodeferramentasde

desenvolvimentodeinterfacedetodaaempresa.

Desdeoseulançamentoemagostode2011,oBootstrapsócresceempopularidadee

adesãoparaacriaçãodenovosprojetos,pois tornaodesenvolvimentodofront-end

muitomaisrápidoefácilporcontadagrandequantidadedeestilosprontosemCSSe

plug-insemJavaScript.

Compatível com a linguagem HTML5 e CSS3, o Bootstrap possibilita a criação de

layouts responsivos e o uso de grids. Como qualquer ferramenta, possui prós e

contras, por isso é muito importante o conhecimento de sua estrutura e de suas

funcionalidadesparasaberempregá-locorretamenteenomomentocerto.

QuemutilizaoTwitterBootstrap? Porseromaispopular,atualmenteinúmerossitesforamdesenvolvidosatravésdeste

framework,possocitarcomoexemplos:

http://www.globo.com

http://www.minecraftedu.com

http://2016.render-conf.com/-(JqueryConference2016)

Para conhecer mais exemplos de sites que foram desenvolvidos com o framework

Bootstrapacesse:

https://bootstrapbay.com/blog/built-with-bootstrap

PorqueutilizaroframeworkTwitterBoostrap?

Antes de apontar as vantagens que o framework oferece aos desenvolvedores, vou

explicar o que significa o termo “Bootstrap”ou “Bootstrapping”. No inglês britânico

podeseralgoquevocêpodefazersozinho,semaajudadeterceiros,uma“ajudinha”,

esseéopropósito,tornarapartededesenvolvimentofront-endmuitomaisprodutiva

esimples,semanecessidadedeumvastoconhecimentoemdesignouprogramação.

Nem sempre temos tempo ou inspiração para concluir um projeto, neste caso...

Bootstrap!

Muitasvantagens:

ü Possuidocumentaçãodetalhadaedefácilentendimento;

ü Éotimizadoparaodesenvolvimentodelayoutsresponsivos;

ü Possui componentes suficientes para o desenvolvimento de qualquer site ou

sistemawebcominterfacesimples;

ü Facilitaacriaçãoeediçãodelayoutspormanterpadrões;

ü Funcionaemtodososnavegadoresatuais (GoogleChrome,Safari, Firefox, IE,

OperaeEdge).

MarcaçãoHTML

NestaetapavouprepararoambienteparaodesenvolvimentodaspáginasHTMLcom

Bootstrap. Para se trabalhar com o framework, é necessária a utilização de algum

editorHTML,podeseratémesmootradicionalBlocodeNotas.Nestecursoutilizarei

um editor gratuito e multiplataforma da Adobe, denominado Brackets, esta

ferramentapodeserencontradaemhttp://brackets.io

eestánaversão1.6.

Crie uma pasta em algum local do seu sistema operacional para que seja possível

organizarosarquivosdocursoerenomeiecomocurso_boostrap.

AbraoseueditorHTMLedigiteocódigoabaixo:

Salveestearquivodentrodapastacurso_bootstrapcomonomedepag1.html.

DownloaddoTwitterBoostrap3

AgoraquetemosumlocaleumarquivobásicoemHTMLparainiciar,éprecisofazero

downloaddoframework.AbraumnavegadorWebedigiteaseguinteURL:

Napáginainicial,cliquenobotão“BaixarBootstrap”.

Napágina “PontodePartida”, oBootstrapoferece três opçõesdedownloadparao

desenvolvimentodepáginasWEB:

ü Bootstrap–Éaopçãomínimaerequerida,utilizadaparaodesenvolvimento.

Possuitodasasfuncionalidadesdoframework.

ü Source–EstaversãoincluitodaadocumentaçãodoBootstrap.

ü Sass–Estaversãoéparaserutilizadacomopré-processador.

Neste curso utilizaremos a versão mínima (Bootstrap), clique no botão “Baixar

Bootstrap”,parafazerodownloaddosarquivospertencentesàferramenta.

Após o download, extraia o conteúdo do arquivo compactado dentro da pasta

curso_bootstrap.

Depoisdeextrairoconteúdo,pode-sevisualizaraseguinteestrutura:

Apagueoarquivodeorigemcomonomedebootstrap-3.3.6-dist(compactado).

Renomeie a pasta bootstrap-3.3.6-dist para bootstrap e mova o arquivo pag1.html

paraoseuinterior.

Porfim,resulta-senaseguinteestrutura:

AcessandoapastaCSSépossívelvisualizartodososarquivosdeestiloquecompõema

estrutura completa do framework, neste curso usaremos apenas os arquivos

bootstrap.min.cssebootstrap.css,apagueorestantedosarquivosdapasta.

Obootstrap.csséoarquivoprincipaldeestilizaçãodoframeworkemumaversãonão

compacta, própria para estudo e verificações, neste arquivo o desenvolvedor

encontrará todas as classes disponíveis para estudo e verificações. No caso de

desenvolvimento de páginas, é utilizado o arquivo minificado bootstrap.min.css, o

conteúdodestedocumentoéomesmodoanterior,masporserumcódigocompacto

éutilizadonoprocessodecriaçãodesitesoupáginasweb.

Bootstrap.css

Bootstrap.min.css

Apasta fonts contémosarquivos referentesaosglyphiconse fontesquepodemser

aplicados como conteúdo de front-end, cada arquivo corresponde a um navegador

web,nãoénecessárioapagarnenhumarquivos,todosdevemserutilizados.

Sobre a pasta js, ela contém os arquivos de scripts nativos que permitem o

funcionamento dos plug-ins nativos do framework, como no caso dos arquivos de

estilo, existe o bootstrap.js (versão não compacta) e bootstrap.min.js (versão

compacta),nãoseráutilizadooarquivonpm.js.

CDN’s(JavaScripteJQuery)

OsCDN’ssão linksexternosmuitoúteisparaodesenvolvimentoe funcionalidadede

aplicaçõesparainternet,poisdispensamahospedagemdeumagrandequantidadede

arquivos de estilos, plug-ins ou fontes no servidor.Neste curso não faremos uso de

CDN’spoisusaremososarquivosqueestãonaspastasmostradasnotópicoanterior.

ExemplodeCDNdosarquivosdeestilodoBoostrap:

<link rel=”stylesheet”

href=”https://maxcdn.boostrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”>

VersãocompactadoarquivodescriptcomCDN:

<scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">

</script>

PrimeiraPágina!!

ParasecriarumtemplatebásicodeumaaplicaçãocomBootstrap,énecessárioque

tenhamososeguintecódigo:

Insiraoselementosquefaltamnacodificaçãodoarquivopag1.htmlqueestánapasta

bootstrap.

Salveoseudocumentoeexecuteoarquivononavegador,setudoestivercerto,você

teráoseguinteresultado:

Percebaqueoestilode fonteque foiempregadonapágina fazpartedo framework

Bootstrap. Sendo assim a ferramenta está funcionando e pronta para o

desenvolvimento.

ComofuncionamosGrids Gridéumapalavradeorigeminglesaquetraduzidaparaoportuguêssignificagrelha,

malhaourede.AfunçãodeumGridemCSSédefinirumpadrãoflexívelquerecebaos

elementosquecompõemo layoutdapáginaWeb.OGridCSSéumagrade formada

por retângulos organizados horizontalmente e verticalmente e no seu interior é

possívelinserirosconteúdosHTML.

OelementoHTMLdestinadoa criar um retângulo, “container”de conteúdo,oubox

CSS, é o elemento DIV. Partindo dessa premissa, onde agrupamos vários elementos

DIV, podemos afirmar que temos um Grid vertical com uma coluna. Se quisermos

posicionar múltiplos elementos DIV na posição horizontal, ou seja, um ao lado do

outro,seránecessárioousodapropriedade“float”daCSScomosvaloresleftouright

aplicadosaoelemento.

Abaixo,segueumexemplodeGridcomlargurafixade960px,formadopor2linhase

4colunascom200pxdelarguradecadaboxdeconteúdo.

ExemploCSS:

ExemploHTML:

Resultado:

CustomizaçãodeGrids

PorpadrãoosistemadeGriddoBootstraputiliza12colunasaolongodapáginaque

podemserdivididas,massevocênãoquiserusartodasas12colunasindividualmente,

vocêpodeagruparascolunasemconjuntoparacriarcolunasmaisamplas.

960px largura (container)

200px largura (box) 200px largura (box) 200px largura (box) 200px largura (box)

ParaquesejapossívelmanipularefazerusodosistemadeGriddoBootstrapalgumas

regrasdevemserrespeitadas,quesão:

ü Todalinhaouclasse“row”,deveráestarnointeriordeumaclassedoBootstrap

denominada“container”ou“container-fluid”.Adiferençaentreasduasclasses

équeaprimeiraéumboxcomlargurafixaepossuilimiteslaterais,easegunda

ocupatodoespaçodatelasemmargenslaterais.

ü Todacoluna,ouclasse“col-xx-xx”,deveráestarsempredentrodaclasse“row”.

As colunas agrupam o conteúdo, portanto devem ser os únicos elementos

filhosdentrodeuma“row”.

No exemplo abaixo temos o uso do Grid padrão do Bootstrap. Utiliza-se a classe

“container” para que o grid fique no interior de um elemento que possua um

alinhamentocentralizadonapáginaemargenslaterais.

Aplicou-seemumalinha(row)umblocode8colunaseoutrode4colunasparaalocar

oconteúdodapágina.

<divclass="container"><!--boxcomlargurafixa-->

<divclass="row"><!—linha-->

<divclass="col-md-8"><!–primeiroblocodecolunas-->

<h1>ExemplodeGrid-8colunas</h1><!--conteúdo-->

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus ex eu

varius viverra. Suspendisse tempus sapien ac metus venenatis tincidunt. Nullam

vehicula libero eget risus egestas, vitae congue nunc viverra. Phasellus eu placerat

felis,ac laciniaex.Fuscevariusanteegetrutrumrhoncus.Fuscecondimentumlectus

in risus luctus, idultrices loremmattis.Quisque in ligulaeuurna fermentumdictum.

Namvitaeipsumutligulafringillavulputatesedscelerisquetortor.

Pellentesque sem enim, malesuada quis volutpat vitae, semper eget lorem. Nulla

lacinia pretiummi at aliquam. Duis sit amet porta mauris, non tempus quam. Cras

suscipitporttitorerat,necfeugiatarcuporttitoreu.Phasellusfaucibusdictumlibero.

Donecgravida fringillacommodo.Donecac liberoquisduidignissim finibus.Namsit

amet ullamcorper ligula. Nulla facilisi. Etiam porta magna eu ligula efficitur, non

venenatisorciauctor.Donecquisestgravidamagnafringillacondimentummalesuada

volutpatenim.Pellentesquenonturpisaugue.Nambibendumliberosedleopulvinar

pulvinar.</p>

</div>

<divclass="col-md-4"><!—segundoblocodecolunas-->

<h1>ExemplodeGrid-4colunas</h1>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus ex eu

varius viverra. Suspendisse tempus sapien ac metus venenatis tincidunt. Nullam

vehicula libero eget risus egestas, vitae congue nunc viverra. Phasellus eu placerat

felis,ac laciniaex.Fuscevariusanteegetrutrumrhoncus.Fuscecondimentumlectus

in risus luctus, idultrices loremmattis.Quisque in ligulaeuurna fermentumdictum.

Namvitaeipsumutligulafringillavulputatesedscelerisquetortor.

</p>

</div>

</div>

</div>

Abaixooresultadodocódigoanterior:

Breakpoints

Breakpointséumapalavrainglesaquesignificapontosdequebra.Estetermoémuito

utilizado em design responsivo para definir a medida da largura da janela do

navegadorweb.Masoqueseriamaisapropriadodesedizeréqueaoinvésdepontos

dequebra,naverdadetemosadaptaçãodolayoutàtela.

AprincipalfunçãodoframeworkBootstrapdentrododesenvolvimentoWEBéaplicar

àspáginasaresponsividade,ouseja,oconteúdodeveserajustadodeacordocomo

dispositivonoqualeleserávisualizado(viewport),paraissoaferramentacontacom4

classesdeGrid:

ü col-xs(telefones)-definecolunascomviewportmenordoque768px;

ü col-sm(tablets)–definecolunasparadispositivoscomviewportde768pxaté

991px;

ü col-md(desktop)–definecolunasparadispositivoscomviewportde991pxaté

1199px;

ü col-lg (telas largas)–definecolunasparadispositivos comviewportmaiordo

que1199px.

Noexemploabaixotemosumlayoutcomviewportparatabletcom1linhae3colunas

deconteúdo:

<divclass=container>

<divclass=”row”>

<divclass=”col-sm-4”>

<h1>MeuBootstrap</h1>

<p>Loremipsumdolorsitamet,consecteturadipiscingelit.Pellentesquetempusexeu

varius viverra. Suspendisse tempus sapien ac metus venenatis tincidunt. Nullam

vehicula libero eget risus egestas, vitae congue nunc viverra. Phasellus eu placerat

felis,ac laciniaex.Fuscevariusanteegetrutrumrhoncus.Fuscecondimentumlectus

in risus luctus, idultrices loremmattis.Quisque in ligulaeuurna fermentumdictum.

Namvitaeipsumutligulafringillavulputatesedscelerisquetortor.</p>

</div>

<divclass=”col-sm-4”>

<h1>Conteúdo2</h1>

<p>Loremipsumdolorsitamet,consecteturadipiscingelit.Pellentesquetempusexeu

varius viverra. Suspendisse tempus sapien ac metus venenatis tincidunt. Nullam

vehicula libero eget risus egestas, vitae congue nunc viverra. Phasellus eu placerat

felis,ac laciniaex.Fuscevariusanteegetrutrumrhoncus.Fuscecondimentumlectus

in risus luctus, idultrices loremmattis.Quisque in ligulaeuurna fermentumdictum.

Namvitaeipsumutligulafringillavulputatesedscelerisquetortor.</p>

</div>

<divclass=”col-sm-4”>

<h1>Conteúdo3</h1>

<p>Loremipsumdolorsitamet,consecteturadipiscingelit.Pellentesquetempusexeu

varius viverra. Suspendisse tempus sapien ac metus venenatis tincidunt. Nullam

vehicula libero eget risus egestas, vitae congue nunc viverra. Phasellus eu placerat

felis,ac laciniaex.Fuscevariusanteegetrutrumrhoncus.Fuscecondimentumlectus

in risus luctus, idultrices loremmattis.Quisque in ligulaeuurna fermentumdictum.

Namvitaeipsumutligulafringillavulputatesedscelerisquetortor.</p>

</div>

</div>

</div>

Resultadocomviewportparadesktop:

Resultadocomviewportparatablet:

Existemcasosondesãoaplicadosváriosbreakpointsdiferentesnoconteúdodeuma

página,oresultadoseráaadequaçãodaviewportdeclaradaaotrechodecódigodos

elementosHTML.

Multiclasses,aninhadoeoffset Conformefoicitadonotópicoanterior,ousodasclassescol-xs-x,col-sm-x,col-md-xe

col-lg-x separadamente, permite a alteração do layout de uma coluna para várias

colunas, usando como referência a viewport declarada. Mas existe também a

possibilidade de aplicar simultaneamente todas as classes de breakpoints do

frameworkemumasócoluna.

<divclass="container-fluid">

<divclass="row">

<divclass="rowprimeira">

<divclass="col-xs-12col-md-8">col-xs-12col-md-8</div>

<divclass="col-xs-6col-md-4">col-xs-6col-md-4</div>

</div>

<divclass="rowsegunda">

<divclass="col-xs-6col-md-4">col-xs-6col-md-4</div>

<divclass="col-xs-6col-md-4">col-xs-6col-md-4</div>

<divclass="col-xs-6col-md-4">col-xs-6col-md-4</div>

</div>

<divclass="rowterceira">

<divclass="col-xs-6">.col-xs-6</div>

<divclass="col-xs-6">.col-xs-6</div>

</div>

</div>

</div>

No exemplo acima, foi utilizada uma classe “container-fluid” (largura 100%) para

inserirogrid.Criou-se três linhas,nasduasprimeiras forammescladasas classesde

viewport para telefones e desktop, na terceira linha temos apenas uma classe com

viewportpara telefones.Asclasses“primeira”,“segunda”e“terceira”, foramcriadas

paracolorirosfundosdaslinhas,nãofazem

partedaestruturadoframework.Visualizeoresultadononavegadoreajustealargura

dajaneladamenoratéamaiorresolução.

DentrodopadrãodegriddoBootstrap, épossível aninharo conteúdoaumagrade

padrão,nestecasoénecessáriaacriaçãodeumanovaclasse“row”dentrodeoutra.

<divclass="container-fluid">

<divclass="rowprimeira">

<divclass="col-lg-7">coluna7</div>

<divclass="col-lg-5">coluna5</div>

<divclass="rowsegunda"><!--classeaninhada-->

<divclass="col-lg-3">3</div>

<divclass="col-lg-7">7</div>

<divclass="col-lg-2">2</div>

</div>

</div>

</div>

Resultado:

Dentro o framework Bootstrap existe uma classe que permite ao desenvolvedor

aumentaroespaçamentoentreascolunasdeumaoumaislinhas.Estaclasseéacol-

xx-offset-xx.

Dentro do padrão de 12 colunas do grid, deve-se subtrair os espaços que serão

inseridosentreascolunas:

Noexemploaclasse“col-md-offset-2”geraumespaçamentodeduascolunasentreas

classes“col-md-4”e“col-md-6”totalizandoas12colunasdogridpadrão.

Resultado:

Modelandoeinserindoelementosdepáginaemwebsitebásico

OselementosdepáginaouwidgetsdoBootstrap,sãodesenvolvidoscomcodificação

padrão e classes de CSS que estilizam e renderizam os componentes dentro da

padronizaçãodo framework, esses recursos tambémpodemser sobrescritosemum

outroarquivodeestilo,casoodesenvolvedorachenecessárioalterarascaracterísticas

dosmesmos.

Conteúdos

Ícones

Oframeworkdisponibilizamaisde260íconesdenominadosGlyphiconHalflings,estes

ícones foram desenvolvidos por terceiros e cedidos aos idealizadores do projeto

Bootstrap. Este componente pode ser inserido em qualquer elemento que não

influencie na funcionalidade do Bootstrap. Basicamente é empregado o elemento

HTML<span>parasetrabalharcomumíconeinlineedivparaníveisdebloco.

Existemduasclassesparainserirosíconesquesão:

ü glyphicon

ü glyphicon-*

Aprimeira classecontémas regrasCSSea segundadefineo tipode íconeque será

inserido.

Dentro do corpo da página digite o seguinte trecho de código e salve na pasta

juntamentecomaestruturadepastasdoBootstrap:

Resultado:

Parateracessoaoutrasclassesdeíconesacesse:

http://getbootstrap.com/components/#glyphicons-glyphs

Botões

Osbotõessãoelementosmuitoimportantesdentrodocontextodeinteratividadecom

o usuário.OBootstrap oferece sete tipos diferenciados de botões comas seguintes

classes:

ü .btn-default

ü .btn-primary

ü .btn-success

ü .btn-info

ü .btn-warning

ü .btn-danger

ü .btn-link

Aseguirocódigocomosexemplosdebotõesdisponíveis:

Resultado:

Breadcrumbs

São elementos indicam a localização da página atual dentro de uma hierarquia de

navegação. A classe empregada é a .breadcrumb e aplica-se a classe .active que

indicaráapáginaacessada.

Resultado:

Jumbotron

É um componente que auxilia na exibição de informações relevantes da página. Ele

pode ser exibido em partes da tela ou em tela inteira, a classe disponível é a

.jumbotron.

Resultado:

Thumbnails

É um elemento tipo miniatura que exibe em forma de grade elementos como,

imagens,texto,vídeos,botõeseetc.Aclassequeinsereesteelementonapáginaéa

.thumbnail.

Resultado:

Alerts

Componentes que fornecem mensagens de alerta para o usuário, para inserir este

elementonapágina sãoutilizadasduasclasses .alertealert-*,estes são formatados

emquatroclasses:

.alert-success;

.alert-info;

.alert-warning;

.alert-danger.

Resultado:

Panels

Estecomponenteresume-seemumacaixadeconteúdocombordasarredondadasque

servemparainserirconteúdodapágina.Existemmuitasopçõesdepanels,desdeuma

caixasimplesatécomposiçõesdecabeçalhoerodapé.Parainserirumelementopanel

simples na página, usa-se a classe .panel , .panel-default e panel-body para inserir

conteúdo:

Resultado:

Dentrodocontextodepanel,existeaopçãodeutilizarestacaixacomumcabeçalho

acoplado,aclassequeestilizaestecomponenteéapanel-heading:

Resultado:

Por fim, temos a classe .panel-footer, gera um rodapé no elemento para que seja

possívelinserirelementos:

Resultado:

Navegação

Oselementosdenavegaçãosãodeextremaimportânciadentrodocontextodelayout

enavegabilidadedosite,poiséatravésdelesqueousuáriopoderáacessarpartesda

páginaousite,e conteúdosexternos.Asclassesdabarradenavegaçãosão .navbar,

.navbar-default e navbar-inverse. Com as classes .navbar e navbar-default é criada

umabarradenavegaçãodecorcinza,paraquesejaalteradaacordabarraparapreta,

trocas-separaaclassenavbar-inverse:

Resultado:

Navbar-inverse

Resultado:

Formulários

Osformuláriossãomuitoimportantesparacapturarinformaçõesdosusuários,através

dos elementos de “input” os scripts de linguagem de programação pode processar

essasinformaçõesearmazená-lasemumservidor.OBootstrapdisponibilizatrêstipos

delayoutparaformulários:

ü Formuláriovertical(padrão);

ü Formuláriohorizontal;

ü Formulárioinline.

Para que estes layouts sejam aplicados à página é necessário seguir algumas regras

padrãodoframework:

ü Sempre use <form role = "form"> (ajuda amelhorar a acessibilidade para as

pessoasqueutilizamleitoresdetela);

ü Envolvaos rótulosecontrolesdos formuláriosem<divclass="form-group">

(necessárioparaoespaçamentoideal);

ü Adicionar classe .form-control para todos os elementos textuais <input>,

<textarea>e<select>elementos.

Resultado:

Mídia

AlémdeestilizarelementosHTML,oBootstrappossuiclassesquemodificamoaspecto

visualdeelementosdeimagemeadequaçãoaodispositivo(responsividade).Paraisso

são disponibilizadas as classes, .img-rounded, .img-circle, .img-thumbnail e .img-

responsive.

Exemplocomaclasse.img-rounded

Resultado:

Exemplocomaclasse.img-circle

Resultado:

Exemplocomaclasse.img-thumbnail

Resultado:

Exemplocomaclasse.img-responsive

Estaclassepermitequeaimagemseadequeaqualquerresoluçãodeteladequalquer

dispositivo.

ConhecendooBootswatch

É um site que reúne vários temas gratuitos para serem utilizados em projetos que

empregam o framework Bootstrap. Para acessar o Bootswatch digite no navegador

http://bootswatch.com/.

O site conta com 17 modelos diferenciados em estilos, que permitem ao

desenvolvedoralteraraaparênciadoBootstraptradicional.Paraaplicarosestilosao

conteúdopadrãodoBootstrapénecessárioodownloaddoarquivobootstrap.min.css.

Downloaddetemplatesecustomização

Selecione um tema, através do botão “Preview” é possível conhecer todos os

componentesjácomoestiloalterado.

No botão “Download” clique na opção bootstrap.min.css para copiar o arquivo de

estilodotema.Estearquivodevesubstituiroarquivonativodoframework.

Aoabriroarquivonajaneladonavegador,selecionetodooconteúdo(CTRL+A)ecole

em um novo arquivo de editor HTML. Salve este documento com o nome de

bootstrap.min.cssnapastacssdaestruturadepastasdeseuprojetoBootstrap.

A partir desse processo, o tema do Bootstrap padrão é alterado pelo do site

Bootswatch.

Para testar o novo estilo, será aplicada uma classe de botões e o resultado será a

aparênciadoscomponentesalteradas,digiteasclassesdoexemploabaixonointerior

deumtemplatepadrãodoBootstrapesalvecomonomedeindex.htmlnapastado

seuprojeto.

Resultado:

DesenhandoecodificandoaHomePage

DepoisdeconhecerostemasdoBootswatch,façaodownloaddeumdeleseorganize

oarquivodeestilodentrodeseuprojeto.Abaixotemosoexemploconcluídodeuma

páginasimplescomcomponentesbásicodoBootstrap.

Parainiciaroprocessodedesenvolvimento,crieumarquivocomotemplatebásicodo

Bootstrapesalveemsuapastadoprojetocomonomedeatv_final.html.

Menu

Dentro do corpo da página <body></body>, insira a codificação que se refere ao

conteúdodapáginaemenu.

Inicie uma nova classe de linha para que seja possível inserir os componentes de

imagemetextocomomostranoexemplo:

Nesta próxima etapa, inseriremos os componentes thumbnails no corpo da página,

digiteocódigoabaixo:

Apósesteblocodecódigo,insiramaisumatag<hr>parasepararoconteúdo.Porfim

digiteacodificaçãoreferenteaorodapédapágina,sigaoexemploabaixo:

Oresultadofinaléumapáginasimples,leveeresponsiva,alterealarguradajanelado

navegadorparavisualizaraadequaçãodeconteúdo.

Nota*: Para que alguns itens sejam corretamente posicionados e coloridos, é

necessárioquesejainseridoentreastags<head></head>oestiloabaixo:

Finalização

OBootstrapéumframeworkmuitointeressanteefácildesetrabalhar,dentrodosite

http://getbootstrap.com você encontrará a documentação completa dos

componentes,estude,façatestescomasviewportseuseacriatividade,seustrabalhos

serãomuitosatisfatórios.

2017

FERNANDO VAZ DE LIMA

“Tecnólogo em Gestão da Tecnologia da Informação pela Universidade Newton Paiva (2010). Técnico em informática pela ETEC Praia Grande (2005). Atuou na tutoria do Curso de Aperfeiçoamento da UFABC - Gênero e Diversidade na Escola. Atualmente é professor e entusiasta de softwares livres”