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.
Este artigo se concentra na introdução do tutorial introdutório zero-básico do Bootstrap (2). Os detalhes específicos são os seguintes:
Sites que frequentemente revisam as informações durante o processo:
http://www.w3school.com.cn/ Este é um site estabelecido pela W3C Alliance para espalhar o padrão W3C. Existem muitas tecnologias no lado da web, e você pode vê -lo como uma enciclopédia da tecnologia da Web.
http://v3.bootcss.com/ escusado será dizer que o documento oficial Bootstrap3
http://www.runoob.com/ Isso é realmente semelhante ao W3School, mas é um pouco mais complicado que o W3School. Muito do conteúdo é traduzido do site original do W3C English e dos documentos oficiais em inglês do bootstrap original, mas sinto que sua qualidade de tradução é maior (porque os dois primeiros sites também foram traduzidos para ele) e alguns casos são mais fáceis de entender.
Sem mais delongas, vamos começar:
(1) atingir claramente os objetivos
Como mostrado na figura abaixo, este é um site simples que queremos implementar. O layout é simples e não há efeito deslumbrante. No entanto, é necessário implementar uma função: leia informações relevantes do arquivo json (você pode verificar o site acima para obter conhecimento sobre JSON) e exibi -las no site.
Conteúdo do arquivo JSON:
{"Class 001": {"Xiao Wang": {"Gender": "Male","Age": "18","Interest": "Football","Hometown": "Shanghai"},"Xiao Li": {"Gender": "Male","Age": "20","Interest": "Basketball","Hometown": "Beijing"}},"Class 002 ": {" Xiao Cai ": {" gênero ":" feminino "," idade ":" 19 "," interesse ":" dança "," Hometown ":" Gaoxiong "}}," classe 003: "" ":" Xiao ma ": {" gender ":" masculino "," idade "" "" "" "" "" "," "" "" "" "" "" "" "" "" "" "" "" "" "," Xiao ma ": {" gender ":" masculino "," idade "" "" "" "" "" "," "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "". "Taibei"}}, "classe 005": {"xiao zhang": {"gênero": "masculino", "idade": "20", "interesse": "Running", "Hometown": "Guangzhou"}}}}Agora mesmo:
layout:
Existem três blocos principais: o lado esquerdo da primeira linha é a lista de classes, o lado direito da primeira linha é a lista de nomes de colegas de classe e a segunda linha é a informação relevante dos colegas de classe.
Função:
1. Clique em uma aula na lista de aulas para atualizar quais alunos da turma estão dinamicamente na lista de turmas e podem selecionar a classe.
2. Clique em um colega de classe na lista de colega de classe e exiba dinamicamente as informações do colega de classe na segunda linha. Apenas as informações de um colega de classe podem ser exibidas por vez.
(2) técnicas necessárias para análise
layout:
Bootstrap: Usado para implementar esse layout simples de duas fileiras, bem como a verificação das colunas de classe e as barras de rolagem (algumas são fáceis de implementar diretamente com o bootstrap, enquanto outras não. Como saber? Vá para os três sites acima para encontrar e verificar)
Função:
Use JavaScript e Ajax para obter aquisição de dados e interação dinâmica (em um método de atualização local).
(3) Análise de seleção técnica
1. Implementar layout.
Ao procurar a documentação (http://www.runoob.com/bootstrap/bootstrap-grid-system-example3.html), descobri que o bootstrap é estabelecido usando um sistema raster. Ao definir atributos de classe específicos para o DIV, posso alcançar o efeito de layout que desejo. E você pode definir efeitos diferentes em telefones celulares, tablets e computadores de mesa. Os atributos de classe das tags HTML e o que são tags HTML podem ser encontradas no W3School.
Vale a pena notar que os atributos de classe do elemento podem ter vários atributos de classe.
Por exemplo: <div role = "grupo" aria-label = "..." id = "btn-group-vertical-classes">>
Use intervalos de "espaço" entre diferentes atributos, acredite, isso permitirá que você escreva scripts JavaScript facilmente e ajuste o CSS.
2. Realize o arranjo vertical dos números de classe e várias seleções.
Verifique http://www.runoob.com/bootstrap/bootstrap-button-groups.html para saber como configurar grupos de botões verticais. Ou seja, defina a classe da div, onde o grupo de botões está localizado como vertical do grupo BTN, para que se torne o contêiner para armazenar o grupo de botões.
Verifique http://www.runoob.com/bootstrap/bootstrap-button-plugin.html e saiba como fazer a verificação do grupo de botões. A implementação é feita adicionando o atributo de dados data-toggle = "botões" ao atributo DIV do atributo de classe ao grupo BTN.
3. Implemente os cantos dos botões a serem redefinidos de cantos arredondados para ângulos retos, adicione barras de rolagem ao grupo de botões e adicione restrições ao texto exibido no botão para que ele não exceda o botão. A parte em excesso é exibida como "..." e, quando o mouse se move e para no botão, todo o texto é exibido:
Uma pequena parte (os cantos arredondados se tornam ângulos retos, o mouse pairando para exibir o texto) precisa ser definido diretamente na tag html.
A maioria das implementações é escrita com um CSS:
<style type = "text/css">#classes-de-vertical BTN-GRUPO {Overflow-y: Auto; Overflow-X: Auto; altura: 150px;}#BTN-GROUP-CLASS-CLASSUSTUS {Overflow-Y: Auto; Overflow-x: Auto; 150px;} {TEXTOFROFT: 0px;} </style>A parte do <estilo> do código é colocada na cabeça, isto é, entre <head> e </head>.
O método geral é primeiro usar o seletor CSS para selecionar a tag para definir o CSS e, em seguida, definir o estilo correspondente nos aparelhos encaracolados.
O chamado seletor CSS é o "#BTN-GROUP-Vertical-Classes" e "Button" no código acima, ou seja, uma linha de código nos aparelhos encaracolados. Existem vários métodos para usar o seletor CSS e você pode encontrar os métodos relevantes no site da W3SCOOL.
Como as folhas de estilo CSS possuem três métodos de carregamento (arquivo CSS; tag <head>, atributo de estilo no elemento HTML e a ordem de prioridade efetiva é: "estilo no elemento"> "elemento de estilo no cabeçalho do arquivo"> "Arquivo de estilo externo", também nos referimos a CSS de bootstrap, que envolve os estilos de overwings, que são alguns dos estilos, que se referem aos estilos, que se referem aos estilos, que se referem aos estilos, que se referem aos estilos, que se referem aos estilos, que se referem a um tipo de estilos, que se referem a um tipo de tags. A configuração do Radius de Fronteira no Botão acima não está funcionando).
<1> Escreva o atributo de estilo diretamente na tag elemento. Este é o mais preferido, então definitivamente funcionará.
<2> Modifique o arquivo CSS do Bootstrap ao qual você vinculou, de uma vez por todas, e adicione novos elementos no futuro, sem precisar reescrever o atributo de estilo um por um. Isso exige que você baixe o arquivo CSS em vez de se referir ao link.
Como nossa página é muito pequena, peguei o método um.
4. Use o AJAX para obter aquisição, interação e carga dinâmica de dados.
Pergunte -me como usar o Ajax? Pesquise no Baidu ou pergunte às pessoas que conhecem a tecnologia de front-end.
A coisa mais central do Ajax é que ele pode ser atualizado parcialmente sem atualizar a página inteira. Aqui, devemos primeiro verificar os documentos relevantes sobre a tecnologia Ajax (os três sites acima, bem como vários Baidu). Como você deseja obter dados do arquivo json, você se refere ao manual do Ajax http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp no jQuery (porque o js de bootstrap também foi baseado no jQuery e todos os métodos de trabalho. A função getjson foi selecionada. Além disso, consulte http://www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html Selecione cada função como o método de análise.
Na implementação do código, envolve principalmente o Traversal (para declaração), julgamento (se declaração), operações nos elementos HTML, adicionando elementos filho, modificando valores de atributo etc.
Em relação a como escrever a página específica, é entediante escrevê -la em detalhes, então eu apenas colei o código.
Alguns pontos a serem prestados atenção ao executar a demonstração: o Chrome parece restringir a leitura direta do conteúdo do arquivo localmente; portanto, você precisa colocar o projeto inteiro na pasta Htdocs do Apache. Em seguida, corra. Em relação a como instalar o Apache, meu blog anterior tem uma introdução muito detalhada. Como usá -lo, por favor, Baidu.
<! 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: 150px;}#BTN-GROUP-Class-Classates {Overflow-y: Auto; Overflow-X: Auto; Altura: 150px;} Button {Text-overflow: elipsis; Overflow: Hidden; Radius de borda: 0px;} </style> </ad Head> <body> <div> <br> <br> <div id = "Div1-Classes-Class"> <Div Role = "Grupo" Aria-Label = "... Ids1) Mostrar-> </div> <div id = "BTN-GROUP-Class-Class-Class" Role = "Grupo" Aria-Label = "..."> <!-onde os colegas de classe mostram-> <botão tipo = "Button" style = "DIVRADIUS: 0PX;"> Clique em classe para mostrar a classe. id = "context_div"> <p> Clique em ClassMate para mostrar detalhes. src = "js/bootstrap.min.js"> </script> <cript> $ (document) .ready (function () {$. getjson ("Resource/classmates.json", function (resultado) {$. (Buttern; data-toggle = "Button" CHOSEN_STATE = 0> </Button> '). Text (i); tmp_button.attr ("title", i); $ ("#btn-group-classes-classes") tmp_chosen = número ($ (this) .attr ("chosen_state"))^1; $ (this) .attr ("chosen_state", string (tmp_chosen)); $ ("#btn-group-vertical-classmates") 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; "chosen_state = 0> </button> '). Text (j); tmp_button.attr (" title ", j); $ ("#btn-group-class-classates "). Append (tmp_button);});}} (); selected_classmate = $ (this) .Text (); var classMate_Context_item; $ ("#context_div"). Empty (); $. Cada (resultado, função (i, campo) {$. cada (field23, field2) {if (j == Selected_) campo3; var tmp_p = $ ('<p> </p>'). text (classmate_context_item); $ ("#context_div"). Append (tmp_p);});});});