A criação de um widget de cartão de perfil de usuário com Bootstrap envolve a combinação de HTML, CSS e JavaScript para exibir informações relevantes do usuário em um cartão estruturado e visualmente atraente. Veja como você pode criar um widget simples de cartão de perfil de usuário usando Bootstrap:
1. Estrutura HTML:
Comece criando a estrutura HTML básica para o cartão de perfil do usuário. Aqui está um exemplo:
```html
Nome de usuário
Sobre mim...
- Seguidores 120
- Seguindo 80
- Postagens 35
```
- Use um elemento `
` com a classe `card user-profile-card` para conter o cartão inteiro.
- Dentro do cartão, inclua um ` Elemento
![]()
` para a foto do perfil com classes apropriadas e atributo `alt`.
- Use `
` para armazenar o conteúdo do cartão, como nome do usuário, descrição e outros detalhes.
- Adicione um título `
` para o nome do usuário e um parágrafo `
` para a biografia do usuário ou breve descrição.
- Crie um `` com itens de lista ` - ` para exibir informações sobre seguidores, seguidores e postagens usando as classes `.list-group` do Bootstrap.
2. Estilo CSS:
Adicione seus estilos CSS personalizados para tornar o cartão visualmente atraente. Por exemplo:
```css
.cartão de perfil de usuário {
largura máxima:300px;
margem:automático;
}
.cartão-img-top {
largura:100%;
altura:200px;
ajuste ao objeto:capa;
}
.cartão-corpo {
preenchimento:15px;
}
.título do cartão {
peso da fonte:negrito;
margem inferior:10px;
}
.cartão-texto {
margem inferior:20px;
}
.list-grupo-item {
cor da borda:#ddd;
}
```
- Ajuste o tamanho do cartão e da imagem conforme sua necessidade.
- Use tipografia e pesos de fonte adequados para o título e texto do cartão.
- Estilize os itens do grupo de listas e aplique bordas personalizadas conforme necessário.
3. Funcionalidade JavaScript:
Se quiser adicionar funcionalidades extras, como a capacidade de seguir o usuário ou ver mais detalhes, você pode usar JavaScript. Por exemplo, adicionar um botão seguir que muda ao clicar pode ser feito assim:
```javascript
// Obtém o elemento do botão seguir
const followButton =document.querySelector('.follow-button');
//Adiciona ouvinte de evento para clique
followButton.addEventListener('clique', () => {
// Alterna o texto e o estilo do botão ao clicar
if (followButton.innerText ==='Seguir') {
followButton.innerText ='Seguindo';
followButton.classList.remove('btn-outline-primary');
followButton.classList.add('btn-primary');
} outro {
followButton.innerText ='Seguir';
followButton.classList.add('btn-outline-primary');
followButton.classList.remove('btn-primary');
}
});
```
- Inclua a biblioteca JavaScript necessária (por exemplo, jQuery), se necessário.
- Adicione código JavaScript para lidar com as interações do usuário.
- Atualize as informações ou estilos do usuário usando JavaScript com base nas ações do usuário.
Lembre-se de substituir o conteúdo do espaço reservado pelos dados reais do usuário recuperados do seu banco de dados ou sistema de gerenciamento de perfil de usuário.
