Bootstrap

Prévia do material em texto

Bootstrap 3Bootstrap 3
Framework front-end para desenvolvimento web e mobileFramework front-end para desenvolvimento web e mobile
Daniel SchmitzDaniel Schmitz
This book is for sale atThis book is for sale at http://leanpub.com/livro-bootstrap http://leanpub.com/livro-bootstrap
This version was published on 2014-01-21This version was published on 2014-01-21
This is aThis is a Leanpub Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing book. Leanpub empowers authors and publishers with the Lean Publishing
process.process. Lean Publishing Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and is the act of publishing an in-progress ebook using lightweight tools and
many iterations to get reader feedback, pivot until you have the right book and build traction oncemany iterations to get reader feedback, pivot until you have the right book and build traction once
you do.you do.
©2013 - 2014 Daniel Schmitz©2013 - 2014 Daniel Schmitz
Also ByAlso By Daniel Schmitz Daniel Schmitz
AngularJS na práticaAngularJS na prática
ConteúdoConteúdo
IntroduçãoIntrodução . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . 11
O O qquue e é é BBoooottssttrraap . . p . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
O O qquue e ppooddeemmoos s ffaazzeer r ccoom m BBoooottssttrraap . . p . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
O O qquue e nnãão o é é BBoooottssttrraap p . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
O O qquue e vvococê ê pprreecciissa a ppaarra a tteessttaar r o o BBoooottssttrraap p . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
EExxeemmpplloos s ddo o lliivvrro . . . o . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Conceitos iniciaisConceitos iniciais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . 33
IInnssttaallaaççãão o . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
TTuuddo o ccoommppiillaaddo . . . . o . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
CCDDN . . . . . . . . . . . . . . . . . N . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
NNãão o eessqquueeçça a ddo o jjQQuueerry y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
TTeemmppllaatte e bbáássiicco o . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
CCaarraacctteerrííssttiiccaas s ddo o BBoooottssttrraap p . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
DDooccttyyppe e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
VViieewwppoorrt t . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
DDeesseennvvoollvviimmeenntto o wweeb b rreessppoonnssiivvo o . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
A classeA classe container container . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Grid SystemGrid System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . 88
IInnttrroodduuççãão o . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
DDiiffeerreenncciiaannddo o o o ttaammaannhho o ddoos s ddiissppoosisittiivvoos s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
TTrraabbaallhhaannddo o ccoom m ooffffsseetts s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1122
CCoolluunnaas s aanniinnhhaaddaas s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1133
TipografiaTipografia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . 1616
AAlliinnhhaammeenntto o . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1166
CCrriiaannddo o êênnffaasse e aao o tteexxtto o ccoom m ccoorrees . s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . 1166
AAbbrreevviiaaççãão o . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1177
BBlloocckkqquuoottees s ((cciittaaççõõeess) ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1177
LLiissttaas s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1188
TabelasTabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . 2020
TTaabbeella a ssiimmppllees s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2200
CONTEÚDOCONTEÚDO
LLiissttrraas s eem m zzeebbrra . . . a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2222
BBoorrddaas s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2222
DDeessttaaccaannddo o lliinnhhaas s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2233
TTaabbeellaas s mmeennoorrees s ((ccoonnddeennssaaddaass) ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2233
LLiinnhhaas s ccoonntteexxttuuaaiis s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2244
MMeessccllaannddo o ccllaassssees . . s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2244
FormuláriosFormulários . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . 2626
CCoommpprreeeennddo o o o ffoorrmm--ggrroouup p . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2266
FFoorrmmuulláárriio o iinn--lliinne e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2277
FFoorrmmuulláárriioos s hhoorriizzoonnttaaiis s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2288
CCoommppoonneennttees s ssuuppoorrttaaddoos . s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3300
CChheecckkbboox x e e rraaddiio o nna a hhoorriizzoonnttaal l . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3300
CCoonnttrroollees s eessttááttiiccoos s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3300
CCaammppoos s ddeessaabbiilliittaaddoos . s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3311
VVaalliiddaaççõõees . s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3311
TTaammaannhho o ddoos s ccaammppoos . s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3322
TTeexxtto o ppaarra a aajjuudda a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3333
BBoottõõees s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3333
TTaammaannhho o ddoos s bboottõõees s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3344
BBoottõõees s eem m ggrruuppo o . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3344
ÍÍccoonnees s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3355
BBoottõõees s ddrrooppddoowwn n ((mmeennuu) . . ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3355
IInnppuutts s ddiiffeerreenncciiaaddoos s ccoom m ggrroouup p . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3366
IntroduçãoIntrodução
O que é BootstrapO que é Bootstrap
OO BootsBootstrap é, trap é, basicbasicamentamente, um e, um kit básico contendkit básico contendo o divediversos componenrsos componentes web tes web prontprontos para os para queque
você possa desenvolver a sua aplicação web/mobile de forma mais fácil e objetiva, sem necessitarvocê possa desenvolver a sua aplicação web/mobile de forma mais fácil e objetiva, sem necessitar
um sólido conhecimento em Javascript e CSS para isso.um sólido conhecimento em Javascript e CSS para isso.
Este framework está estritamente ligado ao front-end e a camada View do padrão MVC. Ele nãoEste framework está estritamente ligado ao front-end e a camada View do padrão MVC. Ele não
interfere em nada outras tecnologias ou linguagens, pois o seu foco é o “desenho” da sua aplicação,interfere em nada outras tecnologias ou linguagens, pois o seu foco é o “desenho” da sua aplicação,
sendo “montado” exclusivamente com html puro.sendo “montado” exclusivamente com html puro.
O Bootstrap nasceu como uma biblioteca ligada ao Twitter (o nome era “Twitter Bootstrat”), noO Bootstrap nasceu como uma biblioteca ligada ao Twitter (o nome era “Twitter Bootstrat”), no
qual a equipe de desenvolvimento usa para o desenvolvimento desta aplicação, e como o resultadoqual a equipe de desenvolvimento usa para o desenvolvimento desta aplicação, e como o resultado
ficou muito bom, resolveram disponibilizar de forma gratuita para a comunidade. Com o avanço doficou muito bom, resolveram disponibilizar de forma gratuita para a comunidade. Com o avanço do
produto, tendo ajuda de diversos desenvolvedores, o framework front-end evolui para esta terceiraproduto, tendo ajuda de diversos desenvolvedores, o framework front-end evolui para esta terceira
geração, na qual chamamos apenas de Bootstrap.geração, na qual chamamos apenas de Bootstrap.
O que podemos fazer com BootstrapO que podemos fazer com Bootstrap
O Bootstrap é utilizado para desenhar telas em html, que serão acessadas via navegador web ouO Bootstrap é utilizado para desenhar telas em html, que serão acessadas via navegador web ou
dispositivo mobile. Tudo que você precisa saber sobre Bootstrap é, na verdade, html. Com ele,dispositivo mobile. Tudo que você precisa saber sobre Bootstrap é, na verdade, html. Com ele,
podemos criar sites inteiros e estruturas complexas, mas que podem ser acessadas facilmente empodemos criar sites inteiros e estruturas complexas, mas que podem ser acessadas facilmente em
diferentes dispositivos. Também podemos criar telas com tabelas, formulários, janelas e controlesdiferentes dispositivos. Também podemos criar telas com tabelas, formulários, janelas e controles
complexos. Pode-se facilmente criar um sistema web, apenas utilizando este framework, tomandocomplexos. Pode-se facilmente criar um sistema web, apenas utilizando este framework, tomando
as devidas precauções.as devidas precauções.
Também é possível criar um site inteiro, apenas com o Bootstrap, como iremos rever nos diversosTambém é possível criar um site inteiro, apenas com o Bootstrap, como iremos rever nos diversos
exemplos desta obra.exemplos desta obra.
O que não é BootstrapO que não é Bootstrap
QuQualalququerer tatarerefafa ququee nãnãoo enenvovolvlvaa oo dedesesenhnhoo dada tetelala,, nãnãoo esestátá rerelalaciciononadadoo cocomm BoBoototststrarap.p. IsIssoso enenvovolvlve,e,
por exemplo, realizar opor exemplo, realizar o  bind bind entre variáveis javascript e seus respectivos campos entre variáveis javascript e seus respectivos campos  input input, ou calcular, ou calcular
datas ou fornecer formas de validar algum processo. Tudo que não é visual ou não é ligado ao html,datas ou fornecer formas de validar algum processo. Tudo que não é visual ou não é ligado ao html,
o Bootstrap não tem domínio.o Bootstrap não tem domínio.
IntroduçãoIntrodução 22
O que você precisa para testar o BootstrapO que você precisa para testar o Bootstrap
Como todo o framework foi criado a partir de css e javascript, não há necessidade nenhuma deComo todo o framework foi criado a partir de css e javascript, não há necessidade nenhuma de
utilizar um servidor web para executar as páginas htmlutilizar um servidor web para executar as páginas html
Exemplos do livroExemplos do livro
ToTodos os dos os exemplos do livro estão exemplos do livro estão no github: no github: https://githubhttps://github.com/danielps/livro-bootstrap.com/danielps/livro-bootstrap
Conceitos iniciaisConceitos iniciais
InstalaçãoInstalação
A instalação do framework está diretamente ligada a incluir no documento html que você precisaA instalação do framework está diretamente ligada a incluir no documento html que você precisa
criar algumas bibliotecas Javascript e css. Existem diversas formas para que você possa incluir estascriar algumas bibliotecas Javascript e css. Existem diversas formas para que você possa incluir estas
bibliotecas, use a forma que achar mais conveniente para o seu projeto.bibliotecas, use a forma que achar mais conveniente para o seu projeto.
Tudo compiladoTudo compilado
 Javascript é  Javascript é uma linguagem uma linguagem interpretada, mas interpretada, mas quando dizemos quando dizemos “compilado“compilado” ” estamos fazendo estamos fazendo umauma
referência a forma como o referência a forma como o código está organizado, isto é, todo o código javascript está em uma únicacódigo está organizado, isto é, todo o código javascript está em uma única
linha, sem espaços em branco e com variáveis ilegíveis para nós humanos. Assim, linha, sem espaços em branco e com variáveis ilegíveis para nós humanos. Assim, temos um arquivotemos um arquivo
 javascript/css menor e  javascript/css menor e um carregamento mais rápido da um carregamento mais rápido da biblioteca.biblioteca.
O O primeprimeiro passo para iro passo para instainstalar Bootstrap é lar Bootstrap é baixbaixar a ar a biblibiblioteca acessanoteca acessando a do a urlurl http://getbootstraphttp://getbootstrap..
com/getting-started/com/getting-started/ e clicar no botão e clicar no botão DownlDownload oad BootsBootstraptrap. Nesta obra, estaremos utilizando a. Nesta obra, estaremos utilizando a
versão 3.0.0, mas talvez na época que esteja baixando a biblioteca, pode-se estar em uma versãoversão 3.0.0, mas talvez na época que esteja baixando a biblioteca, pode-se estar em uma versão
superior.superior.
Após baixar o arquivoApós baixar o arquivo  bootstrap-3.0.0-dist.zip bootstrap-3.0.0-dist.zip você pode extraí-lo para o seu projeto e começar você pode extraí-lo para o seu projeto e começar
a usar o framework, conforme veremos logo adiante.a usar o framework, conforme veremos logo adiante.
CDNCDN
Outra forma de incluir as bibliotecas do Bootstrap em seu projeto é a utilização de um serviçoOutra forma de incluir as bibliotecas do Bootstrap em seu projeto é a utilização de um serviço
chamado CDN, que é uma forma de distribuir conteúdo livre através de servidores espalhados pelochamado CDN, que é uma forma de distribuir conteúdo livre através de servidores espalhados pelo
mundo. Ao invés de utilizar um servidor central para o download das bibliotecas, o CDN funcionamundo. Ao invés de utilizar um servidor central para o download das bibliotecas, o CDN funciona
como uma forma de obter esses arquivos do servidor mais próximo ao cliente. Para utilizar o CDNcomo uma forma de obter esses arquivos do servidor mais próximo ao cliente. Para utilizar o CDN
no Bootstrap, você pode utilizar o seguinte template:no Bootstrap, você pode utilizar o seguinte template:
Conceitos iniciaisConceitos iniciais 44
<!-<!-- - LatLatest est comcompilpiled ed and and minminifiified ed CSS CSS -->-->
<link<link   rel=  rel="stylesheet""stylesheet"   href=  href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootst\"//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootst\
rap.min.css"rap.min.css">>
<!-<!-- - OptOptionional al thetheme me -->-->
<link<link   rel=  rel="stylesheet""stylesheet"   href=  href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootst\"//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootst\rap-theme.min.css"rap-theme.min.css">>
<!-<!-- - LatLatest est comcompilpiled ed and and minminifiified ed JavJavaScaScripript t -->-->
<script<script   src=  src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js""//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js">></scr\</scr\
ipt>ipt>
Não esqueça do jQueryNão esqueça do jQuery
O Bootstrap está intimamente ligado ao jQuery, que é um framework Javascript para manipulaçãoO Bootstrap está intimamente ligado ao jQuery, que é um framework Javascript para manipulação
da DOM do documento HTML. O Bootstrap precisa do jQuery, então você deve incluí-lo no seuda DOM do documento HTML. O Bootstrap precisa do jQuery, então você deve incluí-lo no seu
projeto. O jQuery pode ser baixado pelo site http://jquery.com, sendo utilizada a versão 1.10.2.projeto. O jQuery pode ser baixado pelo site http://jquery.com, sendo utilizada a versão 1.10.2.
Template básicoTemplate básico
Em todos os nossos exemplos, estaremos utilizando o template a seguir. A forma como os arquivosEm todos os nossos exemplos, estaremos utilizando o template a seguir. A forma como os arquivos
 javascript  javascript e e css css estão estão orgnizados orgnizados pode pode ser ser alterada alterada de de acordo acordo com com as as necessidades necessidades do do seu seu projeto,projeto,
mas lembre-se de alterar o caminho no template para que tudo funcione perfeitamente.mas lembre-se de alterar o caminho no template para que tudo funcione perfeitamente.
Os arquivos do template obedecem a seguinte estrutura:Os arquivos do template obedecem a seguinte estrutura:
bootstrapbootstrap//
├──├──   template.html  template.html
├──├── csscss//
│ │ ├├────   bootstrap.css  bootstrap.css
│ │ ├├────   bootstrap.min.css  bootstrap.min.css
│ │ ├├────   bootstrap  bootstrap--theme.csstheme.css
│ │ ├├────   bootstrap  bootstrap--theme.min.csstheme.min.css
├──├── jsjs//
│ │ ├├────   bootstrap.js  bootstrap.js
│ │ ├├────   bootstrap.min.js  bootstrap.min.js
│ │ ├├────   jquery  jquery-1.10.2-1.10.2.min.min
└──└──   fonts  fonts//
├──├──   glyphicons  glyphicons--halflingshalflings--regular.eotregular.eot
├──├──   glyphicons  glyphicons--halflingshalflings--regular.svgregular.svg
├──├──   glyphicons  glyphicons--halflingshalflings--regular.ttfregular.ttf
└──└──   glyphicons  glyphicons--halflingshalflings--regular.woffregular.woff
Conceitos iniciaisConceitos iniciais 55
Veja que existem duas versões para cada arquivo css e js. Isso acontece para que você possa escolherVeja que existem duas versões para cada arquivo css e js. Isso acontece para que você possa escolher
qual versão deseja. A minificada (.min.js por exemplo) é bem menor e carrega mais rápido, mas équal versão deseja. A minificada (.min.js por exemplo) é bem menor e carrega mais rápido, mas é
ilegível. A versão normal é maior e está legível.ilegível. A versão normal é maior e está legível.
Esta estrutura é a mesma criada quando extraímos o arquivoEsta estrutura é a mesma criada quando extraímos o arquivo  bootstrap-3.0.0-dist.zip bootstrap-3.0.0-dist.zip, sendo, sendo
que incluímos a bibliotecaque incluímos a biblioteca  jquery jquery na pasta na pasta  js js  e criamos o arquivo e criamos o arquivo  template.html template.html com o seguinte com o seguinte
código html:código html:
template.htmltemplate.html
<!DOCT<!DOCTYPE YPE html>html>
<html><html>
<head><head>
<title><title>BooBootsttstrap rap TemTemplaplatete</title></title>
<meta<meta   name=  name="viewport""viewport"   content=  content="width=device-width, initial-scale=1.0""width=device-width, initial-scale=1.0">>
<link<link   href=  href="css/bootstrap.min.css""css/bootstrap.min.css"   rel=  rel="stylesheet""stylesheet"   media=  media="screen""screen">>
</head></head>
<body><body>
<h1><h1>Hello, world!Hello, world!</h1></h1>
<script<script   src=  src="js/jquery-1.10.2.min.js""js/jquery-1.10.2.min.js"></script>></script>
<script<script   src=  src="js/bootstrap.min.js""js/bootstrap.min.js"></script>></script>
</body></body>
</html></html>
Este é um template básico que podemos utilizar para a maioria dos projetos. Todo o conteúdoEste é um template básico que podemos utilizar para a maioria dos projetos. Todo o conteúdo
HTML virá após a tagHTML virá após a tag  <body> <body> e antes da inclusão do script e antes da inclusão do script  jquery jquery. Não inclua o arquivo de script. Não inclua o arquivo de script
jqueryjquery e e  bootstrap bootstrap na seção na seção  <head> <head> do seu documento html, pois isso pode degradar o tempo de do seu documento html, pois isso pode degradar o tempo de
carregamento da página.carregamento da página.
Com o template pronto, podemos iniciar o nosso estudo sobre as diversas características que oCom o template pronto, podemos iniciar o nosso estudo sobre as diversas características que o
Bootstrap possui.Bootstrap possui.
Sempre deixe o projeto template vazio, copiando e colando os arquivos em um novo projeto.Sempre deixe o projeto template vazio, copiando e colando os arquivos em um novo projeto.
Conceitos iniciaisConceitos iniciais 66
Características do BootstrapCaracterísticas do Bootstrap
Este framework possui um conjunto extenso de funcionalidades e particularidades que devem serEste framework possui um conjunto extenso de funcionalidades e particularidades que devem ser
compreendidas para que possamos tirar utilizar todos os recursos com eficiência. Nos tópicos acompreendidas para que possamos tirar utilizar todos os recursos com eficiência. Nos tópicos a
seguir, iremos ilustrar cada característica com exemplos, para que possamos compreender melhor oseguir, iremos ilustrar cada característica com exemplos, para que possamos compreender melhor o
seu funcionamento.seu funcionamento.
DoctypeDoctype
Para que o Bootstrap funcione corretamente, é obrigatório o uso Para que o Bootstrap funcione corretamente, é obrigatório o uso da tagda tag doctype doctype no documento html. no documento html.
ViewportViewport
Nesta versão, o Bootstrap foi Nesta versão, o Bootstrap foi remodelado para se adequar perfeitamente ao remodelado para se adequar perfeitamente ao desenvolvimento mobile.desenvolvimento mobile.
Com isso, é necessário informar ao navegador a metatagCom isso, é necessário informar ao navegador a metatag   viewport  viewport, que indica a área onde o, que indica a área onde o
navegador o site é carregado. Isso é necessário porque, sem ele, o navegador do dispositivo mobilenavegador o site é carregado. Isso é necessário porque, sem ele, o navegador do dispositivo mobile
iria deixar o tamanho de todo o site maior que a área disponível do dispositivo.iria deixar o tamanho de todo o site maior que a área disponível do dispositivo.
O Viewport é configurado na tagO Viewport é configurado na tag  <head> <head> do documento html, da seguinte forma: do documento html, da seguinte forma:
<<metmeta a namnamee=="viewport""viewport"   content  content=="width=device-width, initial-scale=1.0""width=device-width, initial-scale=1.0">>
Como podemos ver, o viewport acima irá Como podemos ver, o viewport acima irá renderizar toda a página html renderizar toda a página html no tamanho do dispositivo,no tamanho do dispositivo,
em uma escala 1:1.em uma escala 1:1.
Desenvolvimento web responsivoDesenvolvimento web responsivo
O termoO termo   responsivo  responsivo  vem sendo constantemente empregado no desenvolvimento de websites e vem sendo constantemente empregado no desenvolvimento de websites e
sistemas web. Ele sugere que todo o conteúdo de um site deve se adequar a largura do dispositivo,sistemas web. Ele sugere que todo o conteúdo de um site deve se adequar a largura do dispositivo,
que pode ser um celular, um tablet ou um navegador.que pode ser um celular, um tablet ou um navegador.
O bootstrap tem como uma de suas metas tornar o desenvolvimento de interfaces responsivas algoO bootstrap tem como uma de suas metas tornar o desenvolvimento de interfaces responsivas algo
maissimples, que demanda apenas um pouco de configuração.mais simples, que demanda apenas um pouco de configuração.
Por exemplo, em uma imagem, é possível torná-la Por exemplo, em uma imagem, é possível torná-la responsiva através da atribuição da responsiva através da atribuição da seguinte classeseguinte classe
a taga tag <img> <img>::
<<img srcimg src=="...""..."   class  class=="img-responsive""img-responsive">>
Existem diversas outras técnicas que iremos abordar ao longo desta obra.Existem diversas outras técnicas que iremos abordar ao longo desta obra.
Conceitos iniciaisConceitos iniciais 77
A classeA classe container container
No Bootstrap, podemos criar diversos elementosNo Bootstrap, podemos criar diversos elementos  <div> <div> e assim formar uma estrutura para  e assim formar uma estrutura para o desenhoo desenho
da página. Para que o conteúdo possa ser da página. Para que o conteúdo possa ser centralizado corretamentecentralizado corretamente, usamos a classe, usamos a classe containercontainer, que, que
em geral é a primeira classe que usamos para definir o conteúdo da página.em geral é a primeira classe que usamos para definir o conteúdo da página.
O uso doO uso do container container é é exemplificado a seguir¹ exemplificado a seguir¹. Lembre-se de testá-lo no navegador:. Lembre-se de testá-lo no navegador:
Classe ContainerClasse Container
<!DOCT<!DOCTYPE YPE html>html>
<html><html>
<head><head>
<title><title>BooBootsttstrap rap TemTemplaplatete</title></title>
<meta<meta   name=  name="viewport""viewport"   content=  content="width=device-width, initial-scale=1.0""width=device-width, initial-scale=1.0">>
<link<link   href=  href="css/bootstrap.min.css""css/bootstrap.min.css"   rel=  rel="stylesheet""stylesheet"   media=  media="screen""screen">>
</head></head>
<body><body>
<h1><h1>Hello, world!Hello, world!</h1></h1>
<div<div   class=  class="container""container">>
 Aqui  Aqui entra entra o o conteúdo. conteúdo. A A classe classe container container adiciona adiciona um um box box centralizado centralizado no\no\
 elemento  elemento atual.atual.
<br/><br/><br/><br/>
<div<div   class=  class="container""container">>
 Aqui  Aqui entra entra outro outro conteúdo. conteúdo. Ele Ele está está centralizado centralizado em em relação relação ao ao contai\contai\
nener r papai. i. VoVocê cê popode de ususar ar o o chchroromeme/f/firirefefox ox e e ininveveststigigar ar a a mamargrgem em quque e é é crcriaiada da didinanam\m\
icaicamenmente te pelpelo o BooBootsttstraprap, , de de forforma ma a a deideixar tudo xar tudo em em ordordem.em.
<br/><br/><br/><br/>
<div<div   class=  class="container""container">>
FaçFaça a ississo o e e dimdiminuinuia ia gragradatdativaivamenmente te a a larlargurgura a do do navnavegaegadordor. . VocVocê ê irá irá \\
repreparaarar r queque, , a a medmedida ida que a que a larlargurgura a dimdiminuinui, i, o o conconteúteúdo do é é repreposiosiciocionadnadoo
</div></div>
</div></div>
</div></div>
<script<script   src=  src="js/jquery-1.10.2.min.js""js/jquery-1.10.2.min.js"></script>></script>
<script<script   src=  src="js/bootstrap.min.js""js/bootstrap.min.js"></script>></script>
</body></body>
</html></html>
¹¹https://github.comhttps://github.com/danielps/livro-bootstrap/blob/ma/danielps/livro-bootstrap/blob/master/exemplos/classe-container.htmster/exemplos/classe-container.htmll
Grid SystemGrid System
IntroduçãoIntrodução
O Bootstrap trabalha com um enquadramento de divs na tela chamado deO Bootstrap trabalha com um enquadramento de divs na tela chamado de  grid grid, no qual é possível, no qual é possível
criar blocos horizontais de conteúdo. A largura destes blocos não é dimensionada através decriar blocos horizontais de conteúdo. A largura destes blocos não é dimensionada através de
porcentagens ou pixels, mas sim através de um sistema de 12 colunas.porcentagens ou pixels, mas sim através de um sistema de 12 colunas.
Neste sistema, uma “linha” da tela pode ser separada em 12 blocos, Neste sistema, uma “linha” da tela pode ser separada em 12 blocos, ou colunas, e através do Bootstrapou colunas, e através do Bootstrap
é possível configurar estes blocos para se adequaram ao tamanho que desejarem.é possível configurar estes blocos para se adequaram ao tamanho que desejarem.
A figura a seguir ilustra este processo.A figura a seguir ilustra este processo.
Grid SystemGrid System
O sistema de grid é a base para que você possa desenhar uma tela que seja compatível tanto comO sistema de grid é a base para que você possa desenhar uma tela que seja compatível tanto com
dispositivos mobile quanto desktop. O uso do grid system é importante porque não será você quedispositivos mobile quanto desktop. O uso do grid system é importante porque não será você que
irá definir os tamanhos e margens de cada bloco, mas sim o framework, de acordo com a largurairá definir os tamanhos e margens de cada bloco, mas sim o framework, de acordo com a largura
atual da tela. Isso significa que o Bootstrap pode até definir que um bloco irá ficar abaixo do outro,atual da tela. Isso significa que o Bootstrap pode até definir que um bloco irá ficar abaixo do outro,
mesmo tendo a configuração horizontal.mesmo tendo a configuração horizontal.
Diferenciando o tamanho dos dispositivosDiferenciando o tamanho dos dispositivos
Para que possamos ver um pouco de código em ação, é preciso ainda conhecer outro conceitoPara que possamos ver um pouco de código em ação, é preciso ainda conhecer outro conceito
importante neste sistema. Nesta versão do Bootstrap, você pode configurar o tamanho de cada blocoimportante neste sistema. Nesta versão do Bootstrap, você pode configurar o tamanho de cada bloco
de acordo com o tamanho do dispositivo em questão.de acordo com o tamanho do dispositivo em questão.
O tamanho da tela é determinado através de 4 tiposO tamanho da tela é determinado através de 4 tipos
• Muito Pequeno: Definido através da classe• Muito Pequeno: Definido através da classe  .col-xs-X .col-xs-X, onde X é um número de 1 a 12, onde X é um número de 1 a 12
Grid SystemGrid System 99
• Pequeno: Definido através da classe• Pequeno: Definido através da classe .col-sm-X .col-sm-X, onde X é um número de 1 a 12, onde X é um número de 1 a 12
• Médio: Definido através da classe• Médio: Definido através da classe  .col-md-X .col-md-X, onde X é um número de 1 a 12, onde X é um número de 1 a 12
• Grande: Definido através da classe• Grande: Definido através da classe .col-lg-X .col-lg-X, onde X é um número de 1 a 12, onde X é um número de 1 a 12
Cada tipo é definido através da largura do dispositivo, da seguinte forma:Cada tipo é definido através da largura do dispositivo, da seguinte forma:
• Muito Pequeno: Até 750 pixels• Muito Pequeno: Até 750 pixels
• • PequePequeno: De 750 à 970 pno: De 750 à 970 pixeixelsls
• • MédiMédio: De 970 à 117o: De 970 à 1170 pixe0 pixelsls
• Grande: Acima de 1170 pixels• Grande: Acima de 1170 pixels
Vamos codificar um exemplo simples, criando 12 blocos de texto para uma página web. NesteVamos codificar um exemplo simples, criando 12 blocos de texto para uma página web. Neste
exemplo, usamos a configuração devices muitos pequenos e outra para devices Grandes.exemplo, usamos a configuração devices muitos pequenos e outra para devices Grandes.
Grid SystemGrid System
<div<div   class=  class="container""container">>
<div<div   class=  class="row""row">>
<div<div   class=  class="col-xs-1""col-xs-1">>.col-xs-1.col-xs-1</div></div>
<div<div   class=  class="col-xs-1""col-xs-1">>.col-xs-1.col-xs-1</div></div>
<div<div   class=  class="col-xs-1""col-xs-1">>.col-xs-1.col-xs-1</div></div>
<div<div   class=  class="col-xs-1""col-xs-1">>.col-xs-1.col-xs-1</div></div>
<div<div   class=  class="col-xs-1""col-xs-1">>.col-xs-1.col-xs-1</div></div>
<div<div   class=  class="col-xs-1""col-xs-1">>.col-xs-1.col-xs-1</div></div>
<div<div   class=  class="col-xs-1""col-xs-1">>.col-xs-1.col-xs-1</div></div>
<div<div   class=  class="col-xs-1""col-xs-1">>.col-xs-1.col-xs-1</div></div><div<div   class=  class="col-xs-1""col-xs-1">>.col-xs-1.col-xs-1</div></div>
<div<div   class=  class="col-xs-1""col-xs-1">>.col-xs-1.col-xs-1</div></div>
<div<div   class=  class="col-xs-1""col-xs-1">>.col-xs-1.col-xs-1</div></div>
<div<div   class=  class="col-xs-1""col-xs-1">>.col-xs-1.col-xs-1</div></div>
</div></div>
<div<div   class=  class="row""row">>
<div<div   class=  class="col-lg-1""col-lg-1">>.col-lg-1.col-lg-1</div></div>
<div<div   class=  class="col-lg-1""col-lg-1">>.col-lg-1.col-lg-1</div></div>
<div<div   class=  class="col-lg-1""col-lg-1">>.col-lg-1.col-lg-1</div></div>
<div<div   class=  class="col-lg-1""col-lg-1">>.col-lg-1.col-lg-1</div></div>
<div<div   class=  class="col-lg-1""col-lg-1">>.col-lg-1.col-lg-1</div></div>
<div<div   class=  class="col-lg-1""col-lg-1">>.col-lg-1.col-lg-1</div></div>
<div<div   class=  class="col-lg-1""col-lg-1">>.col-lg-1.col-lg-1</div></div>
<div<div   class=  class="col-lg-1""col-lg-1">>.col-lg-1.col-lg-1</div></div>
<div<div   class=  class="col-lg-1""col-lg-1">>.col-lg-1.col-lg-1</div></div>
Grid SystemGrid System 1010
<div<div   class=  class="col-lg-1""col-lg-1">>.col-lg-1.col-lg-1</div></div>
<div<div   class=  class="col-lg-1""col-lg-1">>.col-lg-1.col-lg-1</div></div>
<div<div   class=  class="col-lg-1""col-lg-1">>.col-lg-1.col-lg-1</div></div>
</div></div>
</div></div>
Você pode ver a página completa deste Você pode ver a página completa deste exemploexemplo neste link² neste link² e abrir o  e abrir o arquivo no seu navegadorarquivo no seu navegador. Para. Para
testar como o framework se comporta, redimensione a largura do navegador de forma a diminuí-testar como o framework se comporta, redimensione a largura do navegador de forma a diminuí-
la gradativamente. Em um certo momento, você verá que os blocos criados comla gradativamente. Em um certo momento, você verá que os blocos criados com   .col-lg  .col-lg  serão serão
quebrados, ficando um abaixo do outro.quebrados, ficando um abaixo do outro.
Mas porque isso aconteceu? Como os blocos estavam configurados para serem exibidos em uma telaMas porque isso aconteceu? Como os blocos estavam configurados para serem exibidos em uma tela
“grande”, ao menor sinal de que o conteúdo não poderá mais ser exibido, o Bootstrap se encarrega“grande”, ao menor sinal de que o conteúdo não poderá mais ser exibido, o Bootstrap se encarrega
de garantir que os blocos de texto devam ser exibidos, colocando-os um abaixo do outro.de garantir que os blocos de texto devam ser exibidos, colocando-os um abaixo do outro.
 Já  Já nas nas divs divs configuradas através configuradas através dodo col-xs-1 col-xs-1 não são quebradas, porque o framework espera que não são quebradas, porque o framework espera que
elas sejam visualizadas através de um dispositivo pequeno.elas sejam visualizadas através de um dispositivo pequeno.
Para melhorar o entendimento ao processo, vamos supor a seguinte situação. Imagine que, em umaPara melhorar o entendimento ao processo, vamos supor a seguinte situação. Imagine que, em uma
tela maior (desktop) você deseja criar dois blocos tela maior (desktop) você deseja criar dois blocos de texto, sendo que o primeiro bloco é de texto, sendo que o primeiro bloco é maior que omaior que o
segundo. Agora, caso a mesma página seja vista em um tablet, o ideal seria exibir os conteúdos emsegundo. Agora, caso a mesma página seja vista em um tablet, o ideal seria exibir os conteúdos em
cada metade da tela.cada metade da tela.
ParParaa conconfigfiguraurarr essesseses bloblocoscos dede tetextoxto,, necnecessessitaitamosmos usausarr col-lgcol-lg ee col-mdcol-md namesmadiv,deformaquenamesmadiv,deformaque
o framework possa assumir a quantidade de blocos de acordo com o tamanho da tela. Resumindo, ao framework possa assumir a quantidade de blocos de acordo com o tamanho da tela. Resumindo, a
configuração das divs deve ser a seguinte:configuração das divs deve ser a seguinte:
<div<div   class=  class="col-"col-lg-8 lg-8 col-scol-sm-6"m-6">>
......
</div></div>
<div<div   class=  class="col-"col-lg-4 lg-4 col-scol-sm-6"m-6">>
......
</div></div>
Neste código, dizemos para que a primeiraNeste código, dizemos para que a primeira  div div  assuma 8 blocos (dos 12 disponíveis) em uma tela assuma 8 blocos (dos 12 disponíveis) em uma tela
maior (desktop), mas se a tela for média (tablet), a mesma div irá possuir 6 blocos. As imagens amaior (desktop), mas se a tela for média (tablet), a mesma div irá possuir 6 blocos. As imagens a
seguir mostram as diferentes situações de acordo com o seguir mostram as diferentes situações de acordo com o código html criado anteriormente. O códigocódigo html criado anteriormente. O código
completo estácompleto está neste link³ neste link³
²²https://github.com/danielps/livro-bootstrap/blob/master/exemplos/grid-system-1.htmlhttps://github.com/danielps/livro-bootstrap/blob/master/exemplos/grid-system-1.html
³³https://github.com/danielps/livro-bootstrap/blob/master/exemplos/grid-system-2.htmlhttps://github.com/danielps/livro-bootstrap/blob/master/exemplos/grid-system-2.html
Grid SystemGrid System 1111
Divs com tela grandeDivs com tela grande
Divs com tela médiaDivs com tela média
Grid SystemGrid System 1212
Divs com tela pequenaDivs com tela pequena
Trabalhando com offsetsTrabalhando com offsets
Um offset Um offset é, resumidamé, resumidamenteente, , um um espaçespaço o em branco em branco adiciadicionado à onado à esqueesquerda do rda do bloco de bloco de conteconteúdo.údo.
Por exemplo, se você deseja adicionar conteúdo somente no segundo bloco dos 12 disponíveis, vocêPor exemplo, se você deseja adicionar conteúdo somente no segundo bloco dos 12 disponíveis, você
pode usar a seguinte classe:pode usar a seguinte classe: .com-md-offset-1 .com-md-offset-1 Nesta classe, usamos o md  Nesta classe, usamos o md para definir o padrão parapara definir o padrão para
tamanhos de tela médio, e o offset-1 para deslocar o bloco de conteúdo em 1 bloco.tamanhos de tela médio, e o offset-1 para deslocar o bloco de conteúdo em 1 bloco.
No exemplo a seguir, criamos um bloco de conteúdo que omite os dois primeiros blocos, e os doisNo exemplo a seguir, criamos um bloco de conteúdo que omite os dois primeiros blocos, e os dois
últimos, deixando a iterface do texto mais centralizada.últimos, deixando a iterface do texto mais centralizada.
Grid SystemGrid System 1313
Exemplo com OffsetExemplo com Offset
<div<div   class=  class="col-md-8 col-md-offset-2""col-md-8 col-md-offset-2">>
Você poderá verificar o Você poderá verificar o exemplo completoexemplo completo neste link⁴ neste link⁴..
Colunas aninhadasColunas aninhadas
Em determinaEm determinadas situação é das situação é necessnecessário inserir blocos de ário inserir blocos de conteconteúdo dentre de údo dentre de outrooutros s blocoblocos. s. DestaDesta
forma, quandforma, quando usamos as o usamos as colucolunas aninhadanas aninhadas s uma à uma à outraoutra, o , o bloco internbloco interno assume o o assume o sistesistema de ma de 1212
blocos do bloco anterior.blocos do bloco anterior.
Por exemplo, se temos um bloco com 8 colunas, e dentro deste bloco queremos criar dois blocosPor exemplo, se temos um bloco com 8 colunas, e dentro deste bloco queremos criar dois blocos
centralizados, criamos então o seguinte código:centralizados, criamos então o seguinte código:
Colunas aninhadasColunas aninhadas
<div<div   class=  class="row""row">>
<div<div   class=  class="col-md-8""col-md-8">>
NívNível el 1: 1: .co.col-ml-md-8d-8
<div<div   class=  class="row""row">>
<div<div   class=  class="col-md-6""col-md-6">>
NívNível el 2: 2: .co.col-ml-md-6d-6
</div></div>
<div<div   class=  class="col-md-6""col-md-6">>
LevLevel el 2: 2: .co.col-ml-md-6d-6
</div></div>
</div></div>
</div></div>
</div></div>
Veja que os dois blocos internos possuem 6 colunas cada, e não 8, que é o tamanho do blocoVeja que os dois blocos internos possuem 6 colunas cada, e não 8, que é o tamanho do bloco
pai. Nopai. No exemploa seguir⁵ exemplo a seguir⁵, criamos uma estrutura bem conhecida para sites com muito conteúdo., criamos uma estrutura bem conhecida para sites com muito conteúdo.
Visualize este código html no navegador para perceber como as colunas se comportam com oVisualize este código html no navegador para perceber como as colunas se comportam com o
redimensionamento do redimensionamento do navegadornavegador..
⁴⁴https://github.com/danielps/livro-bootstrap/blob/master/exemplos/grid-system-3.htmlhttps://github.com/danielps/livro-bootstrap/blob/master/exemplos/grid-system-3.html
⁵⁵https://github.com/danielps/livro-bootstrap/blob/master/exemplos/grid-system-4.htmlhttps://github.com/danielps/livro-bootstrap/blob/master/exemplos/grid-system-4.html
Grid SystemGrid System 1414
Estrutura complexa envolvendo blocos aninhadosEstrutura complexa envolvendo blocos aninhados
<!DOCT<!DOCTYPE YPE html>html>
<html><html>
<head><head>
<title><title> Grid  Grid SystemSystem</title></title>
<meta<meta   name=  name="viewport""viewport"   content=  content="width=device-width, initial-scale=1.0""width=device-width, initial-scale=1.0">>
<link<link   href=  href="css/bootstrap.min.css""css/bootstrap.min.css"   rel=  rel="stylesheet""stylesheet"   media=  media="screen""screen">>
</head></head>
<body><body>
<div<div   class=  class="container""container">>
<div<div   class=  class="row""row">>
<div<div   class=  class="col-md-8""col-md-8">>
<h2><h2>blblococo o 11</h2></h2>
<p><p>
Lorem ipsumLorem ipsum
</p></p>
<div<div   class=  class="row""row">>
<div<div   class=  class="col-md-6""col-md-6">>
<h2><h2>blobloco co 1.11.1</h2></h2>
<p><p>
Lorem ipsumLorem ipsum
</p></p>
</div></div>
<div<div   class=  class="col-xd-6""col-xd-6">>
<h2><h2>blobloco co 1.21.2</h2></h2>
<p><p>
Lorem ipsumLorem ipsum
</p></p>
</div></div>
</div></div>
<div<div   class=  class="row""row">>
<div<div   class=  class="col-md-6 col-md-offset-3""col-md-6 col-md-offset-3">>
<h2><h2>blobloco co 1.31.3</h2></h2>
<p><p>
Lorem ipsumLorem ipsum
</p></p>
</div></div>
</div></div>
</div></div>
<div<div   class=  class="col-xd-4""col-xd-4">>
<h2><h2>blobloco co 22</h2></h2>
Grid SystemGrid System 1515
<p><p>
Lorem ipsumLorem ipsum
</p></p>
<h2><h2>blblococo o 33</h2></h2>
<p><p>
Lorem ipsumLorem ipsum
</p></p>
</div></div>
</div></div>
</div></div>
</div> </div></div> </div>
</body> </html></body> </html>
Outro fator importante a ser considerado no Grid System é que o próprio framework determina asOutro fator importante a ser considerado no Grid System é que o próprio framework determina as
dimensões de cada bloco, cada elemento possui margens determinadas para “caber” no dispositivodimensões de cada bloco, cada elemento possui margens determinadas para “caber” no dispositivo
o máximo possível. Alterar estas margens através de CSS não é recomendado.o máximo possível. Alterar estas margens através de CSS não é recomendado.
TipografiaTipografia
Neste capítulo veremos que o Bootstrap altera toda a tipografia das tags HTML para que possam serNeste capítulo veremos que o Bootstrap altera toda a tipografia das tags HTML para que possam ser
utilizadas na criação de suas páginas. Inicialmente, a tag <body> recebe um tamanho de 14 pixels,utilizadas na criação de suas páginas. Inicialmente, a tag <body> recebe um tamanho de 14 pixels,
além de outros atributos. O parágrafo <p> recebe também uma margem inferior , além de outros atributos. O parágrafo <p> recebe também uma margem inferior , além de uma classealém de uma classe
especial chamadaespecial chamada  lead lead, que destaca melhor o parágrafo em relação aos outros., que destaca melhor o parágrafo em relação aos outros.
<p<p   class=  class="lead""lead">>
LorLorem em ipsipsum um doldolor or sit sit ameamet, t, conconsecsectettetur ur adiadipispisiciicing ng elielit, t, sed sed do do eiueiusmosmodd
</p></p>
AlinhamentoAlinhamento
Pode-se também alinhar o texto de um paragrafo utilizando as classesPode-se também alinhar o texto de um paragrafo utilizando as classes  text-left text-left,,   text-right  text-right e e
text-centertext-center, veja:, veja:
<p<p   class=  class="text-left""text-left">>TexTexto to alialinhanhado do à à esqesqueruerdada</p></p>
<p<p   class=  class="text-center""text-center">>TexTexto to alialinhanhado do no no cencentrotro</p></p>
<p<p   class=  class="text-right""text-right">>TexTexto to alialinhanhado do à à dirdireiteitaa</p></p>
Resultado do código HTML acimaResultado do código HTML acima
Criando ênfase ao texto com coresCriando ênfase ao texto com cores
É possível dar uma certo destaque a algum texto utilizando cores, ao invés do negrito (É possível dar uma certo destaque a algum texto utilizando cores, ao invés do negrito ( <b><b>) e itálico) e itálico
((<i><i>) tradicional. Claro que é possível alterar a cor de um texto com) tradicional. Claro que é possível alterar a cor de um texto com <font <font color=color=''>''>, mas isso, mas isso
nunca deverá ser feito.nunca deverá ser feito.
Para que tenhamos um padrão lógico de cores, que são aplicados não somente a textos, mas aPara que tenhamos um padrão lógico de cores, que são aplicados não somente a textos, mas a
botões, links e caixas de mensagens, usamos uma referência a 6 botões, links e caixas de mensagens, usamos uma referência a 6 determinas situações. São elas: mute,determinas situações. São elas: mute,
primaryprimary, success, , success, info, warning, info, warning, dangerdanger..
Cada uma delas possui uma cor específica que é padrão dentro do bootstrap. Para testar o destaqueCada uma delas possui uma cor específica que é padrão dentro do bootstrap. Para testar o destaque
em texto, vamos ao seguinte código:em texto, vamos ao seguinte código:
TipografiaTipografia 1717
<p<p   class=  class="text-muted""text-muted">>TeTextxto o "m"mududo" o" ou ou sesem m fofococo</p></p>
<p<p   class=  class="text-primary""text-primary">>TeTextxto o cocom m um um popoucuco o de de dedeststaqaqueue</p></p>
<p<p   class=  class="text-success""text-success">>TexTexto to com com algalguma uma menmensagsagem em boaboa</p></p>
<p<p   class=  class="text-info""text-info">>TexTexto to de de infinformormaçãaçãoo</p></p>
<p<p   class=  class="text-warning""text-warning">>TexTexto to de de aviavisoso</p></p>
<p<p   class=  class="text-danger""text-danger">>TexTexto to de de perperigoigo, , errerroo</p></p>
Resultado do código HTML acimaResultado do código HTML acima
AbreviaçãoAbreviação
A abreviação é um novo elemento no html 5 que utiliza a tagA abreviação é um novo elemento no html 5 que utiliza a tag  <abbr> <abbr> em conjunto com a propriedade em conjunto com a propriedade
titletitle. Veja o exemplo a seguir:. Veja o exemplo a seguir:
<p><abbr<p><abbr   title=  title="Hyper"HyperText Text MarkuMarkup p LanguaLanguage"ge">>HTMLHTML</abbr></abbr>   é   é a a memelhlhor or lilingnguauagegem m de de mama\\
rcarcação ção de de textexto to exiexistestentente..</p></p>
Resultado do código HTML acimaResultado do código HTML acima
Blockquotes (citações)Blockquotes (citações)
Esta tag é usada para citar um texto com um pouco mais de ênfase. A tag utilizada éEsta tag é usada para citar um texto com um pouco mais de ênfase. A tag utilizada é  <blockquote> <blockquote>,,
e o bootstrap adicionou algumas classes e o bootstrap adicionou algumas classes extras para dar mais extras para dar mais sentido ao blockquote. Você pode usarsentido ao blockquote. Você pode usar
<small><small>  dentro do bloco, incluindo a tag dentro do bloco, incluindo a tag   <cite>  <cite>  que define o nome da pessoa citada no bloco. que define o nome da pessoa citada no bloco.
Também pode-se utilizar a classeTambém pode-se utilizar a classe  .pull-right .pull-right para flutuar o texto para a direita. para flutuar o texto para a direita.
TipografiaTipografia 1818
<blockquote<blockquote   class=  class="pull-right""pull-right">>
<p><p>LorLorem em ipsipsum um doldolor or sit sit ameamet, t, conconsecsectetteturur adiadipispiscincing g elielit. t. IntIntegeeger r posposueruere e eraera\\
t a ante.t a ante.</p></p>
<small><small>SomSomeoneone e famfamous ous inin   <cite  <cite   title=  title="Sourc"Source e Title"Title">>SourcSource e TitleTitle</cite></small></cite></small>
</blockquote></blockquote>
Resultado do código HTML acimaResultado do código HTML acima
ListasListas
As listas do html são criadas através das tagsAs listas do html são criadas através das tags   <ul>  <ul>,,   <ol>  <ol> ee   <dl>  <dl>. O bootstrap adiciona algumas. O bootstrap adiciona algumas
funcionalidades extras para que possamos trabalhar melhor com estas listas. Vamos ver cada opçãofuncionalidades extras para que possamos trabalhar melhor com estas listas. Vamos ver cada opção
a seguir.a seguir.
UnstyledUnstyled
Utilizando a classeUtilizando a classe list-unstyledlist-unstyled, remove a marca da lista que pode ser o ponto para a , remove a marca da lista que pode ser o ponto para a lista formadalista formada
comcom <ul> <ul> ou a numeração de uma lista ou a numeração de uma lista  <ol> <ol>..
<ul<ul   class=  class="list-unstyled""list-unstyled">>
<li><li>......</li></li>
</ul></ul>
Lado a lado (inline)Lado a lado (inline)
Caso deseje agrupar os itens de uma lista lado a Caso deseje agrupar os itens de uma lista lado a lado, ao invés de um abaixo do outro, utilize a classelado, ao invés de um abaixo do outro, utilize a classe
list-inlinelist-inline, da seguinte forma:, da seguinte forma:
TipografiaTipografia 1919
<ul<ul   class=  class="list-inline""list-inline">>
<li><li>LoremLorem</li></li>
<li><li>IpsumIpsum</li></li>
<li><li>dolordolor</li></li>
</ul></ul>
Listas com descrição na horizontalListas com descrição na horizontal
A tagA tag  <dl> <dl> cria listas através do uso do cria listas através do uso do  <dt> <dt> e e <dd> <dd>. Cada lista possui um item que é o título (. Cada lista possui um item que é o título (<dt><dt>))
e outra que é a descrição (e outra que é a descrição (<dd><dd>).).
No exemplo a seguir, usamos a lista no formato original, veja:No exemplo a seguir, usamos a lista no formato original, veja:
<dl><dl>
<dt><dt>......</dt></dt>
<dd><dd>......</dd></dd>
</dl></dl>
E com da lista no formato horizontal:E com da lista no formato horizontal:
Resultado do código HTML acimaResultado do código HTML acima
Os Os exeexemplos mplos destdeste e capícapítulo tulo estãestão o locallocalizadizados os [nest[neste e link]link].(htt.(https:/ps://gith/github.ub.com/dcom/danieanielps/llps/livroivro--
bootstrap/blobbootstrap/blob/master/ex/master/exemplos/textosemplos/textos.html)..html).
TabelasTabelas
Tabelas são a forma mais comum de organizar dados em listas, principalmente se houverem muitosTabelas são a forma mais comum de organizar dados em listas, principalmente se houverem muitos
campos a serem exibidos. As tabelas foram implementadas desde o início do HTML, através da tagcampos a serem exibidos. As tabelas foram implementadas desde o início do HTML, através da tag
<table><table> e necessitam de uma grande quantidade de otimização visual para que fiquem com uma e necessitam de uma grande quantidade de otimização visual para que fiquem com uma
boa apresentação.boa apresentação.
Uma tabela simples sem formataçãoUma tabela simples sem formatação
Com o Bootstrap, o uso de tabelas se torna algo simples e sem nenhuma customização complexa,Com o Bootstrap, o uso de tabelas se torna algo simples e sem nenhuma customização complexa,
bastando apenas definir a classebastando apenas definir a classe table table, além de algumas propriedades extras, além de algumas propriedades extras
Em todos os nossos exemplos, usamos também as tagsEm todos os nossos exemplos, usamos também as tags  <thead> <thead> para definir o cabeçalho da tabela para definir o cabeçalho da tabela
ee <tbody> <tbody> para definir o corpo da tabela. para definir o corpo da tabela.
Tabela simplesTabela simples
Para criar uma tabela no Bootstrap, use a tagPara criar uma tabela no Bootstrap, use a tag  <table> <table> e a classe e a classe  table table, na seguinte forma:, na seguinte forma:
<table<table   class=  class="table""table">>
......
</table></table>
No exemplo anterior, ao aplicar a classeNo exemplo anterior, ao aplicar a classe  table table, temos o seguinte resultado:, temos o seguinte resultado:
TabelasTabelas 2121
<table<table   class=  class="table""table">>
<thead><thead>
<tr><tr>
<th><th>FirFirst st NamNamee</th></th>
<th><th>LasLast t NamNamee</th></th>
<th><th>PointsPoints</th></th>
</tr></tr>
</thead></thead>
<tbody><tbody>
<tr><tr>
<td><td>JillJill</td></td>
<td><td>SmithSmith</td></td>
<td><td>5050</td></td>
</tr></tr>
<tr><tr>
<td><td>EveEve</td></td>
<td><td>JacksonJackson</td></td>
<td><td> 94 94</td></td>
</tr></tr>
<tr><tr>
<td><td>JohnJohn</td></td>
<td><td>DoeDoe</td></td>
<td><td> 80 80</td></td>
</tr></tr>
<tr><tr>
<td><td> Adam Adam</td></td>
<td><td>JohnsonJohnson</td></td>
<td><td> 67 67</td></td>
</tr></tr>
</tbody></tbody>
</table></table>
TabelasTabelas 2222
Tabela com a classe ‘table’Tabela com a classe ‘table’
Listras em zebraListras em zebra
Uma forma fácil de deixar a tabela no formato zebra, com uma linha de fundo branco e outra linhaUma forma fácil de deixar a tabela no formato zebra, com uma linha de fundo branco e outra linha
no fundo cinza, de forma alternada, é utilizar a classeno fundo cinza, de forma alternada, é utilizar a classe  table-striped table-striped, da seguinte forma:, da seguinte forma:
<table<table   class=  class="tabl"table e tabletable-strip-striped"ed">>
......
</table></table>
Tabela com a classe ‘table-striped’Tabela com a classe ‘table-striped’
BordasBordas
Não inclua bordas usandoNão inclua bordas usando  border='1' border='1', use a classe, use a classe  table-bordered table-bordered para que o Bootstrap possa para que o Bootstrap possa
incluir corretamente as bordas na tabela.incluir corretamente as bordas na tabela.
TabelasTabelas 2323
<table<table   class=  class="tabl"table e tabletable-borde-bordered"red">>
......
</table></table>
Tabela com a classe ‘table-bordered’Tabela com a classe ‘table-bordered’
Destacando linhasDestacando linhas
O efeitoO efeito   hover  hover   é bem conhecido por nós desenvolvedores web. Ele muda uma cor ou formato  é bem conhecido por nós desenvolvedores web. Ele muda uma cor ou formato
quando o ponteiro do mouse está ativado naquele ponto. Nas quando o ponteiro do mouse está ativado naquele ponto. Nas tabelas, é possível adiconar esse efeitotabelas, é possível adiconar esse efeito
destacando a linha que o mouse passa. Para fazer isso, você pode usar a classedestacando a linha que o mouse passa. Para fazer isso, você pode usar a classe  table-hover table-hover
<table<table   class=  class="tabl"table e tabletable-hover-hover"">>
......
</table></table>
Tabelas menores (condensadas)Tabelas menores (condensadas)
Caso o espaço entre cada célula (padding e margin) da tabela estejam atrapalhando a visualizaçãoCaso o espaço entre cada célula (padding e margin) da tabela estejam atrapalhando a visualização
de um item, você pode retirá-los através da classede um item, você pode retirá-los através da classe  table-condensed table-condensed, conforme o exemplo a seguir:, conforme o exemplo a seguir:
<table<table   class=  class="table table-condensed""table table-condensed">>
......
</table></table>
TabelasTabelas 2424
Linhas contextuaisLinhas contextuais
É possível adicionar um contexto a uma linha de uma tabela, através das classesÉ possível adicionar um contexto a uma linha de uma tabela, através das classes  act active, ive, succesuccess,ss,
 warning warning ou ou danger danger. As classes devem ser aplicadas na tag. As classes devem ser aplicadas na tag <tr> <tr> que define a linha da tabela. que define a linha da tabela.
<table<table   class=  class="table""table">>
<tbody><tbody>
<tr<tr   class=  class="danger""danger">>......</tr></tr>
</tbody></tbody></table></table>
Tabelas com linhas contextuaisTabelas com linhas contextuais
Mesclando classesMesclando classes
É possível mesclar todas as classes disponíveis para formatação da tabela, de forma a obterÉ possível mesclar todas as classes disponíveis para formatação da tabela, de forma a obter
um melhor formatação da mesma. Por exemplo, você pode usar as classesum melhor formatação da mesma. Por exemplo, você pode usar as classes   table-striped  table-striped ee
table-borderedtable-bordered juntas. juntas.
TabelasTabelas 2525
Tabela mescladaTabela mesclada
Os exemplos deste capítulo estão localizadosOs exemplos deste capítulo estão localizados  neste link neste link    ..
    https://github.comhttps://github.com/danielps/livro-bootstrap/blob/ma/danielps/livro-bootstrap/blob/master/exemplos/tabelas.htster/exemplos/tabelas.htmlml
FormuláriosFormulários
Os formulários, cuja tag principal éOs formulários, cuja tag principal é  <form> <form>, constituem o principal meio de entrada de dados em, constituem o principal meio de entrada de dados em
páginas web. Como existem diversas formas de se criar um formulário, podendo inclusive mesclarpáginas web. Como existem diversas formas de se criar um formulário, podendo inclusive mesclar
formas variadas, vamos exibir a seguir as principais funcionalidades que o Bootstrap possui.formas variadas, vamos exibir a seguir as principais funcionalidades que o Bootstrap possui.
Um simples formulário sem a formatação do BootstrapUm simples formulário sem a formatação do Bootstrap
Compreendo o form-groupCompreendo o form-group
A classeA classe form-group form-group é usada para delimitar um grupo único de um formulário, que na maioria das é usada para delimitar um grupo único de um formulário, que na maioria das
vezes é definida como um campo. Para criar um formulário com muitos campos, é necessário criarvezes é definida como um campo. Para criar um formulário com muitos campos, é necessário criar
um formulário com vários elementos com a classeum formulário com vários elementos com a classe  form-group form-group. No exemplo a seguir, criamos um. No exemplo a seguir, criamos um
formulário com dois elementos, nome e email, no formulário com dois elementos, nome e email, no qual cada um é definido por uma div com a qual cada um é definido por uma div com a classeclasse
form-groupform-group..
<form><form>
<div<div   class=  class="form-group""form-group">>
<label<label   for=  for="nome""nome">>NomeNome</label></label>
<input<input   type=  type="text""text"   class=  class="form-control""form-control" id=id="nome""nome">>
</div></div>
<div<div   class=  class="form-group""form-group">>
<label<label   for=  for="email""email">>EmailEmail</label></label>
<input<input   type=  type="text""text"   class=  class="form-control""form-control" id=id="email""email">>
</div></div>
</form></form>
FormuláriosFormulários 2727
Formulário formatado com BootstrapFormulário formatado com Bootstrap
Neste exemplo, podemos perceber que a largura de cada campoNeste exemplo, podemos perceber que a largura de cada campo  input input foi alterada para 100%, e que foi alterada para 100%, e que
o formulário está devidamente formatado para atender aos padrões web. Esta formatação é obtidao formulário está devidamente formatado para atender aos padrões web. Esta formatação é obtida
através da classeatravés da classe  form-control form-control que está presente na tag que está presente na tag  <input> <input>. Obviamente, todo controle html. Obviamente, todo controle html
de formulário deve possuir esta classe.de formulário deve possuir esta classe.
As diferenças entre um formulário simples As diferenças entre um formulário simples e com o e com o bootstrap são configuradas principalmente atra-bootstrap são configuradas principalmente atra-
vés da criação davés da criação da  <div> <div> com a classe com a classe  form-group form-group e o campo e o campo  <input> <input> com a classe com a classe  form-control form-control..
Formulário in-lineFormulário in-line
Um formulário in-line é aquele em que os campos ficam lado a lado. Para estes campos, é necessárioUm formulário in-line é aquele em que os campos ficam lado a lado. Para estes campos, é necessário
informar a largura de cada um deles. Além disso, mesmo que os cabeçalhos de cada campo nãoinformar a largura de cada um deles. Além disso, mesmo que os cabeçalhos de cada campo não
apareçam, eles devem ser informados, para fins de semântica, e podem ser escondidos através daapareçam, eles devem ser informados, para fins de semântica, e podem ser escondidos através da
classeclasse sr-only sr-only..
No exemplo a seguir, adicionamos apenas a classeNo exemplo a seguir, adicionamos apenas a classe  form-inline form-inline na tag na tag <form> <form>..
<form<form   class=  class="form-inline""form-inline">>
<div<div   class=  class="form-group""form-group">>
<label<label   for=  for="nome""nome">>NomeNome</label></label>
<input<input   type=  type="text""text"   class=  class="form-control""form-control" id=id="nome""nome">>
</div></div>
<div<div   class=  class="form-group""form-group">>
<label<label   for=  for="email""email">>EmailEmail</label></label>
<input<input   type=  type="text""text"   class=  class="form-control""form-control" id=id="email""email">>
</div></div>
</form></form>
FormuláriosFormulários 2828
Formulário inlineFormulário inline
Podemos refinar o formulário e incluir a classePodemos refinar o formulário e incluir a classe   sr-only sr-only   com o objetivo de esconder os labels,  com o objetivo de esconder os labels,
deixando-os disponíveis apenas para a semântica da página. Também usamosdeixando-os disponíveis apenas para a semântica da página. Também usamos  placeholder placeholder para para
definir o label do campo nele mesmo.definir o label do campo nele mesmo.
<form<form   class=  class="form-inline""form-inline">>
<div<div   class=  class="form-group""form-group">>
<label<label   for=  for="nome""nome"   class=  class="sr-only""sr-only">>NomeNome</label></label>
<input<input   type=  type="text""text"   class=  class="form-control""form-control" id=id="nome""nome"   placeholder=  placeholder="Nome""Nome">>
</div></div>
<div<div   class=  class="form-group""form-group">>
<label<label   for=  for="email""email"   class=  class="sr-only""sr-only">>EmailEmail</label></label>
<input<input   type=  type="text""text"   class=  class="form-control""form-control" id=id="email""email"   placeholder=  placeholder="Email""Email">>
</div></div>
</form></form>
Formulário inline sem labelsFormulário inline sem labels
Formulários horizontaisFormulários horizontais
Estes são os tipos mais usados para a entrada de dados. Um formulário horizontal é definido pelaEstes são os tipos mais usados para a entrada de dados. Um formulário horizontal é definido pela
classeclasse form-horizontal form-horizontal na tag na tag <form> <form> e deve ter o tamanho de cada label de cada campo definido. e deve ter o tamanho de cada label de cada campo definido.
Os tamanhos são definidos da mesma forma vista no capítulo 3, pelo sistema de grids.Os tamanhos são definidos da mesma forma vista no capítulo 3, pelo sistema de grids.
No exemplo a seguir, criamos um formulário disposto na forma horizontal, veja:No exemplo a seguir, criamos um formulário disposto na forma horizontal, veja:
FormuláriosFormulários 2929
11   <form  <form   class=  class="form-horizontal""form-horizontal">>
22   <div  <div   class=  class="form-group""form-group">>
33   <label  <label   for=  for="nome""nome"   class=  class="col-sm-2 control-label""col-sm-2 control-label">>NomeNome</label></label>
44   <div  <div   class=  class="col-sm-5""col-sm-5">>
55   <input  <input   type=  type="text""text"   class=  class="form-control""form-control" id=id="nome""nome"   placeholder=  placeholder="D"Digigitite e o o s\s\
 6 6 eu noeu nome"me"/>/>
77   </div>  </div>
 8 8   </div>  </div>
 9 9   <div  <div   class=  class="form-group""form-group">>1010   <label  <label   for=  for="email""email"   class=  class="col-sm-2 control-label""col-sm-2 control-label">>EmailEmail</label></label>
1111   <div  <div   class=  class="col-sm-5""col-sm-5">>
1212   <input  <input   type=  type="text""text"   class=  class="form-control""form-control" id=id="email""email"   placeholder=  placeholder="D"Digigitite e o o \\
1313 seu eseu emaimail"l"/>/>
1414   </div>  </div>
1515   </div>  </div>
1616   <div  <div   class=  class="form-group""form-group">>
1717   <div  <div   class=  class="col-sm-offset-2 col-sm-4""col-sm-offset-2 col-sm-4">>
1818   <button  <button   type=  type="submit""submit"   class=  class="btn "btn btn-debtn-defaultfault"">>EnviarEnviar</button></button>
1919   </div>  </div>
2020   </form>  </form>
Este exemplo contém detalhes importantes sobre o Boorstrap. Inicialmente, na linha 1, criamos oEste exemplo contém detalhes importantes sobre o Boorstrap. Inicialmente, na linha 1, criamos o
<form><form> com a classe com a classe form-horizontal form-horizontal e logo em seguida, criamos o primeiro e logo em seguida, criamos o primeiro  form-group form-group..
Na linha 3, adicionamos a classeNa linha 3, adicionamos a classe  com-sm-2 com-sm-2, relativa ao grid system fazendo que com o labe ocupe, relativa ao grid system fazendo que com o labe ocupe
2 espaços dos 12 disponíveis. Também usamos a classe2 espaços dos 12 disponíveis. Também usamos a classe  control-label control-label que irá formatar o label de que irá formatar o label de
acordo com o formulário horizontal.acordo com o formulário horizontal.
Na linha 4 incluímos umaNa linha 4 incluímos uma divdiv que possui a classe que possui a classe  col-sm-5 col-sm-5, que será utilizada para incluírmos a, que será utilizada para incluírmos a
caixa de texto. Na linha 6 inserimos a caixa de texto com a tagcaixa de texto. Na linha 6 inserimos a caixa de texto com a tag  input input. O processo se repete para o. O processo se repete para o
email, na linha 9.email, na linha 9.
Na linha 16 criamos umaNa linha 16 criamos uma  div div  para inserir o botão de para inserir o botão de  submit submit do formulário. Veja que, na linha 17, do formulário. Veja que, na linha 17,
usamos a classeusamos a classe col-sm-offset-2 col-sm-offset-2 que irá gerar um offset com 2 espaços na div, fazendo com que o que irá gerar um offset com 2 espaços na div, fazendo com que o
botão fique alinhado a caixa de texto. Este formulário é representado na imagem a seguir:botão fique alinhado a caixa de texto. Este formulário é representado na imagem a seguir:
FormuláriosFormulários 3030
Formulário horizontalFormulário horizontal
Componentes suportadosComponentes suportados
O Bootstrap dá suporte a todos os controles comuns do formulário, tais como: text, password,O Bootstrap dá suporte a todos os controles comuns do formulário, tais como: text, password,
datetime, datetime-local, date, month, time, week, number, email, url, search, tel, e color. Algunsdatetime, datetime-local, date, month, time, week, number, email, url, search, tel, e color. Alguns
deles possuem opções extras, das quais veremos a seguir.deles possuem opções extras, das quais veremos a seguir.
Checkbox e radio na horizontalCheckbox e radio na horizontal
O Bootstrap oferece uma opção extra a estes O Bootstrap oferece uma opção extra a estes controles de forma a disponibilizar cada item na controles de forma a disponibilizar cada item na formaforma
horizontal, conforme o código a seguir:horizontal, conforme o código a seguir:
<label<label   class=  class="checkbox-inline""checkbox-inline">>
<input<input   type=  type="checkbox""checkbox" id=id="inlineCheckbox1""inlineCheckbox1"   value=  value="option1""option1">> 11
</label></label>
<label<label   class=  class="checkbox-inline""checkbox-inline">>
<input<input   type=  type="checkbox""checkbox" id=id="inlineCheckbox2""inlineCheckbox2"   value=  value="option2""option2">> 22
</label></label>
<label<label   class=  class="checkbox-inline""checkbox-inline">>
<input<input   type=  type="checkbox""checkbox" id=id="inlineCheckbox3""inlineCheckbox3"   value=  value="option3""option3">> 33
</label></label>
Controles estáticosControles estáticos
É possivel adicionar um controle estático, na maioria das vezes, um label, em formulários cujo oÉ possivel adicionar um controle estático, na maioria das vezes, um label, em formulários cujo o
objeto é apenas informar algum campo que já foi preenchido. Esta configuração é realizada atravésobjeto é apenas informar algum campo que já foi preenchido. Esta configuração é realizada através
da classeda classe form-control-static form-control-static..
FormuláriosFormulários 3131
<div<div   class=  class="form-group""form-group">>
<label<label   class=  class="col-sm-2 control-label""col-sm-2 control-label">>EmailEmail</label></label>
<div<div   class=  class="col-sm-10""col-sm-10">>
<p<p   class=  class="form-control-static""form-control-static">> email@example.com email@example.com</p></p>
</div></div>
</div></div>
Formulário com campos estáticosFormulário com campos estáticos
Campos desabilitadosCampos desabilitados
Para desabilitar um campo, basta adicionar o atributoPara desabilitar um campo, basta adicionar o atributo  disabled disabled a ele, conforme o exemplo a seguir: a ele, conforme o exemplo a seguir:
<input<input   class=  class="form-control""form-control" id=id="disabledInput""disabledInput"   type=  type="text""text"   placeholder=  placeholder="Disa"Disabled bled \\
input input here..here..."."   disabled  disabled>>
Você pode desabilitar um fieldset também:Você pode desabilitar um fieldset também:   <fi  <fieldset eldset disabled>disabled>
ValidaçõesValidações
O bootstrap não realiza validações em si, claro, ele apenas oferece meios de se visualizar a validaçãoO bootstrap não realiza validações em si, claro, ele apenas oferece meios de se visualizar a validação
dos campos. A validação deve ser feita através de javascript, e é possivel adicionar classes a classedos campos. A validação deve ser feita através de javascript, e é possivel adicionar classes a classe
form-groupform-group, da seguinte forma:, da seguinte forma:
FormuláriosFormulários 3232
<div<div   class=  class="form-group has-success""form-group has-success">>
<label<label   class=  class="control-label""control-label"   for=  for="inputSuccess""inputSuccess">>InpInput ut com com sucsuccescesss</label></label>
<input<input   type=  type="text""text"   class=  class="form-control""form-control" id=id="inputSuccess""inputSuccess">>
</div></div>
<div<div   class=  class="form-group has-warning""form-group has-warning">>
<label<label   class=  class="control-label""control-label"   for=  for="inputWarning""inputWarning">>InpInput ut com com warwarninningg</label></label>
<input<input   type=  type="text""text"   class=  class="form-control""form-control" id=id="inputWarning""inputWarning">>
</div></div>
<div<div   class=  class="form"form-group -group has-erhas-error"ror">>
<label<label   class=  class="control-label""control-label"   for=  for="inputError""inputError">>InpInput ut com com errerroror</label></label>
<input<input   type=  type="text""text"   class=  class="form-control""form-control" id=id="inputError""inputError">>
</div></div>
Formulário com validaçãoFormulário com validação
Neste exemplo, usamos as classesNeste exemplo, usamos as classes has-success has-success,, has-warning has-warning e e has-error has-error para definir as validações para definir as validações
Tamanho dos camposTamanho dos campos
Pode-se criar diversos tamanhos pré definidos para os campos de um formulário. Os tamanhos maisPode-se criar diversos tamanhos pré definidos para os campos de um formulário. Os tamanhos mais
comuns são definidos na própria tagcomuns são definidos na própria tag  input input, através das classes, através das classes  input-lg input-lg, para um campo maior e, para um campo maior e
input-sminput-sm para um campo menor. para