A instalação do bootstrap é muito fácil. Este artigo é um resumo dos meus estudos, que é conveniente para futuras consultas e aprendizado. Ao mesmo tempo, espero ajudá -lo.
1. Baixe o bootstrap
Você pode baixar a versão mais recente do bootstrap em http://getbootstrap.com/. Ao clicar neste link, você verá uma página da web como esta:
Você verá dois botões:
Baixar Bootstrap: Download Bootstrap. Clique neste botão e você pode baixar versões compactadas pré -compiladas de CSS de Bootstrap, JavaScript e Fontes. Os documentos e os arquivos originais do código -fonte não estão incluídos.
Download Fonte: Baixe o código fonte. Clique neste botão e você poderá obter o Bootstrap mais recente e o código -fonte JavaScript diretamente de.
Se você estiver usando o código -fonte não compilado, precisará compilar o arquivo menos para gerar arquivos CSS reutilizáveis. Para compilar menos arquivos, o Bootstrap suporta apenas o Recess, que é o prompt CSS menos.JS baseado no Twitter.
Para uma melhor compreensão e uso mais fácil, usaremos uma versão pré -compilada do bootstrap neste tutorial.
Como os arquivos são compilados e compactados, você não precisa incluir esses arquivos independentes sempre em desenvolvimento funcional independente.
Esta nota de estudo é a versão mais recente (Bootstrap 3).
2. Estrutura do arquivo
1. Bootstrap pré -compilado
Ao baixar a versão compilada do Bootstrap e descompactar o arquivo zip, você verá a seguinte estrutura de arquivo/diretório:
Como mostrado na imagem acima, você pode ver o CSS e JS compilados (Bootstrap.*), Bem como o CSS e JS compilados compilados (bootstrap.min.*). Ele também inclui a fonte de glificons, um tema opcional de bootstrap.
2. Código -fonte do Bootstrap
Se você baixou o código -fonte do Bootstrap, a estrutura do arquivo ficará assim:
Os arquivos sob menos/, JS/ e fontes/ são os códigos de origem de fontes de bootstrap CSS, JS e Icon, respectivamente.
A pasta Dist/ contém os arquivos e pastas listadas na seção de download pré -compilada acima.
Docs-atira/, exemplos/e todos os arquivos *.html são documentos de bootstrap.
3. Modelo HTML
Um modelo HTML básico usando o bootstrap se parece com o seguinte:
<! Doctype html> <html> <head> <title> modelo de bootstrap </title> <meta name = "viewport" content = "width = width de dispositivo, escala inicial = 1.0"> <!-Introdução de bootstrap-> <link href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel = "sheet STILEET"> <!-html5 shim e resposta.js são usados para habilitar ie8 para suportar html5 elementos e mídias-e mídia-> O arquivo não pode ter efeito-> <!-[se lt ie 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </SCRIPT> <SCRIPT src = "https://oss.maxcdn.com/libs/replge.js/1.3.0/replge.minmin.js"> </script> <! [endif]-> </head> <bodypt> <h1> Olá, mundo! src = "https://code.jquery.com/jquery.js"> </script> <!-inclui todos os plugins compilados-> <script src = "js/bootstrap.min.js"> </sCript> </body> </html>
Aqui você pode ver jquery.js, bootstrap.min.js e bootstrap.min.css , que são usados para criar um arquivo html regular um modelo que usa o bootstrap.
4. Exemplos
Agora vamos tentar produzir "Olá, mundo!" Usando Bootstrap:
<! Doctype html> <html> <head> <titter> tente a instância do bootstrap online src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body> <h1>Hello, mundo! </h1> </body> </html>
<!-novo arquivo CSS do Bootstrap Core-> <link href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel = "StyleSheet"> <!-Arquivo de bootstrap opcional (não usado geralmente)-> sinalizador <! src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"> </script> <!-JQuery File. Certifique-se de introduzir-> <script src = "http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"> <!-O mais recente arquivo javascript do Bootstrap Core src = "http://apps.bdimg.com/libs/bootstrap/3.0/js/bootstrap.min.js"> </script>
Se você ainda deseja aprender em profundidade, clique aqui para aprender e anexar dois tópicos interessantes a você: Bootstrap Learning Tutorial Bootstrap Tutorial Practical Tutorial
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e para construir corretamente o ambiente de instalação do Bootstrap.