TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak utworzyć widżet karty profilu użytkownika za pomocą Bootstrap?

2

Bootstrap ma potężniejsze komponenty niż poprzednia wersja 3. Niewątpliwie komponent karty jest jednym ze stylowych i przyjaznych dla urządzeń mobilnych. Zasadniczo możesz mieszać i dopasowywać karty, aby tworzyć różne rodzaje widżetów. W tym artykule omówimy, jak stworzyć widget karty profilu użytkownika Bootstrap. Używamy Bootstrap wersji 4 i można pobrać wszystkie pliki potrzebne do tego widget tutaj.

Jak to wygląda?

Poniżej znajduje się wygląd widżetu. Możesz dostosować kolory i wygląd zgodnie z potrzebami z domyślnymi właściwościami koloru tła.

Jak utworzyć widżet karty profilu użytkownika za pomocą Bootstrap?

Widget składa się z następujących części:

  • Imię i nazwisko, profil, umiejętności i szczegóły platformy
  • Zdjęcie profilowe
  • Trzy szczegóły profilu społecznościowego (możesz również wykorzystać do różnych celów)

Stwórzmy widżet

Poniżej znajduje się pełny kod widżetu.

<div class="container-fluid"> <div class="row"> <div class="col-12"> <div class="card card-inverse" style="background-color: #333; border-color: #333;"> <div class="card-block"> <div class="row"> <div class="col-md-8 col-sm-8"> <h2 class="card-title">Name: Stffanie Osterich</h2> <p class="card-text"><strong>Profile: </strong> Web Developer </p> <p class="card-text"><strong>Skills: </strong> Theme, plugin and website development </p> <p><strong>Platform: </strong> <span class="badge bg-primary">WordPress</span> <span class="badge bg-info">Weebly</span> <span class="badge bg-warning">Bootstrap</span> <span class="badge bg-success">Wix</span> </p> </div> <div class="col-md-4 col-sm-4 text-center"> <img class="btn-md" src="assets/images/card-image.png" alt="" style="border-radius:50%;"> </div> <div class="col-md-4 col-sm-4 text-center"> <h2><strong> 5.2K </strong></h2> <p><small>Fans</small></p> <button class="btn btn-primary btn-block btn-md"><span class="fa fa-facebook-square"></span> Like </button> </div> <div class="col-md-4 col-sm-4 text-center"> <h2><strong>1.4K</strong></h2> <p><small>Following</small></p> <button class="btn btn-success btn-block btn-md"><span class="fa fa-twitter-square"></span> Tweet </button> </div> <div class="col-md-4 col-sm-4 text-center"> <h2><strong>3.8K</strong></h2> <p><small>Followers</small></p> <button type="button" class="btn btn-danger btn-block btn-md"><span class="fa fa-google-plus-square"></span> Follow </button> </div> </div> </div> </div> </div> </div> </div>

Pierwsze trzy znaczniki div z „container-fluid", „row” i „col-12″ w idealnym przypadku nie są wymagane dla pojedynczego widżetu. Ale zapewniliśmy, że widżet może być wstawiony w dowolne miejsce pomiędzy układem Bootstrap z odpowiednim marginesy.

Główna część widżetu to w zasadzie element karty z podsekcjami. Użyliśmy domyślnej karty z „odwróconą kartą” i użyliśmy stylu wbudowanego do przypisywania kolorów tła i obramowania jako #333. Dalej znajduje się sekcja „card-block” z elementem „row” podzielonym na siatki, jak poniżej:

Jak utworzyć widżet karty profilu użytkownika za pomocą Bootstrap?

Zasadniczo istnieje 5 siatek, jedna z klasami „col-md-8 col-sm-8″, a pozostałe z klasami „col-md-4 col-sm-4″ do podziału obszaru. Górna sekcja ma siatki 8+4, a dolna sekcja społecznościowa ma siatki 4+4+4.

Zauważ, że w klasach siatki użyliśmy „md” i „sm” jako „col-md-8″ i „col-sm-8″. Spowoduje to utworzenie punktów przerwania na średnich i małych urządzeniach, które zapewnią responsywność.

Teraz podstawowy układ jest gotowy, a kolejnym krokiem jest dodanie treści i jej upiększenie.

Sekcja górna

  • W pierwszej sekcji col-8 możesz dodać „tytuł karty” i „tekst karty” jako nazwę i szczegóły profilu. Sekcja platformy używa domyślnego komponentu odznaki, aby wyróżnić tagi innym kolorem.
  • Druga sekcja col-4 zawiera zdjęcie profilowe o rozmiarze 128×128 pikseli.

Sekcja dolna

  • Dolna sekcja zawiera trzy sekcje „col-4″ zawierające linki do profili społecznościowych i opis.

Dodatkowe CSS

Powinieneś dołączyć link CDN do niesamowitych ikon czcionek, aby wyświetlić ikony na przyciskach. Dostosowaliśmy również element przycisku za pomocą dodatkowego CSS:

<style> .btn{ border-radius: 0; } .btn-md { border-width: 0; outline: none; border-radius: 0; box-shadow: 2px 2px 2px rgba(0, 0, 0, .6); cursor: pointer; } </style>

Ta sama klasa CSS jest używana z obrazem profilu, aby uzyskać efekt cienia, a styl wbudowany „border-radius: 50%” jest używany na obrazie profilu, aby zmienić go na kształt koła.

Wariacje

Możesz tworzyć różne style samochodów profilu użytkownika, mieszając i dopasowując kolory i układ siatki. Poniżej przedstawiamy niektóre z pokazanych możliwości, na przykład:

Karta profilu z lewym obrazkiem

Jak utworzyć widżet karty profilu użytkownika za pomocą Bootstrap?

Karta profilu użytkownika z białym tłem

Jak utworzyć widżet karty profilu użytkownika za pomocą Bootstrap?

Karta profilu z podstawowym tłem (możesz ustawić informacje, ostrzeżenia, niebezpieczeństwa lub kolory sukcesu)

Jak utworzyć widżet karty profilu użytkownika za pomocą Bootstrap?

Karta użytkownika z dwiema kolumnami

Jak utworzyć widżet karty profilu użytkownika za pomocą Bootstrap?

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów