Interfaces de usuário de bootstrap

As interfaces de usuário são uma das partes mais importantes dos aplicativos, pois é a forma como os usuários irão interagir com nossas criações, mas, além disso, uma boa interface torna a experiência com nosso aplicativo positiva. Por outro lado, uma interface duvidosa significa que um bom aplicativo não pode mais ser usado.
Bootstrap Não nos dá interfaces construídas, é algo que devemos projetar nós mesmos, no entanto, nos dá os componentes para sermos capazes de construí-los e embora a maioria de seus componentes sejam destinados ao design de aplicativos da web, na verdade ele tem outros componentes para melhorar a experiência do nome de usuário.
Esses componentes são baseados em JavaScript Y jQuery, então vamos exigir que esta última biblioteca seja capaz de fazer uso desses elementos que mencionamos, porém assim que vermos alguns dos resultados vamos justificar essa inclusão.
Como indicamos na introdução, é necessário usar jQuery Para usar esses componentes, é por isso que a primeira coisa que vamos definir é como nosso rótulo deve ser cabeça de todos os exemplos que veremos. Vamos ver o código dele:

Em primeiro lugar, incluímos o bootstrap.css em sua versão reduzida e, em seguida, o theme.css, até agora tudo tem sido o normal, mas então devemos incluir jQuery e devemos também incluir bootstrap.js que é a maneira pela qual este framework vai nos dar a oportunidade de incorporar os componentes para nossas interfaces.
Essas inclusões podem ser feitas como vemos no código de uma pasta em nossa máquina onde armazenamos o projeto, ou também podemos usar um CDN, como vemos no seguinte trecho de código:

Qualquer uma das opções que utilizamos está bem, o importante é respeitar a ordem em que incluímos as bibliotecas, caso contrário nossos componentes não funcionarão da maneira que desejamos.
Uma boa interface deve sempre ajudar o usuário, deve sempre mostrar o caminho a seguir e para que funcionam seus diferentes componentes, desta forma é intuitiva e evita suposições por parte do usuário ao tentar botões e menus para encontrar algo. .
Dica de ferramentaUma ferramenta que nos permite evitar isso é o Dica de ferramenta, que nada mais são do que pequenas caixas pop-up que nos ajudam a explicar seções de nosso aplicativo, também são conhecidas como caixas de ajuda, a ideia é que nessas pequenas caixas adicionemos pequenas frases que dão sentido à ação que podemos realizar em nossa interface.
Vamos ver um pequeno código onde demonstramos como construir uma dica de ferramenta com a ajuda de Bootstrap:

 Exemplo de dica de ferramenta para salvar

Em nosso código, incluímos as bibliotecas mencionadas e, em seguida, no rótulo roteiro nós usamos o evento document.ready para criar nosso dica de ferramenta que vai se aplicar a tudo o que a classe tem tool1, este nome de classe pode ser personalizado por quem quisermos, e adicionalmente adicionamos como opção que ela tenha um layout à direita, ou seja, nossa ajuda será exibida à direita. Em seguida, criamos um estilo geral para o corpo de forma que nosso conteúdo seja mais visível na tela para fins de demonstração.
Finalmente dentro do corpo nós criamos um elemento botão, tem um atributo chamado data-toggle e indicamos que será um dica de ferramenta onde no atributo título colocamos o texto que nossa caixa de ajuda deve mostrar e, claro, no atributo aula devemos incluir tool1 qual foi a classe que definimos no início. Uma vez que tudo está no lugar, ao passar o mouse sobre nosso botão, podemos visualizar a dica de ferramenta criada, que quando executada em nosso navegador deve ter a seguinte aparência:

