O grupo de botões é o mesmo que o componente menu suspenso e precisa confiar no plug-in Button.js para funcionar corretamente.
Aspecto estrutural: use um contêiner com o nome da classe BTN-GROUP e coloque vários botões neste contêiner.
O grupo de botões também é um componente independente, para que o arquivo de origem correspondente possa ser encontrado:
Menos: Buttons.less
SASS: _buttons.scss
CSS: bootstrap.css line 3131 ~ 3291
<div> <button type = "button"> <pan> </span> </button>… <button type = "button"> <pan> </span> </button> </div>
CSS:
.btn-grupo, .btn-group-vertical {Posição: relativa; exibição: Block inline; alinhamento vertical: médio;}. .btn: focus, .btn-group-vertical> .btn: focus, .btn-group-vertical> .btn: ativo, .btn-group-vertical> .btn: ativo, .btn-group> .btn.actn, .btn-group-vertical> .btn.active {z-index: 2;} .bn-group>. {esboço: nenhum;}.Além de usar o elemento <butter>, você também pode usar outros elementos de tag, como a tag <a>. A única coisa a garantir é que, não importa qual tag seja usada, o elemento de tag no contêiner .btn-group precisa ter o nome da classe.btn
Os quatro cantos do grupo de botões são cantos arredondados, exceto os primeiros e os últimos botões que têm cantos arredondados nas bordas, os outros botões não têm cantos redondos.
Explicação detalhada:
1. Padrão: todos os botões são cantos arredondados
2. Exceto pelo primeiro botão e no último botão, os outros botões serão arredondados.
3. O último botão é deixado apenas como cantos arredondados e os cantos inferiores direito.
Código -fonte:
.btn-group> .btn: não (: primeiro filho): não (: Último filho): não (.Dropdown-toggle) {Radio de borda: 0;}. Btn-Group> .btn: Primeira Child {Margin-left: 0;}. 0; Border-Bottom-Right-Radius: 0;}. Btn-Group> .btn: Última filho: Not (: Primeira Criança), Btn-Grupo> .Dropdown-Toggle: Not (: primeiro filho) {Bord-top-left-group: 0; Border-Bottom-leftius: 0; .btn-group:not(:first-child):not(:last-child) > .btn {border-radius: 0;}.btn-group > .btn-group:first-child> .btn:last-child,.btn-group > .btn-group:first-child> .dropdown-toggle {border-top-right-radius: 0;border-bottom-right-radius: 0;}.btn-group > .btn-Group: Último filho> .btn: Primeiro filho {Border-top-left-radius: 0; borda-garganta-borda-left-radius: 0;}Barra de ferramentas do grupo de botões
Em um editor de texto rico, organize grupos de botões, como copiar, cortar, colar um grupo, alinhar à esquerda, centro, direita e duas extremidades e usar o botão de moldura de bootstrap btn-toolbar
<div> <div>… </div> <div>… </div> <div>… </div> <div>… </div> <div>… </div> </div>
Princípio: Deixe principalmente vários grupos do contêiner. Os elementos do grupo BBTn flutuam e mantenha uma distância externa esquerda de 5px entre os grupos.
.btn-toolbar {margem-left: -5px;}.Observe que limpe o flutuador no BTN-Toolbar
.Btn-Toolbar: Antes, .btn-toolbar: após {display: tabela; content: "";}. btn-toolbar: depois {clear: ambos;}Exemplo:
<div> <div> <button type = "button"> <pange> </span> </button> <button type = "button"> </span> </span> </button> <but uma button> <butão> </span> </button> button tipo = "Button> </span> </span> </span> </div> <div> <butt> <butt> tyblot ="> </span> </span> </span> </span> </div> <div> <butt> <butt>
Button Nesting Grouping
Muitas vezes, organizamos os grupos de botões do menu suspenso juntos para obter um efeito semelhante ao menu de navegação:
Ao usá-lo, basta alterar o nome da classe do recipiente suspenso que fez o menu suspenso antes para o grupo BTN e colocá-lo no mesmo nível do botão normal:
<div><button type="button">Home</button><button type="button">Product Display</button><button type="button">Case Analysis</button><button type="button">Contact Us</button><div><button data-toggle="dropdown" type="button">About us<span></span></button><ul><li><a href="#">Company Perfil </a> </li> <li> <a href = "#"> cultura corporativa </a> </li> <li> <a href = "#"> estrutura organizacional </a> </li> <li> <a href = "#"> atendimento ao cliente </a> </li> </ul> </div> .br; .btn-group: não (: primeiro filho): não (: Último filho)> .btn {radio de borda: 0;}. Btn-group> .btn-group: primeiro filho, .btn-group> .btn-group: brottom-right> .dropdown-toggle {border-right-rightius: 0; .btn-grupo: Último filho> .btn: Primeira criança {borda-top-left-radius: 0; borda-de-borda-left-radius: 0;}. 8px; preenchimento-esquerda: 8px;}. Btn-group> .btn-lg + .dropdown-toggle {padding-right: 12px; preenchimento-left: 12px;}. .125); Box-Shadow: Insert 0 3px 5px rgba (0, 0, 0, .125);}.Botões agrupados verticalmente
Basta substituir o nome da classe agrupado horizontalmente.
<div><button type="button">Home</button><button type="button">Product Display</button><button type="button">Case Analysis</button><button type="button">Contact Us</button><div><button data-toggle="dropdown" type="button">About us<span></span></button><ul><li><a href="#">Company Perfil </a> </li> <li> <a href = "#"> cultura corporativa </a> </li> <li> <a href = "#"> estrutura organizacional </a> </li> <li> <a href = "#"> atendimento ao cliente </a> </li> </ul> </. .btn-grupo, .btn-group-vertical> .btn-group, .btn-group-vertical> .btn-group-vertical> .btn-group-vertical> .btn {display: block; float: nenhum; largura: 100%; max-width: 100%;}. .btn, .btn-grupo-vertical> .btn + .btn-group, .btn-group-vertical> .btn-group + .btn, .btn-group-vertical> .btn-group + .btn-group {margin-top: -1px; margin-left: 0; (}. {Border-top-Right-Radius: 4px; Radio de borda-ritmo-direita: .btn {borda-garoto-left-Radius: 0;}. 4px;}. Btn-group-vertical> .btn-group: não (: primeiro filho): não (: Última filho)> .btn {Radius de borda: 0;}. Btn-group-vertical> .btn-group: First-Child: Not (: Last-Child)> .btn: last-child, .btn-group: .Dropdown-Toggle {Border-Bottom-Right-Right-Radius: 0; Border-Bottom-Left-Radius: 0;}. BTN-GROUP-VERTICAL> .BTN-GROUP: Última filho: Not (: First-Child)> .btn: First-Child {Border-top-left-Radius: 0; Border-Top-Right-Radius: 0;O botão de equalização também é chamado de botão de agrupamento adaptativo:
A largura de todo o grupo de botões é 100% do contêiner e cada botão no grupo de botões divide a largura de todo o contêiner. Por exemplo, existem cinco botões em um grupo de botões, cada botão tem 20% da largura do contêiner; Existem quatro botões em um grupo de botões, cada botão tem 25% da largura do contêiner;
Método de implementação: basta adicionar um nome de classe.
<div> <buttton type = "button"> home </tutton> <buttton type = "button"> Análise de caso </buttton> <buttton type = "button"> entre em contato com </buttton> </div> .btn-group-justified {display: tabela; width: 100%; tabela-layout: fixed; borda-rumied. .btn-group {display: tabela-célula; float: nenhum; largura: 1%;}.Simular .btn-group-justified em uma tabela (exibição: tabela) e simule o modelo de botão dentro de uma célula de tabela (exibição: tabela de células).
NOTA: Ao criar um grupo de botões iguais, tente usar a tag <a> para fazer botões, porque ao usar elementos da tag de botão, usando o display: a tabela não é amigável para suportar alguns navegadores.
Leituras recomendadas de wulin.com:
Explicação detalhada do botão Bootstrap
O acima é o componente do botão de bootstrap introduzido pelo editor. Espero que seja útil para você!