Layout com Twitter Bootstrap - Parte 1

Índice

Twitter Bootstrap é uma coleção de ferramentas de software gratuitas para a criação de sites e aplicativos.
É uma estrutura para promover a consistência por meio de ferramentas internas. Antes do Bootstrap, várias bibliotecas eram usadas para o desenvolvimento da interface do usuário, o que gerava inconsistências e uma alta carga de trabalho de manutenção.
O bootstrap é modular e consiste essencialmente em uma série de folhas de estilo que implementam a variedade de componentes da ferramenta. Uma folha de estilo chamada bootstrap.less inclui os componentes da folha de estilo. Os desenvolvedores podem adaptar o mesmo arquivo Bootstrap, selecionando os componentes que desejam usar em seu projeto.
Ferramentas e classes disponíveis no Bootstrap
Sistema de gangue e design responsivo
O Bootstrap vem com um layout de grade de 940 pixels de largura padrão. Como alternativa, o desenvolvedor pode usar um layout de largura variável. Isso ajusta a largura das colunas automaticamente.
A folha de estilo CSS
O Bootstrap fornece um conjunto de folhas de estilo que fornecem definições básicas de estilo para todos os componentes HTML. Isso dá uniformidade ao navegador e ao sistema de largura, dá uma aparência moderna para a formatação de elementos de texto, tabelas e formulários.
Componentes reutilizáveis
Os elementos HTML regulares, Bootstrap, contém outra interface de elemento comumente usada. Inclui botões com recursos avançados, como grupo de botões ou botões com opção de menu suspenso, listas de navegação, rótulos horizontais e verticais, breadcrumb, paginação, rótulos, recursos avançados de miniaturas tipográficas, formatos de mensagens de alerta e barras de progresso.
Plug-ins Javascript e jQuery
Os componentes Javascript para Bootstrap são baseados na biblioteca jQuery Javascript. Os plug-ins são encontrados na ferramenta de plug-in jQuery. Eles fornecem elementos adicionais de interface do usuário, como diálogos, dicas de ferramentas e carrosséis.
Eles também estendem a funcionalidade de alguns elementos de interface existentes, incluindo, por exemplo, uma função de preenchimento automático para campos de entrada. A versão 2.0 suporta os seguintes plug-ins Javascript: Modal, Suspenso, Scrollspy, Tab, Tooltip, Popover, Alerta, Botão, Collapse, Carrossel e Typeahead.
Para usar o Bootstrap em uma página HTML, o desenvolvedor só precisa baixar a folha de estilo CSS do Bootstrap e vinculá-la ao arquivo HTML.
Baixe o código CSS e Javascript compilado, que é a maneira mais fácil de começar a usar o Bootstrap. A desvantagem é que esta versão não inclui os arquivos ou documentação original. Para baixar esta versão, acesse getbootstrap.com e pressione o botão Baixar Bootstrap.
Também podemos optar por vincular aos arquivos de bootstrap de servidores externos da seguinte maneira:
Para usar esses arquivos, modifique os seguintes links em suas páginas
 

Depois de descompactar o arquivo que você baixou com a versão compilada do Bootstrap, você verá o seguinte arquivo e estrutura de diretório:
bootstrap /
├── css /
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js /
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fontes /
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
Esses arquivos são as bibliotecas que compõem o bootstrap, posteriormente veremos os componentes e como são utilizados.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo

Você vai ajudar o desenvolvimento do site, compartilhando a página com seus amigos

wave wave wave wave wave