Pontos -chave para o aprendizado:
1. Visão geral do Bootstrap
2.COOTSTRAP RECURSOS
3.COOTSTRAP Estrutura
4. Crie a primeira página
5. Vários preparativos para aprender
Nesta lição, aprendemos principalmente sobre a história, os recursos, os usos e por que o Boostrap foi escolhido para desenvolver nossos projetos na web.
um. Visão geral do bootstrap
O Bootstrap é uma estrutura de código aberto baseado em HTML, CSS e JavaScript, desenvolvido por dois engenheiros técnicos do Twitter (o maior Weibo do mundo). O código da estrutura é simples e visualmente bonito e pode ser usado para criar rápida e simplesmente requisitos de página da web com base em PC e dispositivos móveis.
Em junho de 2010, os engenheiros do Twitter resolveram o problema de colaboração e unificação nas tarefas de desenvolvimento do front-end. Após várias soluções, o Bootstrap foi finalmente confirmado e lançado em agosto de 2011. Após um longo período de iteração e atualização, o projeto original orientado a CSS se transformou em uma estrutura de código aberto com um front-end da Web multifuncional, com muitos plug-ins de JavaScript e ícones incorporados.
A parte mais importante do bootstrap é o seu layout responsivo, que pode ser compatível com o acesso à página em telefones PC, PAD e celular.
Download e demonstração do bootstrap:
Site oficial de tradução de documentos domésticos: http://www.bootcss.com
Site oficial do Piaocheng Web Club: http://www.ycku.com
dois. Recursos de bootstrap
O Bootstrap é muito popular graças aos seus recursos e recursos muito práticos. As principais funções principais são as seguintes:
(1). Device cruzado, navegador cruzado
É compatível com todos os navegadores modernos, incluindo os mais criticados IE7 e 8. É claro que este curso não considera mais os navegadores abaixo do IE9.
(2). Layout responsivo
Ele pode não apenas suportar monitores em várias resoluções no lado do PC, mas também suporta exibições de comutação responsivas de almofada móvel, telefone celular e outras telas.
(3). Componentes abrangentes fornecidos
O Bootstrap fornece componentes altamente práticos, incluindo: navegação, etiquetas, barras de ferramentas, botões e outros componentes, que são convenientes para os desenvolvedores ligarem.
(4). Plug-in jQuery embutido
O Bootstrap fornece muitos plug-ins práticos do jQuery, que facilitam os desenvolvedores a implementar vários efeitos especiais gerais na web.
(5). Apoie HTML5 e CSS3
As tags semânticas HTML5 e as propriedades CSS3 são bem suportadas.
(6). Apoie o estilo menos dinâmico
Menos usa variáveis, nidificação e operações para escrever CSS mais rápido e flexível. Funciona bem com Bootstrap.
três. Estrutura de bootstrap
Primeiro de tudo, se você deseja entender a estrutura do documento do boostrap, precisará baixá -la localmente no site oficial. O endereço de download do bootstrap é o seguinte:
Endereço de download do Bootstrap: http://v3.bootcss.com/ (selecione o ambiente de produção, v3.3.4)
Após a descompressão, o diretório apresenta uma estrutura como esta:
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
└── fontes/
├── glificons-halflings-regular.eot
├── glificons-halflings-regular.svg
├── glificons-halflings-regular.ttf
├── glificons-halflings-regular.woff
└── glifos-halflings-regular.woff2
É dividido principalmente em três diretórios principais: CSS (estilo), JS (script) e fontes (font).
1. Existem quatro arquivos com sufixo CSS no diretório CSS. Os que contêm a palavra min são versões compactadas, que geralmente são usadas; Os que não contêm são arquivos sem compactação e você pode aprender a entender o código CSS; Enquanto o arquivo com sufixo de mapa é uma tabela de mapeamento de código -fonte CSS, que é usada em algumas ferramentas específicas do navegador.
O diretório 2.js contém dois arquivos, que são compactados e compactados arquivos JS.
O diretório 3.FONTS contém arquivos de fonte com diferentes sufixos.
Quatro. Crie a primeira página
Criamos uma página HTML5, apresentamos o arquivo principal do bootstrap e, em seguida, testamos se ele é exibido normalmente.
// o primeiro bootstrap <! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> bootstrap Introdução </title> <link Rel = "Stylesheet" href = "CSS/bootstrap.minin.cssssssssssssssssssssssssssssssssssssssssssssrosft </href =" CSS/bootstrap.min.min.csssssssssssssssssssssssssssssssssssssssssssssssssssssssssncs "> src = "js/jQuery.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> </body> </html>
cinco. Vários preparativos para aprender
1. Ferramentas de desenvolvimento. Utilizamos o Sublime Text3 como ferramenta de desenvolvimento para Bootstrap e instalamos o plug-in de geração de código EMMET;
2. Ferramentas de teste, além dos navegadores modernos convencionais, estão em segundo lugar como ferramentas de teste móvel. Utilizamos o Opera Mobile Emulator e as ferramentas de teste da Web do Chrome.
3. A fundação necessária é pelo menos a base do curso da 1ª temporada do HTML5. O Bootstrap possui muitos plug-ins de jQuery embutidos. Embora seja muito mais simples de usar do que o JQuery ou o próprio JS, se você tiver a base dos cursos JQuery e JS, terá um entendimento mais profundo do seu aprendizado;
4. Resolução do curso: cursos básicos, usamos 1024 x 768 para registrar, mas algumas peças especiais, como cursos responsivos e de projeto, requerem gravação de alta resolução e usará 1440 x 900 para registrar.
O exposto acima é o conhecimento relevante da estrutura de bootstrap introduzida a você pelo editor. Espero que seja útil para você!