O Bootstrap, do Twitter, é a estrutura de front-end mais popular no momento. O Bootstrap é baseado em HTML, CSS e JavaScript. É simples e flexível, tornando o desenvolvimento da Web mais rápido.
Pontos -chave para o aprendizado:
1. Componente pequeno do ícone
2. Componente do menu suspenso
3. Componente do grupo de botões
4. Menu suspenso no estilo de botão
Nesta lição, aprenderemos principalmente sobre as três funções de componentes do bootstrap: componente de ícone pequeno, componente de menu suspenso e vários componentes de botão.
um. Componente pequeno do ícone
O Bootstrap fornece 263 ícones pequenos gratuitos (contados duas vezes). Para detalhes, consulte o link do componente do site oficial chinês:
http://v3.bootcss.com/components/#glyphicons.
Alguns ícones são os seguintes:
Você pode usar as tags <i> ou <span> para usar, da seguinte forma:
// Use o ícone pequeno <i> </i> <pange> </span> // Você também pode combinar botões com <butter> <span> </span> </button> <butter> <butter> </span> </span> </button> <butter> <butter> </span> </butão>
dois. Componente do menu suspenso
O menu suspenso é clicar em um elemento ou botão para acionar a lista oculta a ser exibida.
// formato básico <div> <botão data-toggle = "suspenso"> menu suspenso <pan> </span> </button> <ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> informação </a> </li> <li> <a> <a href = "#"> informações </a> </li> <li> </a> </li> </ul> </div>
Os botões e os menus precisam ser embrulhados em um contêiner .Dropdown e, como é necessário que o botão de elemento clicado, toggle = "suspensão" seja definido para ser efetivo. Para a seção de menu, as configurações podem ocultar e adicionar estilos fixos automaticamente. Defina a seta para ficar para cima ou para baixo.
// Configurado para desencadear itens <div> // O menu está alinhado à direita, o valor padrão é suspenso Menu-Left <ul> // Defina o título do menu, não adicione hiperlinks <li> Navegação </li> // define a linha dividida do menu <li> </li>/// definir <li> // Defina o menu para exibir <div> por padrão
três. Componente do grupo de botões
Um grupo de botões é o efeito exclusivo da integração de vários botões em um contêiner.
// formato básico <div> <button type = "button"> esquerda </button> <button type = "button"> middle </button> <button type = "button"> direito </button> </div> // integram vários botões para facilitar o gerenciamento <div> <div> <butter type = "Button"> esquerda </button <butão <butter) <butão <butão <butão> <butão> type = "Button"> </button> <but uma botão, "Button> </button> <butter> <button type =" button "> </button> <butão> <butter type = button"> </button> <butão> <butter = "Button> <//> </div> <//butão> </button> <butt> <butão> Tipo" Button "> </> </div> <//butão> btn-group-sm"><div> //Nest a group, such as drop-down menu <div><button type="button">left</button><button type="button">middle</button><button type="button">right</button><div><buttondata-toggle="dropdown">drop-down menu <span></span></button><ul><li><a href = "#"> home </a> </li> <li> <a href = "#"> informações </a> </li> <li> <a href = "#"> produto </a> </li> <li> <a href = "#"> sobre </a> </li> </li>
Nota: Isso não é implementado em <div>. Através da análise do código -fonte, você sabe que o próprio ninho tem posicionamento, para que você não precise configurá -lo. E basta adicionar mais um canto arredondado à direita.
//Set the button group vertically arranged <div> //Set the button group aligned at both ends, use the <a> tag <div><a type="button">left</a><a type="button">middle</a><a type="button">right</a></div> //If you need to use the <button> tag, you need to group each button <div><div><button type = "Button"> Left </botão> </div> <div> <botão, tipo = "Button"> Right </botão> </div>
Quatro. Menu suspenso no estilo de botão
Esse menu suspenso é realmente o mesmo que o segundo ponto de conhecimento, exceto que isso está no grupo e não há necessidade de declarar classe = "suspenso".
Menu suspenso do botão do grupo <div> <button type = "button" data-toggle = "menu suspenso"> menu suspenso <span> </span> </button> <ul> <li> <a href = "#"> home </a> <li> <li> href = "#"> sobre </a> </li> </ul> </div> // menu suspenso Button Split <div> <botão type = "button"> menu suspenso </button> <button type = "button" data-toggle = "suspenso"> <span> </span> <ul> <ul> <li> <a liber = "> <span> </span> <ul> <ul> <li> <ahref ="# href = "#"> informações </a> </li> <li> <a href = "#"> produto </a> </li> <li> <a href = "#"> sobre </a> </li> </ul> </div> // pop-up <div>
O conteúdo acima é o componente do ícone do botão de menu do componente de bootstrap introduzido pelo editor. Espero que seja útil para todos!