Desta vez, daremos uma olhada no uso de componentes JS. Este artigo será um pouco longo. Espero que todos possam ler pacientemente e acredito que haverá muitos ganhos. Muitos amigos do jardim me adicionaram aos meus amigos e expressaram o meu estilo de escrever. É simples e claro. Aqui, obrigado novamente pelo seu apoio. Por um lado, minha própria tecnologia é limitada e eu escrevo as coisas relativamente básicas. Por outro lado, escrevo coisas com base em meu próprio entendimento e expresso coisas complexas na linguagem mais simples. Portanto, se houver algo errado com a escrita, me dê algumas correções.
1. Referência do arquivo JS
Nota: O jQuery deve ser introduzido antes de outros arquivos JS, porque outros plugins dependem do jQuery.
<!-<script src = "js/jQuery-1.11.3.min.js"> </script> arquivo de carga importado localmente-> <script src = "http://cdn.bootcs.com/jquery/1.11.3/jquery.min.js"> </script>--—10- src = "js/bootstrap.min.js"> </script>
2. Atributos de dados
Função: Através do atributo de dados, você pode usar qualquer plug-in de inicialização sem gravar nenhum código JS. Os plug-ins de menu de referência mencionados anteriormente, como data-toggle = "suspenso" e outros menus de referência.
Então, como existe uma função de ativação, como desligar a função? Adicione o seguinte código ao JavaScript:
<script type = "text/javascript"> $ (document) .off ('. data-api'); </script>Se você deseja desativar as funções de um plug-in específico, adicione o seguinte código:
<script type = "text/javascript"> // feche a função plug-in da caixa de prompt $ (document) .off ('. alert.data-api'); </script>Todos os plugins JS são basicamente as seguintes etapas:
1: Como usá -lo? --- Como escrever a classe correspondente?
2: Como ligar? --- Depois de escrever a aula, como fazer a aula que grava entra em vigor?
3: Processamento de eventos-incluindo ocorrência antes que a ação seja acionada e ocorrência após o início da ação
NOTA: Todas as ações ocorrem antes do acionamento, o Bootstrap fornece o PreventDefault, que implementa a interrupção da ação antes de ser executada. O código é o seguinte:
$ ('#myModal'). on ('show.bs.modal', function (e) {if (! data) retorna e.PreventDefault () // impedir a exibição da caixa modal, é claro que você também pode alternar para evitar a aparência de outros plugins})Nota: O Bootstrap não toma medidas corretivas para os navegadores que desativam o JavaScript. Portanto, precisamos escrever um código para nos remediar, e acredito que todo mundo sabe disso.
<Noscript> Seu navegador não suporta JavaScript, faça o download do mais recente navegador </oscript>
3. Componente de caixa modal (modal.js)
Observação:
1: não é suportado para abrir várias caixas modais ao mesmo tempo
2: A caixa modal deve estar localizada no elemento filho do corpo o máximo possível para evitar outros componentes que afetam a exibição e a função da caixa modal.
3: Instruções para terminais móveis
4: Melhorar a acessibilidade-adributo do atributo
5: A vista pode ser incorporada na caixa modal, ou seja, data-toggle = "modal"
Vejamos a coluna abaixo. Clique no botão e uma caixa modal será exibida. Em relação às propriedades aqui, se você leu o artigo anterior, acredito que não é difícil de entender. Não vou explicar em detalhes aqui. Você pode postar o código para testá -lo mesmo:
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <meta name "" viewport "=" width = device-width,, inicialmente scale "> <meta =" viewport "=" width = device-width,, sply-scale "> <meta =" viewport "=" width = device-width, " E qualquer outro conteúdo * deve * segui -los! -> <title> </title> <link href = "css/bootstrap.css" rel = "stylesheet"> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <link href = "css/style.css" Rel = "Stylesheet"> < data-toggle = "modal" data-target = ". bs-exemplo-modal-lg"> Uma caixa modal grande aparece </button> <div id = "mymodal" tabindex = "-1" role = "diálogo" ARIA-Labelledby = "myLarGemodallabel"> <div>-caixa de divisão <viS> <viS> ARIA-LABEL = "Close"> <span Aria-hidden = "true"> × </span> </butut> <h4> Título modal </h4> </div> <div> <p> Um corpo fino… </p> </buttão <butt> <butt> typen type = "Button" Data-Dismiss = "Modal"> Close </button <typtle> </div> </div> <!-Altere o tamanho da caixa modal e adicione a classe modal-sm-> <botão type = "button" data-toggle = "modal" data-target = ". ARIA-LABELLEDBY = "MyLargemodAllabel"> <div> --- caixa modal pequena <div> <div> <button type = "button" data-Dismiss = "modal" aria-label = "Close"> <span ARIA-HIDDED = "TRUE"> × </span </buttle> <h4> Modal </h4- hidden = ">"> × </span> <h4> <h4> Titlo </h4 <div> <button type = "button" data-dismiss = "modal"> feche </button> <button type = "button"> salvar alterações </button> </div> </div> </div> </div> </div> <!-efeitos de animação são proibidos, basta deletar o desbotamento-> <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <script src = "js/bootstrap.minmin.js"> </script> <script type = "text/javascript"> --- chamando este código para fazer o plug-in funcionar </script> </body> </html>
O efeito é o seguinte:
Combinado com caixas modais , você também pode adicionar outras funções ao conteúdo do corpo, como caixas de entrada incorporadas no formulário, etc., e nenhum código é publicado aqui.
Para eventos na caixa modal , adicione o código a seguir em JavaScript, como mostrado abaixo:
Copy the code as follows:<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> $ ("#mymodal"). modal ("show"); --- chamando este código para fazer a caixa modal plug-in entrar em vigor e exibir $ ('#mymodal').
alerta ("111");
}) --- Este evento significa que o evento de alerta será acionado após fechar a caixa modal </sCript>
Vamos dar uma olhada em como a caixa modal está incorporada no vídeo. Precisamos adicionar algum código, reprodução automática, parada e outras funções. Vamos dar uma olhada no código primeiro
<a href = "#" data-toggle = "modal" data-target = "#videomodal" data-thevideo = "http://v.youku.com/v_show/id_xmtu2odmymduyma==.html"> video </a "<dd ida =" videoMom "" TABLEODAL "TABLEOM" "TABLEODOMINDAMIMINDAIMINDANIMINDANIMAINDANIMIMUNDANIMAINIMANIMINDAIMINDAIMINDRATA-DIPTUMANIMIMIMANTO) ARIA-LABELLEDBY = "Videomodal" Aria-Hidden = "True"> <div> <div> <div> <button type = "button" data-dismiss = "modal" aria-hidden = "true"> × </button> <div> <frame src = ""> </ifram> </</</div> <//Div> <//Div> <frame src = ""> </iframe> src = "js/jQuery-1.11.3.min.js"> </script> arquivo de carregamento local-> <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <cripts src = jits/bhripts/script src = jits/script/script/" type = "text/javascript"> // Exibir função AutoPlayModal () {var Trigger = $ ("Body"). Find ('[Data-toggle = "modal"]'); trigger.click (function () {var themodal = $ (this) .data ("target"); var videosrc = $ (this) .attr ("dados-thevideo"); var videosrcauto = videosrc+"? AutoPlay = 1; $ (themodal+'ifRame'). Button.Close '). Clique em (function () {$ (Themodal+' iframe '). Att (' src ', videosrc);}); }); }); }); } // Chame a função $ (document) .ready (function () {AutoPlayModal ();}); </script> <Noscript> não suporta o navegador JavaScript </oscript>O efeito não é mais capturas de tela, o SRC acima apresenta o endereço da Youku.
4. Componente de monitoramento de rolagem
Listado na barra de navegação, ou seja, alterne automaticamente as guias de acordo com a posição de rolagem. Vejamos o código.
1: Verifique se a barra de rolagem aparece.
2: Usually add data-spy to body, that is, use data-spy="scroll" <body data-spy="scroll" data-target=".navbar" data-offset="70"> <div id="myScrollspy"> <nav role="navigation"> <div> <div id="navbar-scroll"> <ul> <li><a href="#home">home</a></li> <li> <a href = "#message"> mensagem </a> </li> <li> <a href = "#sobre"> sobre </a> </li> <li> <a href = "#sobre"> sobre </a> </li> <li> <a href = "#" data-toggle = "suspenso"> suspenso </li> href = "#one"> um </a> <li> <a href = "#dois"> dois </a> <li> <a href = "#três"> três </a> </ul> </li> </ul> </div> </div> </nav> mostrou conteúdo-> <h1 id = "" <p>111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111) 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <p> 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 id = "Sobre"> sobre </h1> <p> 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <Hr> <h1 id = "um"> um </h1> <p> 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 </p> <h1 id = "dois"> dois </h1> <p> 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
Entenda o significado do deslocamento de dados: ou seja, o deslocamento de cima quando a posição de rolagem é. Em segundo lugar, seu processamento de eventos é semelhante ao uso de caixas modais e não será explicado.
Os efeitos são os seguintes:
5. Componente de caixa imediata
Perceber:
1: Use Data-Toggle = "ToolTip"
2: A colocação de dados representa a direção da caixa imediata, existem quatro direções, esquerda, direita, inferior, superior
3: Animação de dados é definir seu efeito de animação como False, ou seja, depois que o mouse é movido, ele muda do gradual original para uma aparência instantânea, sem efeito buffer.
<div> <p> <!-Facilitando-> Este é um título de teste, <a href = "#" id = "clickevent" data-toggle = "tooltip" data-placeme = "inferior" dados-original-title = "cnblog.com/jtjds" data-animation = "false"> clique em mim, lembre src = "js/jQuery-1.11.3.min.js"> </script> arquivo de carregamento local-> <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <cripts src = jits/bhripts/script src = jits/script/script/" type = "text/javascript"> $ ('[data-toggle = "tooltip"]'). Tooltip (); // inicialize $ ('#clickevent'). Tooltip ('show') // Abra e exibe diretamente ('#clickevent'). é exibido}) </sCript>6. Componente de quadro pop-up
Perceber:
1: A caixa pop-up adiciona uma pequena camada suspensa a qualquer elemento para armazenar informações que não são de main.
2: Quando o comprimento do conteúdo é 0, a caixa pop-up não será exibida. Use Data-Toggle = "Popover"
3: Confie no plug-in de caixa imediato e precisa ser inicializado manualmente (consulte a inicialização no JavaScript)
Veja o código a seguir e não há mais capturas de tela:
Copie o código da seguinte forma: <!-Clique no botão para aparecer e clique no botão para ocultar->
<button type = "button" data-toggle = "popover" data-content = "e aqui está um conteúdo incrível, é muito envolvente, certo?"> Clique em mim para aparecer/ocultar caixa de pop-up </botão>
Ao clicar no botão, aparece, clique no botão e desaparece. O que devo fazer se quiser clicar nele em um espaço em branco e escondê -lo?
Basta adicionar dados-trigger = "foco" para ocultar o foco, o gatilho significa gatilho.
Copie o código da seguinte forma: <!- Clique no botão para aparecer, clique em qualquer espaço em branco para ocultá-lo. É melhor usar a tag a, é claro que você também pode usar o botão->
<a tabindex = "0" id = "myPopover" role = "botão" data-toggle = "popover"
Data-trigger = "Focus" Data-content = "e este é um conteúdo bonito"> Clique em mim para desaparecer </a>
7. Componente da caixa de aviso
Perceber:
1: Use Data-Dismiss = "Alert"
2: O plug-in pode adicionar cliques e desaparecer à mensagem de aviso
3: Ao usar o botão Fechar, ou seja, quando a classe Fechar é usada, deve ser o primeiro elemento filho do alerta, e o texto não pode aparecer antes dele.
Vejamos o código:
<!-caixa de aviso-> <div id = "myalert"> <button type = "button" data-dismiss = "alert" aria-label = "close"> <span Aria-hidden = "true"> × </span> </button> <id span> "Welcome </span> <butt =" button> "> ARIA-LABEL = "Close"> <span Aria-hidden = "true"> × </span> </button> <pan> Bem-vindo </span> <botão type = "button">
Se houver várias caixas de aviso no JavaScript e você quiser fechar uma caixa de aviso, adicione o código a seguir em JavaScript, como segue:
$ (" #myalert"). alert ('feche') // Quando a primeira caixa de aviso é fechada, ou quando #Myalert é substituído por #myalert1, a segunda caixa de aviso fechará $ (' #myalert1').).8. Componente do botão
Perceber:
1: alternar o status do botão (desativado ou ativado)-isso é alcançado usando o AutoComplete = "Off"
2: Faça vários botões em barras de ferramentas, etc.
3: Defina o status de carregamento definindo o carregamento de dados-text = "Carregando ..."
<!-Button-> <botão type = "button" id = "myButton" Data-carregamento-text = "Carregando ..." AutoComplete = "Off"> Carregando estado </botão> <botão tipo = "Button" Data-Toggle = "Button" Button "<! TIPE = "Caixa de seleção" AUTOCOMLETE = "OFF" Checked> home </elabel> <belt> <input type = "Caixa de seleção" AutoComplete = "OFF"> message </celt> <brety> <input type = "CheckBox" AutoComplete = "Off"> perfil </cret> </div>
Se você deseja alterar o conteúdo depois de clicar no botão, adicione dados-complete-text = "xxxx" e adicione o código JavaScript da seguinte forma:
Copie o código do código da seguinte forma: <!-Depois de clicar em gatilhos, altere o texto que completa dados de conteúdo representa o conteúdo final->
<button type = "Button" Dados-complete-Text = "FINAL" AutoComplete = "OFF"> O conteúdo mudará automaticamente depois de clicar em </butut> <cript> $ ('. mybtn').
Para definir o botão para alternar o estado e definir a hora para alternar o estado, você pode adicionar o seguinte código ao JavaScript:
<Cript> $ ('#mybutton').9. Conjunto da estrutura dobrável
Nota: Use data-toggle = "colapso" para ver o código:
<a role = "botão" data-toggle = "colapso" href = "#colapsoexample" aria-expeled = "false" aria --controls = "colapsoxample"> link com href </a> <div id = "colapsoxample"> <div> Olá, este é o teste! </div> </div>
Além disso, ele pode ser usado em combinação com grupos de painéis, como mostrado abaixo:
<!-grupo de painéis-> <div id = "mypanel" role = "tablista"> <!-primeiro painel-> <div> <div role = "tab" id = "headingone"> <h4> <a data-toggle = "colapso" </a-parent = "#mypanel" href = "#collapane"> </a> Role = "TabPanel"> <div> Olá sobre mim </div> </div> </div> <!-Second Painel-> </div>
Ao clicar em casa para controlar a parte do conteúdo, é definir seu href = "#colapsone", que é o ID correspondente ao conteúdo.
Em relação aos eventos, semelhantes aos usados anteriormente, esses componentes têm uso de tempo semelhante, como segue
<script type = "text/javascript"> $ ('#mypanel').10. Componente deslizante de carso
Nota: use data-ride = "carrossel", como o carrossel que costumamos fazer. Vamos primeiro olhar para o código do diagrama de carrossel que fiz:
<div id = "myContainer"> --- Observe o alvo do alvo de dados <div id = "carousel1" data-ride = "carousel"> <ol>-indicadores de deslizamento, isto é, que se desliza para o que um <li> <li>-slidelget =#carousel1 "one-slide-slide =" 0 "> <li> Data-slide-to = "1"> </li> <li data-target = "#carousel1" slide-to = "2"> </li> </ol> <!-renderizando conteúdo-> <div role = "listbox"> <div> <mg src = "bg.jpeg"> <div>--carousel-Caption humor, você e eu iremos com você </p> </div> </div> <div> <img src = "timg.jpg"> </div> <div> <img src = "xx.jpg"> </div> </div> <!-duas tags à esquerda e direita-> <a href "#"#caroous1 "" ARIA-HIDDEN = "true"> </span> <span> anterior </span> </a> <a href = "#carousel1" role = "button" data-slide = "next"> <span ARIA-HIDDED = "TRUE"> </span> </span> a seguir </span> </a> </div> </div>
Os efeitos são os seguintes:
Em relação à velocidade de deslizamento, você pode adicionar diretamente dados-interval = "2000" para definir a alternância de dois segundos, mas o problema com esse método é que
Ao atualizar o navegador, você deve clicar manualmente nos botões esquerdo e direito antes de poder alternar. A melhor maneira é defini -lo em JavaScript. Como mostrado no código a seguir
<script type = "text/javascript"> $ (". carrossel"). Carrossel ({interval: 2000;}) </sCript>11. Componentes de afixos
NOTA: Usar posição: corrigido para posicionamento, use data-spy = "afix" combinado com o deslocamento de dados para obter monitoramento e, quando ocorre um determinado evento, ele é deslocado. Leia o seguinte código:
<div> <!-- Layout of the grid system --> <div> <ul> <li>11111111111</li> <li>222222222222</li> <li>33333333333333333</li> <li>44444444444444444444</li> <li> 5555555555 </li> <li> 666666666666 </li> <li>7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 77777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <p> 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <div > <ul> <li>1111111111111</li> <li>222222222222</li> <li>33333333333333333</li> <li>4444444444444444444444444444</li> <li>5555555555</li> <li> 6666666666666 </li> <li>777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <script src = "js/bootstrap.minmin.js"> </script> <script = "text/javascript"> $ (. Offset: {}}) $ ('.O componente JS está quase aqui, e aprender a estrutura do bootstrap está quase no fim. O próximo artigo acabou. Eu pretendo projetar uma página especificamente com o Bootstrap para criá -lo e compartilhá -lo com você. Se você também está aprendendo a estrutura do bootstrap, comunique e aprenda!
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.