fernando vaz de lima framework twitter …...cdn’s (java script e jquery) ... (google chrome,...
TRANSCRIPT
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”