Como podemos ver, este componente é bastante útil, pois nos dá a oportunidade de explicar ao usuário através das caixas de ajuda como funcionam ou para que servem alguns elementos em nossa interface.
Há outro componente muito importante para a interface do usuário e é o acordeão, O objetivo deste elemento é poder salvar o texto sob um componente de nossa aplicação, com isso obtemos uma primeira impressão tanto da ordem quanto da limpeza de nossa interface, onde o usuário ao clicar nele, o conteúdo é mostrado.
Isso é importante porque outra qualidade que uma boa interface de usuário precisa é a limpeza, uma vez que uma interface limpa significa que o usuário não se sentirá atordoado e, portanto, será mais agradável de usá-la.
A constituição do acordeão é simples, neste caso não necessitamos construir um guião propriamente dito, apenas temos que fazer uma estrutura de divs que nos permitem indicar que são do tipo painel, o título do nosso acordeão será um div do tipo título do painel e nosso conteúdo será outro div do tipo painel-conteúdo, que devemos repetir para a quantidade de elementos que queremos mostrar.
Vejamos no exemplo a seguir onde criamos um acordeão de dois elementos:

 Exemplo acordeão
Primeiro elemento
Este é o primeiro elemento do nosso acordeão
Segundo elemento
Este é o conteúdo do nosso segundo elemento do acordeão

O mais importante para fazer o acordeão funcionar depois da estrutura são os identificadores, se olharmos para o título do acordeão temos uma âncora e isso é direcionado no exemplo para item 1 Y element2 onde cada uma dessas âncoras corresponde ao identificador do conteúdo, então vemos como o bloco de conteúdo de cada uma tem como ir essas duas palavras, o que significa que quando clicamos nos títulos o conteúdo é exibido. Vamos ver como fica em nosso navegador quando executamos nosso exemplo:

PROLONGAR

Como podemos ver, o elemento1 mostra seu conteúdo sem problemas enquanto o elemento2 não mostra nenhuma informação, se clicarmos nele podemos ver como o conteúdo do elemento1 está oculto e o conteúdo do elemento2 é exibido:

PROLONGAR

Finalmente, outro dos grandes componentes para interfaces de usuário são os fotos modaisSão elementos que são invocados ao clicar em um botão ou âncora e sua funcionalidade é para nos mostrar uma espécie de janela pop-up.
Esta janela é muito útil porque nos permite mostrar um texto que, devido ao seu comprimento, não é prático em um dica de ferramenta, ou talvez precisemos que o usuário preencha algumas informações e não queremos enviá-las para outra página. Esse tipo de componente nos ajuda a manter a limpeza de nossa aplicação, mas também nos ajuda a forçar o usuário a prestar atenção em algo que pode ser muito importante.
Claro, regras de bom senso devem ser aplicadas aqui, pois embora seja possível um modal levantar outro modal, isso é de mau gosto e prejudica a navegação do usuário, também se precisarmos incorporar mais de quatro campos em um formulário é melhor para fazê-lo em uma nova página e não em um modal para citar alguns exemplos. Vamos ver no código a seguir como podemos criar um modal:

 Gráficos Modais×
Depois de passar para a próxima fase, todas as suas ações serão finais.

Eu não posso desfazer suas respostas
Sair Continuar

Neste caso, o modal é configurado no document.ready para ser exibido diretamente, esse tipo de implementação é amplamente usado para dar avisos antes que o usuário continue. Então, nosso modal é composto de três partes; Parte de cima (cabeçalho), corpo (corpo) e rodapé (rodapé).
Normalmente no cabeçalho Existe um título com um tamanho que se destaca para indicar o motivo do modal, no corpo a explicação ou conteúdo, como um formulário ou mensagem, e no rodapé botões de ação como continuar ou fechar. Então, vamos ver a aparência de nossa janela modal quando a executamos no navegador:

Este componente é bastante simples de implementar e dá ao nosso aplicativo um estilo profissional, porém é importante que saibamos usar nossa lógica para colocá-lo em um local que não interrompa a harmonia do aplicativo.
Com isso concluímos este tutorial, onde efetivamente desenvolvemos três grandes componentes que nos ajudam a criar interfaces de usuário para conseguir uma melhor organização e compreensão das ações em nossa aplicação, melhorando assim a experiência de navegação e uso da mesma.