O que é Bootstrap?
O Bootstrap é uma estrutura front-end para o rápido desenvolvimento de aplicativos e sites da Web. O Bootstrap é baseado em HTML, CSS e JavaScript.
história
O Bootstrap foi desenvolvido por Mark Otto do Twitter e Jacob Thornton. O Bootstrap é um produto de código aberto lançado no GitHub em agosto de 2011.
Depois de escrever este artigo, quero escrever o seguinte conteúdo deste artigo:
1. Com base na minha compreensão do bootstrap, farei um pequeno resumo.
2. Vou embelezar e otimizar a interface do usuário e o código para os exemplos de aprendizado de bootstrap (2) do zero, principalmente para falar sobre como fiz o efeito que queria.
3. É melhor ensinar as pessoas a pescar do que ensinar as pessoas a pescar. Use seus próprios exemplos (porque você também é um novato e o que escreve pode ser mais adequado para iniciantes) e fale sobre as armadilhas encontradas durante o processo de escrita de código e pontos que precisam receber atenção.
Sem mais delongas, vamos começar:
1. Um pequeno resumo do bootstrap
Com base na descrição da documentação oficial do Bootstrap (http://v3.bootcss.com/), o Bootstrap é dividido em três grandes blocos: estilo CSS, componentes e plug-in javascript.
Primeiro de tudo, fica claro que o Bootstrap é uma estrutura, o que significa que, se outros fizerem rodas, você pode usá -las diretamente, para não construir rodas sozinho. Portanto, precisamos esclarecer dois pontos: que tipo de rodas são essas rodas e como usá -las.
1. Estilo CSS: apresenta principalmente o estilo global do sistema raster e do bootstrap. Implementado definindo o valor da classe.
1.1 Sistema de grade:
Isso nos permite implementar facilmente o layout das páginas HTML (http://v3.bootcss.com/css/#grid).
Eu acho que o sistema de grade é muito importante. Como o layout das páginas HTML é uma tarefa importante e complicada (você pode dar uma olhada na introdução do layout no w3school http://www.w3school.com.cn/html/html_layout.asp, procure o código e o exemplo e você entenderá), e a compatibilidade de comércio.
O sistema raster simplificou muito isso. Abra a conexão acima sobre o sistema de grade e você descobrirá que só precisa atribuir o valor correspondente ao atributo de classe do elemento HTML de acordo com o efeito que deseja alcançar e também pode definir efeitos diferentes para dispositivos de diferentes tamanhos de tela.
1.2 Bootstrap Global Style:
É assim que o bootstrap embeleza os elementos HTML comumente usados (por exemplo: div, botão, P, Tabela, IMG, etc.). Ao atribuir o valor correspondente ao atributo de classe do elemento HTML, você pode obter o efeito desejado.
Vamos dar o exemplo mais simples:
Conforme mostrado na figura acima, o Bootstrap permite alterar o valor da classe do elemento do botão para alterar o tamanho do botão sem precisar incomodar o arquivo CSS ou incorporar o valor de estilo do elemento.
2. Componente: Eu acho que o componente é o bootstrap que combina alguns elementos (elementos HTML e código JavaScript) em componentes e fornece muitos ícones práticos e muito bonitos e práticos. Esses componentes são basicamente comumente usados no desenvolvimento de HTML. Implementado definindo o valor da classe. (http://v3.bootcss.com/components/)
Vamos dar o exemplo mais simples:
Conforme mostrado na figura acima, quando precisamos implementar a função de navegação. Encontre os componentes correspondentes no boostrap e atribua os valores de classe, UL e LI correspondentes de acordo com suas próprias necessidades.
3. JavaScript Plug-in: Eu acho que o plug-in JavaScript do Bootstrap é a "roda" que encapsula funções comuns de interação na Web. Você só precisa definir o atributo de classe e o atributo de dados para implementar funções de interação da Web comumente usadas sem precisar escrever muito código JavaScript.
Primeiro de tudo, vamos falar sobre um pequeno episódio. Os novatos podem pensar erroneamente que "JavaScript" e "Java" têm uma conexão profunda e podem até pensar que JavaScript é uma variante de Java. De fato, esse não é o caso. JavaScript é uma linguagem de script desenvolvida pela Netscape para a Internet. De fato, seu primeiro nome é "LiveScript". Mais tarde, o Netscape alcançou uma cooperação com a Sun (ou seja, a empresa que inventou o Java, que mais tarde foi adquirido pela Oracle). Naquela época, a língua Java estava no auge e era muito famosa. Para andar de passeio, ele mudou seu nome para JavaScript. Tanto que algumas pessoas brincavam: a diferença entre "Java" e "JavaScript" é a mesma que a diferença entre "Lei Feng" e "Lei Feng Tower".
De volta ao tópico, sabemos que existe JavaScript para fornecer recursos de interação da página da web. Portanto, os ricos plug-ins JavaScript no BootSRIPT podem fazer você implementar convenientemente funções de interação da Web comumente usadas sem precisar se concentrar em "fazer rodas".
Como mostrado na figura acima, usando o plug-in de carrossel da Bootstrap (http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html, o documento oficial que não pode ser traduzido para o chinês. Você pode implementar facilmente a função de carrossel de imagem que muitos sites usam agora. Aqui, você só precisa atribuir os valores de SRC de classe e imagem correspondentes de acordo com o tutorial no link acima e nem precisa definir o valor dos dados.
2. Embelezar e otimizar a interface do usuário e o código para os exemplos de aprendizado de bootstrap (2) do zero
A figura a seguir mostra os efeitos alcançados no tutorial anterior:
Podemos ver que existem as seguintes deficiências que precisam ser corrigidas:
(1) Clique no colega de classe específico e exiba suas informações, e elas não estão selecionadas. (Quando você clicar no início, você estará no estado selecionado, mas esse é apenas o efeito de clique do botão. Se você clicar no espaço em branco, o estado selecionado desaparecerá)
(2) As cores são monótonas e não são muito bonitas.
(3) O layout precisa ser ajustado. A caixa de informações é o local onde precisamos de informações e deve ser o mais grande possível. É melhor ocultar a caixa desnecessária quando é exibida.
(4) Para o código, o código JavaScript no bootstrap (2) do zero é gravado na página HTML e existem segmentos de código duplicados. Os segmentos de código duplicado devem ser gravados em funções, o que pode reduzir o tamanho do código. Ao modificar o código, posso simplesmente modificar a função correspondente diretamente, sem procurar um lugar de cada vez. O código JavaScript pode ser gravado em arquivos JS para separar as páginas HTML e o código JavaScript.
Seleção técnica (inclinada falando, é pensar em como usar o que já está na estrutura do bootstrap para alcançar o efeito desejado):
1. Primeiro, ajuste o layout, ajuste a caixa de informações e a caixa de classe juntos e exiba a caixa de classe na parte superior.
Obviamente, precisamos apenas colocar a div, onde a caixa de informações está localizada e a div da caixa de classe na mesma linha na div e modificar o valor do atributo de classe "col-md" relacionado ao sistema de grade para alcançá-lo. Por exemplo, se queremos que eles exibam uma proporção de 2: 1, o atributo de classe da caixa de informações deve ter col-md-8, enquanto a caixa de classe deve ser col-md-4.
Vale a pena notar que o front-end nunca pode ser um desenvolvimento de uma etapa. Freqüentemente, o código inicial não é o resultado perfeito que queremos e precisa ser ajustado com cuidado. Como exemplo, todos devem aprender a pesquisar sozinhos, tentar fazer ajustes contínuos (os ajustes subsequentes não serão explicados no processo específico):
Depois de modificar o código, o efeito apresentado é o seguinte:
Obviamente, apenas uma classe é exibida em cada linha acima, o que é um desperdício de espaço. As duas partes abaixo não estão alinhadas.
Exclua o atributo "BTN-Grupo-vertical" no atributo de classe do componente DIV acima e adicione col-md-6 ao atributo de classe do tmp_button no código JS. Além disso, observa -se que, depois de definir isso, a primeira linha tem um estranho recuo em comparação com a segunda linha:
Não há dúvida de que esse tipo de aparência e alterações no layout estão relacionadas ao CSS. Neste momento, podemos dar uma olhada no CSS específico do elemento.
Tome o Chrome como exemplo:
Clique com o botão direito do mouse neste elemento e selecione Inspecionar, o que significa revisão. Você encontrará o código correspondente na caixa à direita. Através da comparação, descobrimos que é um problema de margem-esquerda. Esta propriedade é o padrão na estrutura do bootstrap e é herdada do elemento superior. Alguns são -1px e outros são 0px. Só precisamos alterá -lo para o mesmo, por exemplo, todos são alterados para 0px:
No tmp_button no código JS, modifique o atributo de estilo e adicione "margem-esquerda: 0px;". Algumas pessoas pensam que a fonte não é boa de procurar no centro, para que possam adicionar um alinhamento de texto: esquerda e definir o texto no botão para iniciar da esquerda.
Efeitos corrigidos:
2. Adicione um botão de dobra para que os usuários possam ocultar/abrir a caixa de classe através deste botão. Ao clicar em ClassMate para exibir informações detalhadas, ele o ocultará automaticamente para economizar muito espaço para a caixa de informações exibir.
Para adicionar um botão dobrar, você pode consultar http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html.
Além disso, podemos adicionar um ícone bonito ao botão dobrável e ele pode ser facilmente alcançado referindo-se ao tutorial http://v3.bootcss.com/components/#glyphicons.
Ao clicar no ClassMate para exibir informações detalhadas, ele será oculto automaticamente. Você precisa modificar o evento de clique no botão ClassMate, ou seja, o código JS correspondente.
Verificamos o uso do plug-in dobrável do Bootstrap http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html (isso é melhor, a parte oficial ainda não foi traduzida) e encontramos o seguinte conteúdo:
Acontece que o CLAPSE e os valores no atributo de classe controlam as funções ocultas e de exibição. Em seguida, precisamos apenas modificar o atributo de classe correspondente do elemento HTML para executar a operação "Mostrar/Ocultar" no código JS de Evento de clique do botão. Portanto, adicione a seguinte declaração à função de clique do botão ClassMate:
$ ("#colapsone"). Att ("classe", "colapso do colapso do painel");
3. Corrigido o bug que "clique em alunos específicos e exiba suas informações, e não há estado selecionado".
Ao verificar o documento, http://www.runoob.com/bootstrap/bootstrap-button-plugin.html, definimos a propriedade Data-Toggle do botão como "Button", que pode renderizar automaticamente o estado selecionado após clicar.
Por isso, adicionamos o atributo data-toggle = "Button" ao botão de ClassMate.
Neste momento, ocorreu outro problema. Acho que quando clico em outros colegas de classe a seguir, o clique original ainda estava no estado ativo. O que devo fazer?
Ao verificar http://www.runoob.com/bootstrap/bootstrap-buttons.html, o estado selecionado aparecerá quando a atribuição de classe do botão estiver ativa. Ou seja, a configuração acima, ou seja, o Bootstrap faz algo assim: quando o botão Button Data-Toggle = "" é clicado, o ativo é automaticamente adicionado à classe e o estado selecionado está presente. Quando clicado novamente, o ativo é removido automaticamente da classe e o estado não selecionado é apresentado.
Em outras palavras, só precisamos fazer essa operação. Por exemplo, ao clicar em colegas de classe, posso remover todos os botões de classe de classe ativa do atributo de classe. Depois que o clique é concluído, apenas o botão que cliquei está no estado ativo.
Portanto, você só precisa adicionar essas instruções à função de cliques do botão ClassMate:
A cópia do código é a seguinte:
$ ("..
O efeito é o seguinte:
4. Embelezar a aparência do botão
Encontre a seção de botão CSS no bootstrap:
http://www.runoob.com/bootstrap/bootstrap-buttons.html
Seguindo o tutorial para modificá -lo, simplesmente modifiquei a cor do botão aqui e você pode alterá -lo de acordo com suas necessidades. O efeito é o seguinte:
5. Separação de páginas HTML e código JavaScript
De fato, é dividido em duas etapas:
Etapa 1: Coloque o código JavaScript no arquivo JS e vincule -o no arquivo HTML.
Etapa 2: Escreva blocos de código com JavaScript ou funções claras em uma função e chame a função diretamente.
Como as duas etapas são relativamente simples, qualquer pessoa que tenha aprendido uma linguagem de programação deve fazê -lo. Não vou expandir e escrever.
Vale a pena notar que, ao vincular arquivos JS, preste atenção ao pedido.
Por exemplo, o arquivo JS no Bootstrap é baseado no jQuery e usa muitas funções jQuery, para que o arquivo jQs JQUERY deve declarar o link antes do arquivo JS no bootstrap.
Da mesma forma, nosso arquivo JS é baseado no bootstrap, portanto, deve ser após o bootstrap, caso contrário, o código não funcionará.
Por fim, vamos postar o código relevante:
getclassmate.html:
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <meta name "" title "=" width = device-width, -> <link href = "css/bootstrap.min.css" rel = "STILESHEET"> <!-html5 shim e responda.js para o suporte do IE8 de elementos html5 e consultas de mídia-> <!-aviso: responde. src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src =" // cdn.bootcss.com/RIDORD.JS/1.4.2/RIDOM.IST) type = "text/css">#btn-group-vertical-classes {overflow-y: automático; Overflow-X: Auto; Altura: 100px;}#BTN-GROUP-Class-Classates {Overflow-y: Auto; Overflow-X: Auto; Altura: 500px;} botão {text-overflow: elipsis; estouro: hidden; radio de borda: 0px;}#context_div {overflow-y: auto; Overflow-X: Auto; height:500px;}</style></head><body><div><div><div><h4 style="text-align:right;"><a id="collapse_a" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span aria-hidden="true"></span> Click this to show/hide class</a> </h4> </div> <div id = "colapsone"> <div id = "div1-classes-classmates"> <div role = "group" aria-label = "..." id = "btn-group-classes" <brasses "> <!-onde as classes mostram-> </div> </div> </div> <br"> <br> <! id = "BTN-GROUP-Class-Classates" Role = "Grupo" Aria-Label = "..."> <!-onde os colegas de classe mostram-> <botão type = "button" style = "Radius de borda: 0px;"> clique em classe para mostrar a classe Class. Detalhes. src = "js/bootstrap.min.js"> </script> <script src = "js/script_getclassmate.js"> </script> </body> </html>script_getclassmate.js:
$ (document) .ready (function () {$. getjson ("Resource/ClassMates.json", function (resultado) {$. cada (resultado, função (i, campo) {var tmp_button = $ ('<butter type = "button" style = "border-radius: 0px; text-align: linGone; CHOSEN_STATE = 0> </BOTT> '). Texto (i); tmp_button.attr ("title", i); $ ("#btn-group-classes"). Append (tmp_button);}); $ (" tmp_chosen = número ($ (this) .Attr ("CHOSEN_STATE"))^1; $ (this) .Attr ("CHOSEN_STATE", String (tmp_chosen)); Showcla SSMATES (resultado); $ (". Btn.btn-default.btn-classmate"). Click (function () {$ (". Btn-ClassMate"). Att ("classe", "btn btn-default btn-classmate btn-info "); $ ("#colapsone "). att (" classe "," colapso do colapso do painel "); var selected_classMate = $ (this) .text (); ShowclassMatedEtail (resultado, seleted_classMate);}););}); ShowClassMates (resultado) {$ ("#BTN-GROUP-Class-Classates"). Empty (); var chosen_list = new Array (); $ (". Btn.btn-default.btn-class"). Filtro (function () {juizflag = false; if ($ (this) .attr ("chosen_state") == "1") {juizflag = true; chosen_list.push ($ (this) .text ()); }); $. Cada (resultado, função (i, campo) {var chosen_list_x; for (chosen_list_x em chosen_list) {if (chosen_list [chosen_list_x] == i) {$. (Field, j, field2) {var tmp_ut 0px; "data-toggle =" Button "chosen_state = 0> </button> '). Text (j); tmp_button.attr (" title ", j); $ ("#btn-group-class-classmates "). Append (tmp_button);}); Classmate_context_item; $ ("#context_div"). Empty (); $. Cada (resultado, função (i, campo) {$. cada (campo, function (j, field2) {if (j == selected_classmate) {$. cada (field2, function3) {// alert (k); field3;var tmp_p=$('<p></p>').text(classmate_context_item);$("#context_div").append(tmp_p);});}});});});});});});});});});});Classesmates.json:
{"Class 001": {"Xiao Wang": {"Gender": "Male","Age": "18","Interest": "Football","Hometown": "Shanghai","Chinese": "78","Math": "90","English": "66","Physics": "81","Chemistry": "88","History": "69","Geography": "92"},"Xiao Li": {"Gender": "Male","Age": "20","Interest": "Basketball","Hometown": "Beijing","Chinese": "98","Math": "77","English": "97","Physics": "72","Chemistry": "73","History": "88","Geography": "81"}},"Class 002": {"Xiao Cai": {"Gender": "Female","Age": "19","Interest": "Dance","Hometown": "Gaoxiong","Chinese": "93","Math": "80","English": "92","Physics": "82","Chemistry": "77","History": "89","Geography": "83"}},"Class 003": {"Xiao Ma": {"Gender": "Male","Age": "18","Interest": "Reading","Hometown": "Taibei","Chinese": "91","Math": "93","English": "96","Physics": "97","Chemistry": "100","History": "94","Geography": "92"}},"Class 005": {"Xiao Zhang": {"Gender": "Male","Age": "20","Interest": "Running","Hometown": "Guangzhou","Chinese": "67","Math": "70","English": "66", "Física": "80", "Química": 68, "History": "79", "Geography": "93"}}}O acima é o tutorial de introdução para o Bootstrap Zero-Basic Introdução (iii) apresentado a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!