Scribd Logo
Importer

Bienvenue sur Scribd !

  • 4 Bootstrap PDF

    Transféré par

    Matheus Carvalho
    539 vues33 pages
    Este documento fornece uma visão geral do framework Bootstrap, incluindo seus principais componentes como grade, tipografia, tabelas, formulários, carrossel e modal. O Bootstrap é um framework popular e gratuito para desenvolvimento de sites responsivos.

    Description originale:

    Titre original

    4-BOOTSTRAP.pdf

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    Este documento fornece uma visão geral do framework Bootstrap, incluindo seus principais componentes como grade, tipografia, tabelas, formulários, carrossel e modal. O Bootstrap é um framework popular e gratuito para desenvolvimento de sites responsivos.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    539 vues33 pages

    4 Bootstrap PDF

    Transféré par

    Matheus Carvalho
    Este documento fornece uma visão geral do framework Bootstrap, incluindo seus principais componentes como grade, tipografia, tabelas, formulários, carrossel e modal. O Bootstrap é um framework popular e gratuito para desenvolvimento de sites responsivos.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 33

    Desenvolvimento de

    Aplicações Multimídia
    Bootstrap
    Prof. Sérgio Barbosa
    saabarbosa@gmail.com
    Visão geral
     Introdução
     Por onde começar
     Componentes
     CSS
     JavaScript

    Sérgio Barbosa
    Introdução
     Bootstrap é o framework (HTML, CSS e JS)
    mais popular para o desenvolvimento de
    projetos responsivo na web.

     Bootstrap é totalmente gratuito para baixar e


    usar!!
    Sérgio Barbosa
    Introdução

    Sérgio Barbosa
    O que? Como ? Onde ?
     Bootstrap é uma estrutura de front-end livre
    para desenvolvimento web mais rápida e fácil
     Bootstrap inclui modelos de design baseado
    em HTML e CSS para tipografia, formas,
    botões, tabelas, navegação, modais,
    carrosséis de imagem e muitos outros, bem
    como plugins JavaScript opcionais
     Bootstrap também lhe dá a capacidade de
    facilmente criar designs responsivos
    Sérgio Barbosa
    O que? Como ? Onde ?
     Bootstrap foi desenvolvido por Mark Otto e
    Jacob Thornton no Twitter, e lançado como
    um produto de fonte aberta em agosto de
    2011 no GitHub.

    Sérgio Barbosa
    Por que usar Bootstrap?
     Fácil de usar
     Responsividade: CSS responsivo do
    Bootstrap ajusta para celulares, tablets e
    desktops
     Primeira abordagem Mobile
     Compatibilidade com navegadores

    Sérgio Barbosa
    Pré-requisitos
    Antes de começar a estudar BOOSTRAP, você
    deve ter um conhecimento básico de:
    HTML

    CSS

    JavaScript

    Sérgio Barbosa
    Get Started

    Sérgio Barbosa
    Versão para baixar
    Há duas versões do Bootstrap disponíveis para
    download:
    Versão de produção - Compilado CSS,
    JavaScript e fontes.
    Versão de desenvolvimento - Fontes
    JavaScript e arquivos de fonte, juntamente com
    os docs.

    Sérgio Barbosa
    Biblioteca
    Se você não deseja fazer o download e
    hospedar Bootstrap, você pode incluí-lo a partir
    de um CDN (Content Delivery Network).

    Sérgio Barbosa
    Componentes
    Grid System

    As colunas são reorganizadas automaticamente


    dependendo do tamanho da tela (permite até 12 colunas
    ao longo da página)
    Sérgio Barbosa
    Componentes
    Estrutura básica
    • xs (for phones)
    • sm (for tablets)
    • md (for desktops)
    • lg (for larger desktops)

    Sérgio Barbosa
    Componentes
    Tipologia
    default font-size global da Bootstrap é 14px

    line-height de 1.428

    Aplicada ao <body> e todos os parágrafos.

    • As tags h1 ... h6 para


    já vem formatados!

    Sérgio Barbosa
    Componentes
    Table
    A tabela básica Bootstrap tem um
    preenchimento e apenas divisores horizontais.
    A classe .table acrescenta estilo básico para
    uma tabela:

    Sérgio Barbosa
    Componentes
    Table
    Classes: .table-striped, .table-bordered, .table-
    hover, .table-condensed, .table-responsive

    Sérgio Barbosa
    Componentes
    Images
    Classes: .img-circle, .img-thumbnail, .img-
    responsive

    Sérgio Barbosa
    Componentes
    Jumbotron and Page Header

    Sérgio Barbosa
    Componentes
    Alerts

    Sérgio Barbosa
    Componentes
    Button

    Sérgio Barbosa
    Componentes
    Button dropdowns

    Sérgio Barbosa
    Componentes
    Dropdowns

    Sérgio Barbosa
    Componentes
    Tabs com dropdowns menu

    Sérgio Barbosa
    Componentes
    Navbar

    Sérgio Barbosa
    Componentes
    Vertical (Default)
    Fo
    rm
    s

    Horizontal

    Sérgio Barbosa
    Componentes
    Class=“form-inline”

    Sérgio Barbosa
    Componentes
    Horizontal Form

    Sérgio Barbosa
    Componentes
    Forms suporta controles:
     input
     textarea
     checkbox
     radio
     select

    Sérgio Barbosa
    Componentes
    Atributos Form:
     input FOCUS
     DISABLED inputs e fieldsets
     READONLY inputs
     VALIDATION STATES
     ICONS
     HIDDEN labels
    Exemplo: http://www.w3schools.com/bootstrap/tryit.asp?
    filename=trybs_form_horizontal_all&stacked=h

    Sérgio Barbosa
    Componentes
    Input Sizing em Forms:
     Height e Column Sizing

    Sérgio Barbosa
    Componentes
    Carousel
     O plug-in Carousel é um componente js que
    fornece o efeito de transição de elementos, como
    um carrossel (slideshow).

    Sérgio Barbosa
    http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h
    Componentes
    Modal
     O plug-in Modal é uma janela de caixa de
    diálogo/pop-up que é exibida no topo da página
    corrente.

    http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h
    Componentes
    Modal

    Vous aimerez peut-être aussi