Bootstrap é a framework mais famosa para desenvolvimento responsivo (mobile-first) de HTML, CSS, e JavaScript em web sites.

Transcrição

1 BOOTSTRAP Conceito Bootstrap é a framework mais famosa para desenvolvimento responsivo (mobile-first) de HTML, CSS, e JavaScript em web sites. Bootstrap is a free front-end framework for faster and easier web development Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins Bootstrap also gives you the ability to easily create responsive designs O que é um Web Design Responsivo? Site ou layout responsivo, ou também conhecido como site flexível é quando o site automaticamente se encaixa no dispositivo do usuário (PC, celular, tablet, etc). Um site responsivo muda a sua aparência e disposição com base no tamanho da tela em que o site é exibido. Então, se o usuário tem uma tela pequena, os elementos se reorganizam para lhe mostrar as coisas principais em primeiro lugar. Vantagens do Bootstrap: Fácil de usar: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap Responsive: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops Abordagem Mobile-first: In Bootstrap 3, mobile-first styles are part of the core framework Compatibilidade: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera) Exemplo <div class="jumbotron text-center"> <h1>my First Bootstrap Page</h1> <p>resize this responsive page to see the effect!</p> <div class="container"> <div class="row"> <div class="col-sm-4"> <h3>column 1</h3> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> <div class="col-sm-4"> <h3>column 2</h3> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> <div class="col-sm-4"> <h3>column 3</h3>

2 <p>lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> Baixando o Bootstrap Se você deseja fazer o download do Bootstrap, vá para getbootstrap.com, e siga as instruções. Bootstrap CDN Se você não deseja fazer o download e hospedar Bootstrap, você pode incluí-lo a partir de um CDN (Content Delivery Network). MaxCDN fornece suporte CDN para CSS e JavaScript do Bootstrap. Você também deve incluir jquery: <link rel="stylesheet" href=" tstrap.min.css"> <script src=" cript> <script src=" script> Criando uma página com Bootstrap 1. Acrescente o doctype HTML5 Bootstrap usa elementos HTML e propriedades CSS que necessitam do doctype HTML5. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> </html> 2. Mobile-first Bootstrap 3 foi desenvolvido para ser responsive para dispositivos mobile. Um estilo Mobile-first é parte do framework core. Para garantir a utilização de zoom acrescente o <meta> abaixo dentro do elemento <head> : <meta name="viewport" content="width=device-width, initial-scale=1"> O atributo width=device-width define que a largura da página deve seguir a largura da tela do dispositivo. O atributo initial-scale=1 define o zoom inicial do navegador. 3. Containers Um container é sempre necessário para englobar a página. Existem duas classes de containers:

3 1. A classe.container fornece um fixed width container 2. A classe.container-fluid fornece um full width container, que abrange toda a dimensão da viewport Observação: Containers não podem contar outros containers. Exemplo 1 <!DOCTYPE html> <html lang="en"> <head> <title>bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"href=" otstrap.min.css"> <script src=" /script> <script src=" </script> </head> <body> <div class="container"> <h1>my First Bootstrap Page</h1> <p>this is some text.</p> </body> </html> Exemplo 2 <!DOCTYPE html> <html lang="en"> <head> <title>bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"href=" otstrap.min.css"> <script src=" /script> <script src=" </script> </head> <body> <div class="container-fluid"> <h1>my First Bootstrap Page</h1> <p>this is some text.</p> </body> </html> Grid São utilizados 12 colunas na página. Estas colunas podem ser agrupadas.

4 Classes de Grid xs (para celulares) sm (para tablets) md (para desktops) lg (para desktops com alta resolução) Exemplo <div class="row"> <div class="col-sm-4">.col-sm-4 <div class="col-sm-8">.col-sm-8 Títulos Por definição, Bootstrap trabalha com (<h1> atét <h6>) da seguinte maneira: h1 Bootstrap heading (36px) h2 Bootstrap heading (30px) h3 Bootstrap heading (24px) h4 Bootstrap heading (18px) h5 Bootstrap heading (14px) h6 Bootstrap heading (12px) <small> <mark> <abbr> <blockquote> <dl> <code> <kbd> <pre> Cores de textos e fundo As classe de cores dos textos são:.text-muted,.text-primary,.text-success,.textinfo,.text-warning, e.text-danger:

