Os dois artigos anteriores falam apenas sobre como usar componentes, basicamente não sobre JS. Este blog deve ser discutido em combinação com JS.
Deixe -me explicar vários componentes
1. Caixa modal
2. Monitoramento de rolagem
3. Página de tags
4 dicas de ferramentas
5. Caixa pop-up
6. Botão
7. empilhamento
8. Página rotativa
9. Barra lateral
Importar CSS e JS primeiro
<link rel = "Stylesheet" type = "text/css" href = "css/bootstrap.min.css"> <link rel = "stylesheet" href = "// cdn.bootcss.com/bootstrap/3.5/css/bootstrap.minin.csssion/bootstrap/3.5/css/bootstrap.minin.cssion/bootstrap/3.5/css/bootstrap.minin.cssion/bootstrap/3.5/css/bootstrap.minin.cssion/bootstrap/3.5/css/bootstrap.minin.cssion/ src = "js/jQuery-3.1.0.min.js"> </script> <script src = "js/bootstrap.min.js"> </script>
1. Caixa modal
Geralmente usamos esta caixa modal ao fazer login ou ler determinados regulamentos, então a caixa modal é muito comum
Primeiro, escreva um botão para abrir a caixa modal
<!-Target de dados é o ID da nossa caixa modal, e dados-whemodythate = "@iMe" é a etiqueta e o valor da caixa modal que passamos-> <botão tipo = "button" data-toggle = "modal" Data-Target = "#myModal" data-whemodybay = "@iMe"> Abra a caixa modal </button>
Em seguida, escreva a caixa modal
<div id = "myModal" função = "diálogo" aria-label = "mymodallabel" aria-hidden = "true"> <!-Esta é uma pequena caixa modal. Altere modal-sm para modal-lg é uma grande caixa modal-> <div> <!-cabeça de caixa modal-> <div> <!-feche o botão no canto superior direito-> <button type = "button" dismississ = "modal" ARIA-LABEL = "Close"> <span Aria-hidden = "True"> <//span> </button <!! Conteúdo-> <div> <!-O conteúdo do quadro modal pode ser texto ou tabela-> <!-<p> hello </p>-> <form> <div> <belt> nome de usuário </elabel> <input type = "text"> </div> </div> </label> senha </celt> <input Type = "senha"> </div> <////Div> <///Div. data-dismiss="modal"> Close </button> <button type="button"> Save</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
Se você clicar no botão e depois passe os parâmetros para a tabela na caixa modal
Adicione a etiqueta de dados ao atributo do botão: Valor
Os dados acima-tudo o que = ”@iMe” são adicionados como exemplo. O parâmetro com o rótulo e o valor do @ime é adicionado.
A seguir está a operação JS
// método $ ("#myModal"). On ("show.bs.modal", function (e) {// obtenha o botão que clicar para abrir o var Button = $ (e.RelatedTarget) // Obtenha o parâmetro Passado pelo botão Var REELTEGIEN = Button.Data ("Qualquer que modal.find (". Modal-título"). Texto ("hello"+receptor); // altere o valor da entrada no corpo modal.find (". Entrada de corpo modal"). Val (destinatário)})2. Monitoramento de rolagem
Deslize para conteúdos diferentes, a página da guia mudará
Primeiro, escreva o atributo do corpo
<!-O deslocamento está definido como 70, esse valor é o melhor valor testado->
<Body Data-spy = "Scroll" Data-Target = ". NavBar" Data-offset = "70">
Em seguida, escreva a guia
<!-a parte superior do conteúdo exibido corrigido na barra de guias-> <nav role = "navegação"> <div> <div id = "myScrollspy"> <ul> <!-A conexão na tag é o id do título abaixo-> <li> <a href = "#iwen"> iwen </a> </li>> <a> <a- a href = "#iwen"> iwen </a> </li>> drop-down menu in the tag--> <li> <a href="#" data-toggle="dropdown"> drop-down menu<span></span> </a> <ul role="menu"> <li><a href="#one" tabindex="-1">one</a> </li> <li><a href="#two" tabindex="-1">two</a> </li> <li> <a href = "#três" tabindex = "-1"> três </a> </li> </ul> </li> </li>
Em seguida, escreva o conteúdo
<h2 id = "iwen">@iwen </h2> <p> Esta é uma pessoa, essa é uma pessoa </p> <h2 id = "iMe">@iMe </h2> <p> Esta é uma pessoa, essa é uma pessoa </p> <h2 id = "um"@um </h2> <p> isto é uma pessoa é uma pessoa é uma pessoa é uma pessoa, <H2, <h2 id = "um@um </h2> <p> id = "dois">@dois </h2> <p> Esta é uma pessoa, essa é uma pessoa </p> <h2 id = "três">@three </h2> <p> Esta é uma pessoa, essa é uma pessoa </p> <h2 id = "três">@three </h2> <p> Esta é uma pessoa, essa é uma pessoa </p>
Recomenda -se escrever o conteúdo por mais tempo para que o efeito seja mais óbvio. Não é conveniente escrever muitas palavras inúteis aqui.
Você também pode escrever alguns métodos JS
// método $ ("#myscrollspy"). On ("ativate.bs.scrollspy", function (e) {alert ("hello");})3. Página de tags
Clique em tags diferentes para exibir conteúdo diferente
Escreva a barra de tags primeiro
<ul id = "mytab"> <!-Um link de tag corresponde ao ID do painel de guias abaixo-> <li> <a href = "#home" data-toggle = "tab"> home </a> </li> <li> <a href = "#perfil" data-toggle = "tab"> "</a> </li> <li> Data-toggle = "Dropdown"> menu suspenso <span> </span> </a> <ul role = "menu"> <!-Ao contrário dos menus suspensos comuns, adicione data-toggle = "tab"-> <li> <a href = "#um" tabindex = "-1" toggle "=" tabs#-Tabs = "#um" <li> data-toggle = "tab"> dois </a> </li> </ul> </li> </li> </ul>
Em seguida, escreva o conteúdo de tags diferentes
<div id = "mytabContent"> <div id = "home"> <p> home </p> <div id = "perfil"> <p> perfil </p> <div id = "One"> <p> um </p> <div id = "dois"> <p> dois </p>
Você pode inicializar a página de guia exibida com JS
Existem várias maneiras de selecionar uma página de guia
$ ('#mytabs a [href = "#perfil"]'). tab ('show') // selecione $ ('#myTabs a: primeiro'). tab ('show') // selecione a primeira tabula (porque 0 é o primeiro). Se for uma página de guia no menu suspenso, o número deve ser adicionado em 1.4 dicas de ferramentas
<p> <!-Se o conteúdo do título estiver vazio, o conteúdo do título de dados-original será exibido. O posicionamento é a posição de exibição, que pode ser definida como superior | inferior | esquerda | direita-> <!-Os parâmetros podem ser definidos nos dados-**** ---> Bem-vindo ao <a data-animation = "false" id = "myTooltip" href = "#" data-toggle = "ferramenta" data-placement = "Bottom" "-Teriginal "
Então você precisa inicializá -lo com JS, caso contrário, não terá efeito
// inicialize a dica de ferramenta, aponte para exibir
$ ('[data-toggle = "Tooltip"]'). Tooltip ();
5. Caixa pop-up
A caixa pop-up é semelhante a uma dica de ferramenta, mas exibe mais rica que a dica de ferramenta e também é mais comumente usada.
<!-data-trigger = "foucus", clique no espaço em branco para desaparecer. Se você não adicionar, clique no botão para desaparecer. Se você o definir para o mouse, o botão que você move será exibido. Remova e desapareça-> <!-Esta caixa pop-up está intitulada e o conteúdo é conteúdo-> <botão tipo = "button" data-trigger = "foucus" data-placement = "inferior" data-toggle = "popover" data-content = "content"> caixa de pop-up </toxão>
Em seguida, inicialize com JS
// Inicialize o Popover
$ (". js-popover"). Popover ();
6. Botão
Os dois primeiros artigos falam sobre o estilo básico dos botões. Desta vez, é avançado, permitindo que os botões exibam texto diferente ao carregar.
Er
Em seguida, use o JS para vincular o evento de clique
// o evento de clique no botão de ligação $ (". JS-carregamento-btn"). ON ("Clique", função (e) {// Depois de clicar, defina para carregar o status, exibindo o texto de carregamento var Btn = $ (this) .Button ("carregamento");7. empilhamento
O efeito de empilhamento pode economizar muitos controles de tela, o que é muito prático
Isso é para clicar no botão para abrir a pilha
<!-href é o id do conteúdo-> <a data-toggle = "colapso" href = "#colapsoxample"> clique para ver </a> <div id = "colapsoxample"> <div> hello </div> </div>
Esta é a pilha de grupos de painéis
<div id = "acordeion" role = "Table"> <div> <div role = "tab" id = "headingone"> <!-título exibido-> <h4> <!-parente de dados se o id do painel-group-> <a data-toggle = "colapso" data-parent = "#concordion" href = "#" hiding-> <div id = "colapsone" role = "tabpanel"> <div> Olá <br> Olá <br> Olá <br> </div> </div> </div> <div> <div role = "tab" id = "theftingtwo"> <h4> <a-t-toggle = "collaps" data-parent = "### </div> <div id = "colapsetwo" role = "TabPanel"> <div> Olá <br> Olá <br> Olá <br> </div> </div> </div> <div> <div role = "Tab" id = "headthree"> <h4> <a-T-taggle = "colapso" data-parent =### </div> <div id = "collapsethree" role = "tabpanel"> <div> Olá <br> Olá <br> Olá <br> </div> </div> </div> </div> </div> </div> </div>
8. Página rotativa
Muitas vezes, podemos vê -lo na página inicial do site
<div id = "Carousel-Exemplo-Genérico"> <!-Esses são os três círculos brancos abaixo do indicador-> <ol> <li data-target = "#carrossel-expleric-genérico" Data-slide-to = "0"> </li> <li data-target = "#carousel-expleric" Slide para = 1 " Data-Target = "#Carousel-Exemplo-Genérico" Data-Slide-to = "2"> </li> </ol> <!-O conteúdo da página de rotação-> <div> <img src = "Images/4.jpg"> <!-Adicionar Texto-> <H3> u3d </h3> <p> versão src = "Images/2.jpg"> <div> <h3> u3d </h3> <p> Novo produto inicia </p> </div> </div> <div> <img src = "imagens/3.jpg"> <div> <h3> Apple </h3> <p> a maçã </p> </div> </divi> href = "#carousel-expler-generic" data-slide = "prew"> <pan> </span> </a>
Você pode definir intervalos e começar automaticamente com JS
// Defina o intervalo para 2s e carrossel automaticamente $ (". Carousel"). Carrossel ({intervalo: 2000})9. Barra lateral
O conteúdo principal da barra lateral é uma lista
<!-Para definir a largura, oculte-o na tela do telefone-> <div> <ul> <a href = "#"> hello </a> href = "#"> Olá </a> <a href = "#" hello </a> <a href = "#"> hello </a> <a href = "#" hello </a> </ul> </div>
Escreva estilo novamente
<Toy> .Affixed-element-top.affix { /*Se você quiser estar na parte inferior, poderá alterá-lo para baixo: 10px;* / topo: 10px; } .fafixed-element-top.affix-Bottom {Position: relativo; } </style>Adicione alguns js
$ (". JS-Affixed Element-top").Este é o uso básico do boostrap. Depois de dominá -lo, você pode criar uma boa página da web.
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.