O primeiro passo é fazer download do Bootstrap. Outras formas de utilização estão disponíveis, mas, por enquanto, vamos ter enfoque nesta (baixar os arquivos).
Após o download, descompacte o arquivo. Você verá uma estrutura de pastas semelhante ao seguinte:
bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2
Os arquivos principais são bootstrap.css
(e sua versão compactada bootstrap.min.css
) e bootrap.js
(e sua versão compactada bootstrap.min.js
). Opcionalmente, você pode utilizar o arquivo de tema (por exemplo: bootstrap-theme.min.css
). O Bootstrap também usa a biblioteca jQuery, necessária para o funcionamento de alguns componentes.
Os arquivos também pode ser utilizados online, sem necessidade de download, direto da CDN.
Estrutura básica do HTML
O código a seguir apresenta a estrutura básica de um arquivo HTML com Bootstrap.
Importante notar a importação dos arquivos boostrap.css
, jquery.min.js
e bootstrap.min.js
.