5 As classes de cores dos fundos são:.bg-primary,.bg-success, bg-info, bg-warning, e.bg-danger: Algumas classes Classe.lead.small.text-left.text-center.text-right.text-justify.text-nowrap.text-lowercase.text-uppercase.text-capitalize.initialism.list-unstyled.list-inline.dl-horizontal.pre-scrollable Tabelas.table.table-striped.table-bordered

6 .table-hover.table-condensed Classes de contexto Class.active.success.info.warning.danger.table-responsive classe cria uma tabela responsiva. A tabela irá rolar horizontalmente em dispositivos pequenos (menos de 768px). Ao visualizar em qualquer container maior do que 768px de largura, não há diferença: Imagens.img-rounded cria cantos arredondados: <img src="cinqueterre.jpg" class="img-rounded" alt="cinque Terre" width="304" height="236">.img-circle crua uma moldura circular (não suportado pelo IE8): <img src="cinqueterre.jpg" class="img-circle" alt="cinque Terre" width="304" height="236">.img-thumbnail molda a imagem para uma miniatura: <img src="cinqueterre.jpg" class="img-thumbnail" alt="cinque Terre" width="304" height="236"> Imagens responsivas Imagens vem em todos os tamanhos. Então faça imagens responsivas ajustar automaticamente ao tamanho da tela. Crie imagens responsivas com a classe.img-responsive na tag <img>. A imagem será então dimensionar bem para o elemento pai. The.img-responsive class applies display: block; and max-width: 100%; and height: auto; to the image: <img class="img-responsive" src="img_chania.jpg" alt="chania">

7 Galeria <div class="row"> <div class="col-md-4"> <a href="pulpitrock.jpg" class="thumbnail"> <p>pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p> <img src="pulpitrock.jpg" alt="pulpit Rock" style="width:150px;height:150px"> </a> <div class="col-md-4"> <a href="moustiers-sainte-marie.jpg" class="thumbnail"> <p>moustiers-sainte-marie: Considered as one of the "most beautiful villages of France".</p> <img src="moustiers-sainte-marie.jpg" alt="moustiers Sainte Marie"style="width:150px;height:150px"> </a> <div class="col-md-4"> <a href="cinqueterre.jpg" class="thumbnail"> <p>the Cinque Terre: A rugged portion of coast in the Liguria region of Italy.</p> <img src="cinqueterre.jpg" alt="cinque Terre" style="width:150px;height:150px"> </a> Responsive Embeds Também deixe vídeos ou slideshows dimensionar adequadamente em qualquer dispositivo. Pode ser aplicado a <iframe>, <embed>, <video>, and <object>. O exemplo a seguir mostra o.ebed-responsive-item para a tag <iframe>. A <div> define o relação de aspecto do vídeo: <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> Jumbotron A jumbotron indica uma caixa grande para chamar a atenção extra para algum conteúdo ou informação especial. A jumbotron é exibido como uma caixa cinza com cantos arredondados. Ele também aumenta o tamanho da fonte do texto dentro dele. Dica: Dentro de um jumbotron você pode colocar praticamente qualquer HTML válido, incluindo outros elementos Bootstrap / classes. Use a <div> element with class.jumbotron to create a jumbotron: Exemplo 1 <div class="container"> <div class="jumbotron"> <h1>bootstrap Tutorial</h1>

8 <p>bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p> <p>this is some text.</p> <p>this is another text.</p> Exemplo 2 <div class="jumbotron"> <h1>bootstrap Tutorial</h1> <p>bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p> <div class="container"> <p>this is some text.</p> <p>this is another text.</p> Cabeçalho Use a <div> com a classe.page-header para fazer um cabeçalho: <div class="page-header"> <h1>example Page Header</h1> Wells A classe.well acrescenta uma borda arredondada ao painel: <div class="well well-sm">small Well <div class="well well-lg">large Well Alertas Bootstrap fornece uma maneira fácil de criar mensagens de alerta pré-definidos: <div class="alert alert-success"> <strong>success!</strong> <div class="alert alert-info"> <strong>info!</strong> <div class="alert alert-warning"> <strong>warning!</strong> <div class="alert alert-danger"> <strong>danger!</strong> Closing Alerts Para fechar alertas, acrescente a classe class="close" e data-dismiss="alert" no link ou botão: <div class="alert alert-success"> <a href="#" class="close" data-dismiss="alert" aria-label="close"> </a>

