Ako vytvoriť miniaplikáciu karty profilu používateľa pomocou Bootstrapu?

Používateľské meno

O mne...

• Sledovatelia 120
• Sledované 80
• Príspevky 35

- Pridajte nadpis „

` pre meno používateľa a odsek `

` pre životopis používateľa alebo stručný popis.

- Vytvorte `

` s položkami zoznamu `
• ` na zobrazenie informácií o sledovateľoch, sledovaní a príspevkoch pomocou tried `.list-group` od Bootstrapu.

  2. Štýl CSS:

  Pridajte svoje vlastné štýly CSS, aby karta vyzerala vizuálne príťažlivo. Napríklad:

  ```css

  .user-profile-card {

  max-width:300px;

  okraj:auto;

  }

  .card-img-top {

  šírka:100 %;

  výška:200px;

  objekt-fit:kryt;

  }

  .card-body {

  výplň:15px;

  }

  .card-title {

  font-weight:bold;

  margin-bottom:10px;

  }

  .card-text {

  margin-bottom:20px;

  }

  .list-group-item {

  farba okraja:#ddd;

  }

  ```

  - Upravte veľkosť karty a obrázka podľa svojich požiadaviek.

  - Použite vhodnú typografiu a gramáž písma pre názov a text karty.

  - Upravte štýl položiek skupiny zoznamu a podľa potreby použite vlastné okraje.

  3. Funkcia JavaScript:

  Ak chcete pridať ďalšie funkcie, ako napríklad možnosť sledovať používateľa alebo zobraziť ďalšie podrobnosti, môžete použiť JavaScript. Napríklad pridanie tlačidla na sledovanie, ktoré sa zmení po kliknutí, môžete vykonať takto:

  ```javascript

  // Získanie prvku tlačidla sledovania

  const followButton =document.querySelector('.follow-button');

  // Pridanie poslucháča udalostí na kliknutie

  followButton.addEventListener('click', () => {

  // Po kliknutí prepne text a štýl tlačidla

  if (followButton.innerText ==='Sledovať') {

  followButton.innerText ='Nasleduje';

  followButton.classList.remove('btn-outline-primary');

  followButton.classList.add('btn-primary');

  } inak {

  followButton.innerText ='Nasledovať';

  followButton.classList.add('btn-outline-primary');

  followButton.classList.remove('btn-primary');

  }

  });

  ```

  – V prípade potreby zahrňte potrebnú knižnicu JavaScript (napr. jQuery).

  - Pridajte kód JavaScript na spracovanie interakcií používateľov.

  - Aktualizujte informácie o používateľovi alebo štýly pomocou JavaScriptu na základe akcií používateľa.

  Nezabudnite nahradiť obsah zástupného symbolu skutočnými používateľskými údajmi, ktoré získate z databázy alebo systému správy používateľských profilov.

  • Predchádzajúca strana: Ako vytvoriť miniaplikáciu Bootstrap Flip Card? 
  • Ďalšia strana: Ako vytvoriť paralaxnú stránku s plnou šírkou pomocou Bootstrapu?