Twitter Bootstrap
•Download as PPTX, PDF•
0 likes•706 views
Conheça o framework de front-end intuitivo para um desenvolvimento web fácil e rápido
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Recently uploaded
Recently uploaded (20)
Twitter Bootstrap
- 1. FLISOL-DF 2013 Por: Raphael França
- 3. Números (Abril 2013) GitHub 49,107 star 14,924 fork
- 5. 960 Grid System http://960.gs/ Blue Print CSS http://www.blueprintcss.org/ Golden Grid System http://goldengridsystem.com/
- 6. Exemplos
- 8. Tabs: Breadcrumb: Paginação: Alertas: Barra de progresso: Botões:
Editor's Notes
- Meu nome é Raphael França, eu sou Analista de Sistemas e estou aqui para apresentar uma introdução ao Bootstrap do Twitter.
- Bootstrap é o que chamamos Framework UI (front-end). Ele contém um conjunto de JavaScript, CSS e imagens que ajuda você a criar aplicações rápidas, limpas e altamente usável.
- Bootstrap tem como base um sistema de grid em 12 colunas.O que é um grid? Um sistema de grid é uma forma de criar uma base sólida para construir o seu projecto por diante.Se você quer que sua aplicação web tenha uma navegação à esquerda você pode criar seu HTML usando o número de linha 3Se você não quiser alguma navegação e você quer que seu conteúdo seja o mais amplo possível, então você pode usar o número de linha 5Esta concepção de grid foi popularizado por 960 http://960.gs sistema de gridBluePrinthttp://www.blueprintcss.org
- Se você quiser implementar sua aplicação com uma navegação à esquerda como eu falei, este é o HTML necessário.Você também pode aninhar suas colunas com outras colunas.
- Bootstrap oferece um personalizador baseado na Web que permitem a geração de um arquivo CSS com base em suas necessidades específicas.
- Aqui está uma lista de alguns dos componentes CSS disponível. Há dezenas deles disponíveis com no bootstrap.
- Bootstrap dá vida à sua interface do usuário usando pluginsjQuery. Aqui estão alguns exemplos de grandes Elementos. Mais uma vez, você tem acesso a dezenas deles gratuitamente.
- Bootstrap dá vida à sua interface do usuário usando pluginsjQuery. Aqui estão alguns exemplos de grandes Elementos. Mais uma vez, você tem acesso a dezenas deles gratuitamente.
- Bootstrap oferece um personalizador baseado na Web que permitem a geração de um arquivo CSS com base em suas necessidades específicas.
- O mesmo vale para os plugins de JavaScript. Para os fãs de Mootools que você pode encontrar uma versão Mootools aqui: http://anutron.github.com/mootools-bootstrap
- Bootstrap também fornece uma maneira para gerar uma versão completamente original do CSS usando LESS.Eu não vou falar sobre LESS, tudo que você precisa saber agora é que ele compila uma versão LESS do seu CSS, onde você pode definir variáveis e ninho seletores CSS.Se você quiser mais informações, por favor verifique http://lesscss.org/.
- Agora que você sabe sobre LESS, é facilmente compreensível que podemos criar totalmente diferentes visuais baseados no mesmo HTML. Aqui estão algumas bom exemplo
- Agora que você sabe sobre LESS, é facilmente compreensível que podemos criar totalmente diferentes visuais baseados no mesmo HTML. Aqui estão algumas bom exemplo
- http://bootswatch.com
- http://bootswatch.com
- Agora vou explicar o porquê usar Bootstrap é uma boa escolha.
- Bootstrap tem ótimas funcionalidades. Acabamos de ver algumas e tenho certeza que você já sente o potencial que o projeto tem.Vamos resumi-lo.Bootstrap:- Tem GridSystem => permitem que você crie você fundação da aplicação web- Contém dezenas de componentes CSS => Permite você criar uma grande UI- É alimentado por pluginsJavaScript => dá vida ao UI CSS- Pode ser personalizado usando um personalizador baseado na web
- Bootstrap é bom para criar live mockups (protótipos). Tenho certeza de que alguns de vocês aqui ainda estão usando Balsamiqmockups, é uma ótima ferramenta, mas não pode fazer muita coisa com ele. http://www.balsamiq.com/products/mockups
- Aqui está um protótipo usando Bootstrap.
- Fácil criação de prova de conceito => Para responder à pergunta é factível?Reúna primeiros Comentários => Para responder às perguntas: É bom? É viável? Em seu projeto, você quer saber o mais cedo possível, se a idéia é ou não viável. Se não for bom você quer falhar rápido (tipo de abordagem Agile)Uma que você fez todas as pesquisas e os testes para se orientar você pode se dedicar a execução de projetos mais sofisticados e se preocupar com a engenharia.
- É a capacidade de redimensionar o conteúdo da sua página web para qualquer dispositivo e tamanho da tela.
- Design Responsivo do Bootstrap é muito bom e é um recurso muito legal de ter hoje em dia com todos os celulares, tablets, laptops e telas grandes que temos disponíveis.Algo que também é bom observar é que este Design Responsivo através do CSS. Que costumava ser tratado com JavaScript há algum tempo atrás.
- Ótimos recursos => Dezenas de estado dos recursos da arteProjeto Responsive => funciona todas as telasProtótipo Vivo => GoAgile? Comunidade grande => É muito importante para um projeto open source. Bootstrap tem futuro brilhante pela frente.
- Bootstrap é hoje amplamente utilizado na web. Existe centenas de templates para famosos CMS como Joomla, WordPress e Drupal.Pouco tempo atrás Joomla surpreendeu a todos usando Bootstrap para a sua mais recente versão 3.0.Para aqueles que estão interessados em Joomla, você também vai notar essa mudança é uma pequena revolução em si. Joomla não somente mudar para o Bootstrap, mas também mudar a Jquery ... Como Jquery é mais popular e amplamente utilizado em toda a web, eu acho que como um fã Joomla que esta mudança era necessária para atrair uma nova comunidade de desenvolvedores Joomla que vai dar um futuro melhor .
- Viadeo (o maior concorrente LinkedIn) que pode nunca chegar perto de ser um linkedin, mas eles são baseados em Bootstrap.