O Bootstrap é um kit de ferramentas de código aberto lançado pelo Twitter para desenvolvimento front-end. Foi desenvolvido pelo designer do Twitter Mark Otto e Jacob Thornton e é uma estrutura CSS/HTML.
Grupo de botões
.btn-group> .btn: um conjunto de botões .btn é embrulhado no .btn-group
Elementos de terceirização.btn-group {position/display/}
Botão elemento.btn
<div role = "group"> <button type = "button"> esquerda </button> <button type = "button"> middle </button> <button type = "button"> direita </button> </div>
Barra de ferramentas de botão
.btn-toolbar> .btn-group
Elemento de terceirização.btn-toolbar {margem-left}
<div role = "barra de ferramentas"> <div role = "group"> ... </div> <div role = "group"> ... </div> <div role = "grupo"> ... </div> </div>
Tamanho do botão
.btn-group-*(lg/md/sm/xs)
.btn-group-*>.
<div> <butto> esquerda </button> <butter> Middle </botão> <butão> direita </butut> </div>
Ninho de botão
.Btn-Grupo Nesting.btn-Grupo
<div role = "btn-group"> <butto> button1 </button> <butto> button2 </button> <div role = "btn-group"> <button data-toggle = "suspenso"> arraste para baixo </span> </button> <ul> <li> <a> Projeto 1 </a> </i> <a> <a> Projeto 2 <ul> <li> <a>
Grupo de botões organizado verticalmente
.btn-group-vertical
<div role = "btn-group"> ... </div>
Alinhe as duas extremidades do grupo de botões
Manifesta -se como preenchendo a largura do elemento pai
Falha: porque a margem não suporta exibição: célula de tabela; O efeito das fronteiras duplas aparecerá
Button Nesting.Btn-Group-justificado {Display/Width/Float}
<div role = "grupo"> <div role = "group"> <butão> esquerda </button> </div> <div role = "group"> <butão> esquerda </button> </div> <div role = "group"> <botão data-toggle = "suspenso"> direita <li> <li> <a> Item1 </a> </li> <li> <a> Item2 </a> </li> </ul> </div> </div>
Menu suspenso no estilo de botão
Elemento de terceirização classe.btn-group {display/position}
Confiando no plugin de menu suspenso
Menu suspenso de botão único
<div role = "group"> <button data-toggle = "suspenso"> button <pange> </span> </butut> <ul> <li>
Botão dividido Menu puxador
<div> <butto> Button </button> <button data-toggle = "suspenso"> <pan> </span> </button> <ul> <li> <a href = ""> item1 </a> </li> <li> <a href = ""> item2 </a> </li> </ul> <li>
Botão Tamanho do menu suspenso
Tamanho do controle.btn-*:. BTN-LG/BTN-SM/BTN-XS {Padding/Font-Size/Border-Radius}
<div> <button data-toggle = "suspenso"> button <pange> </span> </butut> <ul> <li> <a href = ""> item1 </a> </li> <li> <a href = ""> item2 </a> </li> </ul> </div>
Menu pop -up para cima
Controle Pop-up Direction.Dropup: .Dropup.Drop-Menu {Bottom/Margin-Bottom}
<div> <button data-toggle = "suspenso"> button <pange> </span> </butut> <ul> <li> <a href = ""> item1 </a> </li> <li> <a href = ""> item2 </a> </li> </ul> </div>
O exposto acima é o conhecimento relevante sobre os botões do componente de bootstrap (2) introduzidos a você pelo editor. Espero que seja útil para você!