Componentes de layout de bootstrap
1 Ícone da fonte de bootstrap
(1) Link da lista de ícones da fonte
http://www.runoob.com/bootstrap/bootstrap-glyphicons.html
(2) Uso
Para usar ícones, basta usar o código a seguir. Por favor, mantenha o espaço apropriado entre o ícone e o texto. CSS do Glyphicon.
<span> </span>
(3) ícone de fonte personalizada
Vimos como usar os ícones da fonte e, em seguida, veremos como personalizar os ícones da fonte.
Começamos com o exemplo acima e personalizamos o ícone alterando o tamanho da fonte, a cor e aplicando sombras de texto.
A. ícones personalizados
<button type = "button"> <span> </span> Usuário </botão>
B. Tamanho da fonte personalizado
Ao aumentar ou diminuir o tamanho da fonte do ícone, você pode fazer com que o ícone pareça maior ou menor.
<button type = "button" style = "font-size: 60px"> <pan> </span> Usuário </butut>
C. Personalize a cor da fonte
<button type = "button" style = "cor: rgb (212, 106, 64);"> <span> </span> Usuário </butut>
D. Aplicar sombras de texto
<button type = "button" style = "text-shadow: preto 5px 3px 3px;"> <span> </span> Usuário </button>
2. Menu suspenso Bootstrap
(1) O menu suspenso é comutável e é um menu de contexto que exibe o link em um formato de lista. Isso pode ser alcançado através da interação com o menu suspenso (suspensão) JavaScript Plugin.
Para usar o menu a seguir, basta adicionar um menu suspenso na classe .Dropdown.
<div> <button type = "button" id = "suspensomenu1" data-toggle = "suspenso"> tópico <pange> </span> </button> <ul role = "menu" aria-labelledby = "suspenso/tanuNu1"> <li role = "apresentação"> <a "" menuitem "tabindex ="-1 "href" "> <li" "> <a role =" menitem "tabindex ="-1 "href =" Role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> mineração de dados </a> </li> <li role = "Apresentação"> <a role = "menuitem" Tabindex = "-1" HREF = "#"> Data Communication/Network </a> </li> <li> Role = Role = Role = "Role =" Role = ">"> "> Role ="> Role = "> Role ="> "> Role ="> "> Role ="> "> Role ="> "> ("> (//////////li <li> <li> Role = Role = Role = "Role ="> ">"> "> Role"> (//////////li <li> <li> Role = "Role =" Role) Role = "Menuitem" tabindex = "-1" href = "#"> links separados </a> </li> </ul> </div>(2) Alinhe
Alinhe o menu suspenso diretamente, adicionando classe .Pull-Right ao .Dropdown-Menu.
(3) Título
Você pode usar o cabeçalho suspenso de classe para adicionar um título à área de etiquetas do menu suspenso.
3. Grupo de botão de bootstrap
(1) O grupo de botões permite que vários botões sejam empilhados na mesma linha. Isso é muito útil quando você deseja alinhar os botões.
(2) ninho
Você pode aninhar outro grupo de botões dentro de um grupo de botões, ou seja, ninho em outro .btn-group dentro de um .btn-group. Isso é usado quando você usa o menu suspenso em combinação com uma série de botões.
4. Menu suspenso do botão de bootstrap
Use a classe Bootstrap para adicionar um menu suspenso ao botão. Para adicionar um menu suspenso a um botão, basta colocar o botão e o menu suspenso em um grupo .btn. Você também pode usar <span> </span> para indicar os botões como menus suspensos.
<div> <button type = "button" data-toggle = "suspenso"> padrão <span> </span> </button> <ul role = "menu"> <li> href = "#"> outros </a> </li> <li> </li> <li> <a href = "#"> link destacado </a> </li> </ul> </div>
(1) O menu suspenso do botão dividido
O menu suspenso Button Split usa aproximadamente o mesmo estilo do botão menu suspenso, mas adiciona funcionalidade original ao menu suspenso. No lado esquerdo do botão dividido está a função original e à direita está a alternância que exibe o menu suspenso.
<div> <button type = "button"> padrão </button> <button type = "button" data-toggle = "suspenso"> <pan> </span> <pan> alterne o menu suspenso </span> </button> <l role = "<li> <li> href = "#"> Outros </a> </li> <li> </li> <li> <a href = "#"> link desalido </a> </li> </ul> </div>
(2) Tamanho do menu suspenso do botão
Você pode usar o menu suspenso com botões de vários tamanhos: .btn-large, .btn-sm ou .btn-xs.
(3) Menu de pull-up para botões
O menu também pode ser esticado para cima, basta adicionar. Dropup ao contêiner .btn-Grupo.
<div> </div>
5. Grupo de caixa de entrada de bootstrap
Digite o grupo de caixas. O grupo de caixas de entrada se estende do controle do formulário. Com os grupos de caixas de entrada, você pode adicionar facilmente texto ou botões como prefixos e sufixos às caixas de entrada baseadas em texto.
Ao adicionar conteúdo de prefixo e sufixos ao campo de entrada, você pode adicionar elementos comuns à entrada do usuário. Por exemplo, você pode adicionar um sinal de dólar ou adicionar @ antes do nome de usuário do Twitter ou outros elementos públicos exigidos pela interface do aplicativo.
As etapas para adicionar um elemento prefixo ou sufixo ao .form-Control são as seguintes:
A. Coloque o prefixo ou elemento de sufixo em um <div> com classe .Input-group.
B. Então, dentro do mesmo <div>, coloque um conteúdo extra no <span> da classe .Input-group-addon.
C. Coloque o <rpa> na frente ou atrás do elemento <input>.
Para manter a compatibilidade do navegador cruzado, evite usar elementos <select>, pois eles não renderizam totalmente o efeito em um navegador do Webkit. Além disso, não aplique a classe de grupo de caixa de entrada diretamente no grupo de formulários, o grupo de caixas de entrada é um componente isolado.
<form role = "form"> <div> <pan> $ </span> <input type = "text" placeholder = "twitterhandle"> <pan> .00 </span> </div> </morm>
(1) Digite o tamanho do grupo de caixas
Você pode alterar o tamanho do grupo de caixas de entrada adicionando classes de tamanhos de forma relativos ao .Input-Group (como .Input-Group-LG, input-group-sm, entrada-group-xs) para .input-group. O conteúdo na caixa de entrada será redimensionado automaticamente.
(2), caixas de seleção e plug-ins de rádio
Você pode usar caixas de seleção e plug -ins de rádio como prefixos ou elementos de sufixo para grupos de caixas de entrada
<div> <pan> <input type = "Checkbox"> </span> <input type = "text"> </div>
(3) Plug-in de botão
Você também pode usar o botão como um elemento prefixo ou sufixo do grupo de caixas de entrada. Neste momento, você não está adicionando a classe .Input-Group-Addon. Você precisa usar classe .Input-Group-BTN para enrolar o botão. Isso é necessário porque o estilo do navegador padrão não será reescrito.
<div> <pan> <button type = "button"> vá! </button> </span> <input type = "text"> </div>
(4) Botão com menu suspenso
Adicionar um botão com um menu suspenso ao grupo de caixas de entrada está simplesmente envolvido em uma classe .Input-Group-BTN.
<div> <div> <button type = "button" data-toggle = "suspenso"> menu suspenso <span> </span> </butut> <ul> <li> href = "#"> outros </a> </li> <li> </li> <li> <a href = "#"> link destacado </a> </li> </div> <input type = "text"> </div>
(5) Botão menu suspenso dividido
Adicione um botão dividido com um menu suspenso no grupo de caixas de entrada, usando aproximadamente o mesmo estilo do botão menu suspenso, mas adicionando os principais recursos ao menu suspenso,
<div> <div> <button type="button" tabindex="-1"> drop-down menu</button> <button type="button" data-toggle="dropdown" tabindex="-1"> <span></span> <span>Switch the drop-down menu</span> </button> <ul> <li><a href="#">Function</a></li> <li><a href = "#"> outros </a> </li> <li> <a href = "#"> outros </a> </li> <li> </li> <li> <a href = "#"> link destacado </a> </li> </div> <input type = "text> </div>
6. Elementos de navegação de bootstrap
Use as mesmas tags e classe base .nav. O Bootstrap também fornece uma classe auxiliar para compartilhar tags e estados. Altere a classe modificada e pode ser alternada entre diferentes estilos.
(1), navegação de tabela ou tag
Crie um menu de navegação marcado:
A. Comece com uma lista não ordenada com a classe .nav.
B. Adicione a classe .nav-tabs.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> vb.net </a> href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li> </ul>
(2) menu de navegação no estilo cápsula
A. menu básico de navegação da cápsula
Se você precisar alterar o rótulo para o estilo da cápsula, só precisará usar a classe .nav-pills em vez de .nav-tabs, e as outras etapas são as mesmas que acima.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> vb.net </a> href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li> </ul>
B. Menu de navegação da cápsula vertical
Você pode usar a classe .nav empilhada ao usar a classe .nav e .nav-pills para fazer as cápsulas empilhadas verticalmente.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> vb.net </a> href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li> </ul>
(3) navegação com as duas extremidades alinhadas
Você pode tornar o menu de navegação com tags ou cápsula igualmente amplo ao elemento pai usando a classe .nav-justificada enquanto usava .nav, .nav-tabs ou .nav e .nav-pills, respectivamente, quando a largura da tela é superior a 768px. Em uma tela menor, os links de navegação são empilhados.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li></ul> <ul> <li> <a href = "#"> home </a> </li> </ul> <li> <a>
(4) Desativar o link
Para cada classe .nav, se uma classe. Disabled for adicionada, um link cinza será criado e o status: Passe o Status do link está desativado.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios (desabille link) </a> </li> </ul> <ul> <li> <ahref = "#b) href = "#"> svn </a> </li> <li> <a href = "#"> vb.net (desabilitar link) </a> </li> </ul>
(5) Menu puxar para baixo
O menu de navegação usa sintaxe semelhante ao menu suspenso. Por padrão, a âncora do item da lista funciona em conjunto com algumas propriedades de dados para acionar uma lista não ordenada com a classe .Dropdown-menu.
A. Tags com menu suspenso
As etapas para adicionar um menu suspenso a uma tag são as seguintes:
Comece com uma lista não ordenada com a classe .nav.
Adicione a classe .nav-tabs.
Adicione uma lista não ordenada com a classe .DropDown-Menu.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a data-toggle = "suspenso" <li> <li> <li> <a href = "#"> swing </a> </li> <li> <a href = "#"> swing </a> </li> <li> <a href = "#"> links separados </a> </li> </li> </li> <li> <a href = "#"> php </a>
B. cápsulas com menu puxador
As etapas são as mesmas que criar uma tag com um menu suspenso, exceto que você precisa alterar a classe .nav-tabs para .nav-pills.
7. Barra de navegação de bootstrap
A barra de navegação é um bom recurso e é um recurso proeminente do site de bootstrap. A barra de navegação serve como um componente básico responsivo do cabeçalho de navegação em seu aplicativo ou site. A barra de navegação é colapsada na visão do dispositivo móvel e a barra de navegação se expande horizontalmente à medida que a largura da viewport disponível aumenta. No núcleo da barra de navegação de bootstrap, a barra de navegação inclui o nome do site e os estilos básicos de definição de navegação.
(1) a barra de navegação padrão
As etapas para criar uma barra de navegação padrão são as seguintes:
A. Adicione a classe .navbar e .navbar-default à tag <VN>.
B. Adicionar função = "navegação" aos elementos acima ajudará a aumentar a acessibilidade.
C. Adicione uma classe de título .navbar-header ao elemento <div>, que contém o elemento <a> com a classe Nav-Brand. Isso fará com que o texto pareça maior.
D. Para adicionar links à barra de navegação, você só precisa simplesmente adicionar uma lista não ordenada com a classe .nav e .navbar-nav.
<nav role="navigation"> <div> <a href="#">W3Cschool</a> </div> <div> <ul> <li><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li> <a href="#">SVN</a></li> <li> <a href = "#" data-toggle = "suspenso"> java <b> </b> </a> <ul> <li> </li> <li> <a href = "#"> link separado </a> </li> <li> <li> </li> <li> <a <href = "#"> um link <li> </a>
(2) barra de navegação responsiva
Para adicionar recursos responsivos à barra de navegação, o conteúdo que você deseja entrar em colapso deve ser envolvido em um <div> com as classes .collapse, .navbar-colapso. A barra de navegação em colapso é na verdade um botão com a classe .navbar-toggle e dois elementos de dados. O primeiro é o Data-Toggle, que diz ao JavaScript o que fazer com o botão, e o segundo é o alvo de dados, que indica para qual elemento alternar. Três <span> com a classe. A icon-Bar cria o chamado botão de hambúrguer. Estes mudarão para elementos em .nav-colapso <div>. Para alcançar essas funções, você deve incluir o plug-in de colapso do bootstrap.
<nav role="navigation"> <div> <button type="button" data-toggle="collapse" data-target="#example-navbar-collapse"> <span>Switch navigation</span> <span></span> <span></span> <span></span> <span></span> </button> <a href="#">W3Cschool</a> </div> <div id = "Exemplo-navbar-colapso"> <ul> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#" data-toggle = "Dropdown"> java <b> </b> href = "#"> jmeter </a> </li> <li> </li> <li> <a href = "#"> link separado </a> </li> <li> </li> <li> <a href = "#"> outro link separado </a> </li> </li> </un> </div>
(3) formas na barra de navegação
O formulário na barra de navegação não usa a classe padrão mencionada no capítulo do formulário de bootstrap, ele usa a classe .navbar-form. Isso garante o alinhamento vertical adequado da forma e o comportamento de dobrar em uma visualização mais estreita. Use as opções de alinhamento (isso será explicado em detalhes na seção de alinhamento dos componentes) para decidir onde são colocados o conteúdo da barra de navegação.
<NAV RUPE = "Navigation"> <div> <a href = "#"> w3cschool </a> </div> <div> <form role = "pesquisa"> <div> <input type = "text" placeholder = "search"> </div>
(4) botões na barra de navegação
Você pode usar a classe .navbar-btn para adicionar um botão ao elemento <butto> que não está em <form>, que é centralizado verticalmente na barra de navegação. .navbar-btn pode ser usado nos elementos <a> e <input>. Não use .navbar-btn nos elementos <a>
<NAV RUPE = "Navigation"> <div> <a href = "#"> w3cschool </a> </div> <div> <formulário role = "search"> <div> <input type = "text" placeholder = "search"> </div> <butty typen typeng "> substert </////button> </typen> <butter <butter =" Botão ">
(5) texto na barra de navegação
Se você precisar incluir seqüências de texto em sua navegação, use a classe .navbar-text. Isso geralmente é usado com tags <p>, garantindo a liderança e a cor adequadas.
<NAV RUPE = "navegação"> <div> <a href = "#"> w3cschool </a> </div> <div> <p> Assinado como Thomas </p> </div> </NAV>
(6) Link para não navegação
Se você não deseja usar links padrão no componente regular da navegação de navegação, use a classe Navbar-link para adicionar cores apropriadas às opções de barra de navegação padrão e invertida.
<NAV RUPE = "Navigation"> <div> <a href = "#"> w3cschool </a> </div> <div> <p> assinado como <a href = "#"> thomas </a> </p> </div> </div>
(7) Alinhamento de componentes
Você pode usar a classe utilitária .navbar-left ou .navbar-right para alinhar os links de navegação, formulários, botões ou componentes de texto na barra de navegação à esquerda ou à direita. Ambas as classes adicionam flutuações CSS na direção especificada.
(8) fixo ao topo
A barra de navegação de bootstrap pode ser localizada dinamicamente. Por padrão, é um elemento de nível de bloco, que é posicionado com base no local colocado no HTML. Com algumas classes ajudantes, você pode colocá -lo na parte superior ou inferior da página, ou pode torná -lo uma barra de navegação estática que rola junto com a página. Se você deseja que a barra de navegação seja fixada na parte superior da página, adicione a classe .navbar fixed top à classe .navbar. O exemplo a seguir demonstra o seguinte: para impedir que a barra de navegação entrelaçando com o topo de outros conteúdos no corpo da página, adicione pelo menos 50 pixels de preenchimento à tag <body> e o valor do preenchimento pode ser definido de acordo com suas necessidades.
<NAV RUPE = "navegação">
</Arn>
(9) fixado no fundo
Se você deseja que a barra de navegação seja fixada na parte inferior da página, adicione a classe .navbar fixada no fundo à classe .navbar.
<NAV RUPE = "NAVEGUENT"> </AV>
(10), topo estático
Para criar uma barra de navegação que rola junto com a página, adicione a classe .navbar-static-top. Esta classe não exige que o preenchimento seja adicionado ao <body>.
<NAV RUPE = "navegação">
</Arn>
(11), barra de navegação invertida
Para criar uma barra de navegação invertida com texto em branco preto, basta adicionar.
Para impedir que a barra de navegação entrelaçando com o topo de outros conteúdos no corpo da página, adicione pelo menos 50 pixels de preenchimento à tag <body> e o valor do preenchimento pode ser definido de acordo com suas necessidades.
<NAV RUPE = "NAVEGUENT"> </AV>
8. Carteira de pão de bootstrap
A parra é um método de exibição baseado em informações no nível do site. Pegue um blog como exemplo, a navegação por pão pode exibir uma data de lançamento, categoria ou tag. Eles representam a localização da página atual na hierarquia de navegação.
A migra de pão no bootstrap é uma lista simples não ordenada com a classe .Breadcrumb. O delimitador será adicionado automaticamente através da classe mostrada abaixo no CSS (bootstrap.min.css):
<ol>
<li> <a href = "#"> home </a> </li>
<li> <a href = "#"> 2013 </a> </li>
<li> Novembro </li>
</ol>
9. Paginação de bootstrap
(1) A paginação é uma lista não ordenada. O Bootstrap lida com a paginação como outros elementos da interface.
(2) Página virada (pager)
Se você deseja criar um link de paginação simples para fornecer navegação para os usuários, isso pode ser feito girando a página. Como os links de paginação, a volta da página também é uma lista não ordenada. Por padrão, o link é centrado. A tabela a seguir lista a classe que o bootstrap lida com a volta da página.
10. Tags de bootstrap
Tag de bootstrap. As tags podem ser usadas para contar, solicitar ou outra exibição de marcação na página. Você pode usar o rótulo de classe modificado, o rótulo, o rótulo, o rótulo-sucesso, o rótulo-info, o rótulo e o danger de etiquetas para alterar a aparência do rótulo.
<span> tag padrão </span>
<span> Tags principais </span>
<span> Tag de sucesso </span>
<rpa> tag de informação </span>
<span> Tags de aviso </span>
<span> Tag de perigo </span>
11. Crachás de bootstrap
(1) O crachá é semelhante ao rótulo, a principal diferença é que os cantos do crachá são mais suaves.
Os crachás são usados principalmente para destacar itens novos ou não lidos. Para usar crachás, basta adicionar <span> aos links, navegação de bootstrap e outros elementos. Quando não houver itens novos ou não lidos, o crachá será dobrado no seletor vazio do CSS para indicar que não há conteúdo dentro.
<a href = "#"> Caixa de correio <pan> 50 </span> </a>
(2) Ative o status de navegação
Você pode colocar crachás na navegação da cápsula e listar a navegação no estado ativo. Ative o link usando <man>.
<H4> Status da ativação na navegação da cápsula </h4> <ul> <li> <a href = "#"> homepage <pan> 42 </span> </a> </li> <li> <a href = "#"> introdução </a> </li> <a> <a href = "#"> <nplen> <npan> </nan> </a> </li> <li> <a href = "" "> <nplen> <npan> <npan> </pange </a> </li> <a> <a> =" ""> <npan> <npan> </nan> </a> </a> </li> <a> <a> = "" "> <nplen> <npan> </sange> </a> </
12. Tela super grande de bootstrap (Jumbotron)
Tela super grande (Jumbotron). Como o nome indica, esse componente pode aumentar o tamanho do título e adicionar mais margens ao conteúdo da página de login. As etapas para usar um jumbotron são as seguintes:
A. Crie um contêiner <div> com classe .Jumbotron.
B. Além do maior <H1>, o peso da fonte da fonte é reduzido para 200px.
<div> <div> <h1> Bem -vindo ao login! </h1> <p> Esta é uma instância de um jumbotron. </p> <p> <a role = "Button"> Saiba mais </a> </p> </div> </div>
Para obter uma tela enorme que ocupa toda a largura sem cantos arredondados, use a classe .Jumbotron fora de todas as aulas.
13. Título da página de bootstrap (cabeçalho da página)
O cabeçalho da página é um bom recurso, que adiciona espaçamento apropriado ao redor do título da página. A função de título da página é particularmente útil quando existem vários títulos em uma página da web e um certo espaçamento precisa ser adicionado entre cada título. Para usar o cabeçalho da página, coloque seu título em um <div> com a classe. Página-cabeçalho:
<div> <h1> Exemplo de título da página <small> Legenda </mall> </h1> </div>
14. Miniatura de bootstrap
(1) Miniatura de Bootstrap. A maioria dos sites precisa fazer layout imagens, vídeos, texto etc. em uma grade. O Bootstrap fornece uma maneira fácil de fazer isso com miniaturas. As etapas para criar miniaturas usando o bootstrap são as seguintes:
A. Adicione uma tag <a> com a classe.
B. Isso adicionará quatro pixels e uma borda cinza.
C. Quando o mouse paira sobre a imagem, o contorno da imagem será exibido.
<div> <a href = "#"> <img src = "/wp-content/uploads/2014/06/kittens.jpg"> </a> </div>
(2) Adicione conteúdo personalizado
Agora que temos uma miniatura básica, podemos adicionar vários conteúdos HTML à miniatura, como títulos, parágrafos ou botões. As etapas específicas são as seguintes:
A. Altere a etiqueta <a> com a classe.
B. Neste <div>, você pode adicionar o que quiser adicionar. Como isso é um <div>, podemos usar as regras de nomeação baseadas em span padrão para redimensionar.
C. Se você deseja agrupar várias imagens, coloque -as em uma lista não ordenada e cada item da lista flutua à esquerda.
15. Aviso de bootstrap (alertas)
Alertas e a classe fornecida pela Bootstrap for Avisões. Os Alerts fornecem aos usuários uma maneira de definir estilos de mensagem. Eles fornecem feedback de informações contextuais para operações típicas do usuário. Você pode adicionar um botão de fechar opcional à caixa de aviso. Para criar uma caixa de aviso cancelável em linha, use o plug -in de alertas jQuery.
Você pode adicionar uma caixa de aviso básica criando um <div> e adicionando uma de uma classe .Art e quatro classes de contexto (isto é, .alert-success, .alert-info, .alert-warning, .alert Danger).
<div> Sucesso! A submissão foi feita muito bem. </div>
<div> Informações! Observe esta informação. </div>
<div> Aviso! Por favor, não envie. </div>
<div> Erro! Por favor, faça algumas alterações. </div>
(1) Aviso cancelável (alertas de demissão)
As etapas para criar um aviso cancelável (alerta de demissão) são as seguintes:
A. Adicione uma caixa de aviso básica criando um <div> e adicionando uma das classes .alert e quatro classes de contexto (isto é, .alert-success, .alert-info, .alert-warning, .alert Danger).
B. Ao mesmo tempo, adicione uma classe opcional.
C. Adicione um botão de fechar.
<div> <button type = "button" data-dismiss = "alert" aria-hidden = "true"> × </button> Sucesso! A submissão foi feita muito bem. </div>
(2) links em alertas
As etapas para criar um link em alertas são as seguintes:
A. Adicione uma caixa de aviso básica criando um <div> e adicionando uma das classes .alert e quatro classes de contexto (isto é, .alert-success, .alert-info, .alert-warning, .alert Danger).
B. Use a classe .Aert-Link Entity para fornecer rapidamente links com cores correspondentes.
<div>
<a href = "#"> sucesso! A submissão foi feita muito bem. </a>
</div>
16. Barra de progresso de bootstrap
Este capítulo explicará a barra de progresso do Bootstrap. Neste tutorial, você verá como usar o Bootstrap para criar barras de progresso para carregar, redirecionar ou estados de ação.
A barra de progresso do Bootstrap usa transições e animações CSS3 para obter esse efeito. Internet Explorer 9 e versões anteriores e versões mais antigas do Firefox não suportam esse recurso, e a Opera 12 não suporta animações.
(1) a barra de progresso padrão
As etapas para criar uma barra de progresso básica são as seguintes:
A. Adicione um <div> com classe .Progress.
B. Em seguida, adicione um <div> vazio com classe .Progress-bar no acima <div>.
C. Adicione um atributo de estilo com uma largura representada por porcentagem, como Style = "60%"; para indicar que a barra de progresso está em 60%.
<div> <div role = "ProgressBar" Aria-valuenow = "60" Aria-valuemin = "0" ARIA-valuemax = "100"> <pan> 40% completo </span> </div> </div>
(2) barra de progresso alternada
As etapas para criar barras de progresso de diferentes estilos são as seguintes:
A. Adicione um <div> com classe .Progress.
B. Em seguida, no acima <div>, adicione um <div> vazio com classe .Progress-bar e classe Progress-Bar-*. Entre eles, * pode ser sucesso, informações, aviso, perigo.
C. Adicione um atributo de estilo com uma largura representada por porcentagem, como Style = "60%"; para indicar que a barra de progresso está em 60%.
<div> <div role = "ProgressBar" Aria-valuenow = "60" Aria-valuemin = "0" ARIA-valuemax = "100"> <pan> 90% concluído (bem-sucedido) </span> </div> </div>
(3) a barra de progresso das listras
As etapas para criar uma barra de progresso de Streak são as seguintes:
A. Adicione um <div> com classe .Progress e .Progress-Striped.
B. Em seguida, no acima <div>, adicione um <div> vazio com classe .Progress-bar e classe Progress-Bar-*. Entre eles, * pode ser sucesso, informações, aviso, perigo.
C. Adicione um atributo de estilo com uma largura representada por porcentagem, como Style = "60%"; para indicar que a barra de progresso está em 60%.
<div> <div role = "ProgressBar" Aria-valuenow = "60" Aria-valuemin = "0" ARIA-valuemax = "100"> <pan> 90% concluído (bem-sucedido) </span> </div> </div>
(4) a barra de progresso da animação
As etapas para criar uma barra de progresso da animação são as seguintes:
A. Adicione um <div> com classe .Progress e .Progress-Striped. Adicione também classe .Active.
B. Em seguida, adicione um <div> vazio com classe .Progress-bar no acima <div>.
C. Adicione um atributo de estilo com uma largura representada por porcentagem, como Style = "60%"; para indicar que a barra de progresso está em 60%.
Isso dará às listras uma sensação de movimento da direita para a esquerda.
<div> <div role = "ProgressBar" Aria-valuenow = "60" Aria-valuemin = "0" ARIA-valuemax = "100"> <pan> 40% completo </span> </div> </div>
(5) barra de progresso empilhada
Você pode até empilhar várias barras de progresso. Você pode empilhar várias barras de progresso no mesmo .Progress.
17. Bootstrap Multimedia Object (objeto de mídia)
Objeto multimídia no bootstrap (objeto de mídia). Esses estilos de objetos abstratos são usados para criar vários tipos de componentes (como comentários do blog). Podemos usar a mistura gráfica e de texto nos componentes, e as imagens podem ser esquerda ou direita alinhada. Os objetos de mídia podem usar menos código para atingir o arranjo misto de objetos de mídia e texto.
A marcação leve e as propriedades fáceis de escalar os objetos de mídia são alcançadas aplicando a classe a tags simples. Você pode adicionar os dois formulários a seguir à tag HTML para configurar o objeto de mídia:
A. Mídia: Esta classe permite que a multimídia (imagem, vídeo, áudio) no objeto de mídia flutue à esquerda ou à direita do bloco de conteúdo.
B. Lista de mídia: se você precisar de uma lista, cada item fará parte de uma lista não ordenada, você pode usar esta classe. Pode ser usado para listas de comentários e listas de artigos.
<div> <a href = "#"> <img src = "/wp-content/uploads/2014/06/64.jpg"> </a> <div> <h4> título </h4> Aqui estão algum texto de amostra. Aqui estão algum texto de amostra. </div> </div>
18. Grupo de lista de bootstrap
Os componentes da lista são usados para renderizar conteúdo complexo e personalizado no formulário de lista. As etapas para criar um grupo de listas básicas são as seguintes:
A. Adicione a classe .List-Group ao elemento <ul>.
B. Adicione a classe .List-Group-Item a <li>.
<ul> <li> Registro de nome de domínio gratuito </li> <li> Hospedagem de espaço de janela gratuita </li> </ul>
(1) Adicione o crachá ao grupo de lista
Podemos adicionar um componente de crachá a qualquer item da lista, que será posicionado automaticamente à direita. Basta adicionar <span> ao elemento <li>.
<ul> <li> Registro de nome de domínio gratuito
(2) Adicione o link ao grupo de lista
Usando tags de âncora em vez de itens de lista, podemos adicionar links para grupos de listagem. Precisamos usar <div> em vez do elemento <ul>.
<a href = "#"> 24*7 suporte </a>
<a href = "#"> hospedagem de espaço de janela livre </a>
(3) Adicione conteúdo personalizado ao grupo de lista
Podemos adicionar qualquer conteúdo HTML ao grupo de listas que foi adicionado ao link acima.
19. Painéis de bootstrap (painéis)
Painéis de bootstrap (painéis). O conjunto do painel é usado para inserir o conjunto DOM em uma caixa. Para criar um painel básico, basta adicionar classe .Panel e classe .Panel-default ao elemento <div>,
<div> <div> Este é um painel básico </div> </div>
(1) Título do painel
Podemos adicionar títulos de painel de duas maneiras:
A. O uso da classe de cabeçalho .Panel pode facilmente adicionar um contêiner de título ao painel.
B. Use <H1>-<H6> com a classe .Panel-Title para adicionar o título do estilo predefinido.
<div> <div> Título da plataforma sem título </div> <div> conteúdo da plataforma </div> </div>
(2) notas de rodapé do painel
Podemos adicionar notas de rodapé ao painel, basta colocar o botão ou o subtexto no <div> com a classe .Panel-Footer.
<div> <div> Este é um painel básico </div> <div> Nota de rodapé </div> </div>
(3) Painel com cor contextual
Use as classes estaduais de contexto, o sucesso do painel, o sucesso do painel, o painel-Info, o papel de painel e o painel para configurar um painel com cores contextuais.
<div> <div> <h3> título da plataforma </h3> </div> <div> Este é um painel básico </div> </div>
(4) Painel com tabela
Para criar uma tabela sem fronteiras no painel, podemos usar a classe. Table no painel. Supondo que haja um <div> contendo o corpo .Panel, podemos adicionar bordas adicionais à parte superior da tabela para separá-la. Se não houver <div> contendo .Panel-corpo, o componente se move da cabeça do painel para a tabela sem interrupção.
<div> <div> <h3> título da plataforma </h3> </div> <div> Este é um painel básico </div> <table> <th> produto </th> <h> preço </th> <tr> <td> produto </td> <td> 200 </td> </td> <td> </td> <t 4
(5) Painel com grupo de lista
Podemos incluir grupos de listas em qualquer painel, criar painéis adicionando classes .Panel e .Panel-Default no elemento <div> e adicionar grupos de lista no painel.
<div> <div> Título da plataforma </div> <div> <p> Este é um conteúdo básico do painel. </p> </div> <ul> <li> Registro de nome de domínio gratuito </li> <li> Custo de atualização anual </li> </ul> </div>
20. Bootstrap bem
Bem, é um recipiente que causa um efeito de dente ou ilustração ao conteúdo <div>. Para criar um poço, basta colocar o conteúdo em um <div> com uma classe. Bem.
<div> Olá, estou bem! </div>
(1) Tamanho
Você pode usar as classes opcionais bem-LG ou bem-SM para alterar o tamanho do poço. Essas duas classes são usadas em conjunto com a classe .well. Essas duas classes afetam o preenchimento e, dependendo da classe usada, bem parecerá maior ou menor.
<div> Olá, estou no Big Well! </div>
<div> Olá, estou bem bem! </div>
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.