9 <strong>success!</strong> Animated Alerts.fade e.in adiciona um efeito de esmaecimento ao fechar a mensagem de alerta: <div class="alert alert-success fade in"> Botões <button type="button" class="btn btn-default">default</button> <button type="button" class="btn btn-primary">primary</button> <button type="button" class="btn btn-success">success</button> <button type="button" class="btn btn-info">info</button> <button type="button" class="btn btn-warning">warning</button> <button type="button" class="btn btn-danger">danger</button> <button type="button" class="btn btn-link">link</button> The button classes can be used on an <a>, <button>, or <input> element: <a href="#" class="btn btn-info" role="button">link Button</a> <button type="button" class="btn btn-info">button</button> <input type="button" class="btn btn-info" value="input Button"> <input type="submit" class="btn btn-info" value="submit Button"> Button Sizes <button type="button" class="btn btn-primary btn-lg">large</button> <button type="button" class="btn btn-primary btn-md">medium</button> <button type="button" class="btn btn-primary btn-sm">small</button> <button type="button" class="btn btn-primary btn-xs">xsmall</button> Block Level Buttons A block level button spans the entire width of the parent element. Add class.btn-block to create a block level button: <button type="button" class="btn btn-primary btn-block">button 1</button> Active/Disabled Buttons A button can be set to an active (appear pressed) or a disabled (unclickable) state: <button type="button" class="btn btn-primary active">active Primary</button> <button type="button" class="btn btn-primary disabled">disabled Primary</button> Button Groups Bootstrap allows you to group a series of buttons together (on a single line) in a button group: Use a <div> element with class.btn-group to create a button group: <div class="btn-group"> <button type="button" class="btn btn-primary">apple</button> <button type="button" class="btn btn-primary">samsung</button> <button type="button" class="btn btn-primary">sony</button>

10 <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-primary">apple</button> <button type="button" class="btn btn-primary">samsung</button> <button type="button" class="btn btn-primary">sony</button> <div class="btn-group-vertical"> <button type="button" class="btn btn-primary">apple</button> <button type="button" class="btn btn-primary">samsung</button> <button type="button" class="btn btn-primary">sony</button> <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-primary">apple</a> <a href="#" class="btn btn-primary">samsung</a> <a href="#" class="btn btn-primary">sony</a> Nesting Button Groups & Dropdown Menus <div class="btn-group"> <button type="button" class="btn btn-primary">apple</button> <button type="button" class="btn btn-primary">samsung</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" datatoggle="dropdown"> Sony <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">tablet</a></li> <li><a href="#">smartphone</a></li> </ul> Split Button Dropdowns <div class="btn-group"> <button type="button" class="btn btn-primary">sony</button> <button type="button" class="btn btn-primary dropdown-toggle" datatoggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">tablet</a></li> <li><a href="#">smartphone</a></li> </ul> Glyphicons Bootstrap provides 260 glyphicons from the Glyphicons Halflings set.

11 Glyphicons can be used in text, buttons, toolbars, navigation, forms, etc. <span class="glyphicon glyphicon-name"></span> Badges Badges are numerical indicators of how many items are associated with a link: <a href="#">news <span class="badge">5</span></a><br> Labels Labels are used to provide additional information about something: Use the.label class, followed by one of the six contextual classes.labeldefault,.label-primary,.label-success,.label-info,.label-warning or.labeldanger, within a <span> element to create a label: Basic Progress Bar Uma barra de progresso pode ser usada para mostrar um usuário quanto tempo ocorre em um processo. Bootstrap fornece vários tipos de barras de progresso. <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> <span class="sr-only">70% Complete</span> Stacked Progress Bars Progress bars também podem ser empilhados: <div class="progress"> <div class="progress-bar progress-barsuccess" role="progressbar" style="width:40%"> Free Space <div class="progress-bar progress-barwarning" role="progressbar" style="width:10%"> Warning <div class="progress-bar progress-bardanger" role="progressbar" style="width:20%"> Danger Paginação Básica Se você tem um site com muitas páginas, você pode querer adicionar algum tipo de paginação para cada página. <ul class="pagination"> <li><a href="#">1</a></li> <li class="active"><a href="#">2</a></li> <li><a href="#">3</a></li> <li class="disabled"><a href="#">4</a></li>

12 <li><a href="#">5</a></li> </ul> <ul class="pagination"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li class="disabled"><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> Breadcrumbs Outra forma de paginação <ul class="breadcrumb"> <li><a href="#">home</a></li> <li><a href="#">private</a></li> <li><a href="#">pictures</a></li> <li class="active">vacation</li> </ul>