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. Tabela
2. Botão
Nesta lição, aprendemos principalmente sobre a tabela de bootstrap e as funções de botão e exibimos vários efeitos ricos através da definição de CSS integrada.
um. folha
O Bootstrap fornece alguns estilos de tabela ricos para os desenvolvedores usarem.
1. Formato básico
// Implementar o estilo básico da tabela <tabela>
NOTA: Podemos ver o CSS correspondente através do Firebug.
2. Forma listrada
// Deixe as linhas em <Tbody> produzir uma linha após a outra e um efeito de fundo monocromático <TABLE>
Nota: O efeito da tabela precisa ser baseado no formato básico.table
3. Tabela com fronteiras
// Adicione uma borda à tabela <table>
4. Passe o mouse
// Deixe a tabela em <Tbody> Passe o mouse para obter efeito de fundo <table>
5. Classe de status
// O estilo de fundo de cada linha pode ser definido separadamente <tr>
Nota: Existem cinco estilos diferentes para escolher.
Descrição do estilo:
Mouse ativo pairando sobre linha ou célula
Sinais de sucesso de ação bem -sucedida ou positiva
Informações marcam informações rápidas normais ou ações
Aviso de aviso de aviso ou atenção do usuário é necessária
O perigo indica ações negativas perigosas ou potenciais
6. Esconda uma linha
// Ocultar linha <tr>
7. Tabela responsiva
// Há uma forma responsiva para o elemento pai da tabela, menos de 768px, e a borda aparece <body>
dois. Botão
O Bootstrap fornece muitos botões ricos para os desenvolvedores usarem.
1. Rótulos ou elementos que podem ser usados como botões
// Converta para o botão normal <a href = "###"> link </a> <butão> Button </button> <input type = "button" value = "input">
Há três coisas a observar:
(1). Coisas a serem observadas sobre componentes
Embora a classe de botão possa ser aplicada aos elementos <a> e <butto>, os componentes da barra de navegação e navegação suportam apenas os elementos <butter>.
(2). Coisas a serem observadas quando o link é usado como um botão
Se o elemento <a> for usado como um botão - e for usado para acionar certas funções na página atual - em vez de vincular outras páginas ou vincular outras partes da página atual, certifique -se de definir a propriedade "Button" para ela.
(3). Exibição de navegador cruzado
A melhor prática que resumimos é que é altamente recomendável usar o elemento <butto> sempre que possível para obter efeitos de desenho correspondentes em cada navegador.
Além disso, também descobrimos um bug no navegador no Firefox <30, o que mostra que ele nos impede de definir o atributo de altura da linha para botões criados com base no elemento <input>, o que faz com que o navegador Firefox não seja totalmente consistente com outros botões.
2. Estilos predefinidos
// Informações gerais <butão> Button </botão>
Descrição do estilo
Estilo padrão BTN-Default
Estilo BTN-Success
estilo de informação geral btn-info
Estilo de aviso de caução do BTN
BTN Danger Style Dangerous
Estilo de preferência do BTN-Primary
Estilo de link BTN-Link
3. Tamanho
// Tamanho de grande a pequeno <butto> Button </botão> <butto> Button </butut> <butão> Button </button> <butto> Button </butut>
4. Botão de nível de bloco
// bloqueio de bloqueio de linha <butão> Button </botão> <butto> Button </botão>
5. Status da ativação
// Botão de ativação <butão> Button </botão>
6. Desativar o status
// Botão de desativar <but uma botão> </botão>
O acima está a tabela de bootstrap e as funções de botão introduzidas pelo editor. Espero que seja útil para todos!