TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як створити віджет картки профілю користувача за допомогою Bootstrap?

11

Bootstrap має більш потужні компоненти, ніж попередня версія 3. Безсумнівно, компонент картки є одним із стильних та зручних для мобільних пристроїв серед інших. В основному, ви можете змішувати та поєднувати картки, щоб створювати різні типи віджетів. У цій статті давайте обговоримо, як створити віджет картки профілю користувача Bootstrap. Ми використовуємо Bootstrap версії 4 і ви можете завантажити всі файли, необхідні для цього віджета тут.

Як це виглядає?

Нижче показано, як буде виглядати віджет, і ви можете налаштувати кольори та виглядати відповідно до ваших потреб за допомогою властивостей кольору фону за замовчуванням.

Як створити віджет картки профілю користувача за допомогою Bootstrap?

Віджет має такі частини:

  • Ім’я, профіль, навички та деталі платформи
  • Зображення профілю
  • Три деталі соціального профілю (ви також можете використовувати їх для різних цілей)

Давайте створимо віджет

Нижче наведено повний код віджета.

<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>

Перші три теги div з "контейнер-рідина", "рядок" та "col-12" в ідеалі не потрібні для одного віджета. Але ми використовували для того, щоб віджет можна було вставити будь-де між макетом Bootstrap з відповідними поля.

Основна частина віджету-це в основному компонент картки з підрозділами. Ми використовували картку за замовчуванням із "інверсною карткою" і використовуємо вбудований стиль для призначення кольорів фону та рамки як #333. Далі-розділ "блок-картка" з елементом "рядок", розділеним на сітки, як показано нижче:

Як створити віджет картки профілю користувача за допомогою Bootstrap?

В основному існує 5 сіток, одна з яких має "col-md-8 col-sm-8", а решта з класами "col-md-4 col-sm-4" для поділу площі. Верхній розділ має 8+4 сітки, а нижній соціальний розділ має 4+4+4 сітки.

Зауважте, ми використовували “md" та “sm” у класах сітки як “col-md-8” та “col-sm-8”. Це створить контрольні точки на середніх і малих пристроях для реагування.

Тепер основний макет готовий, і наступний крок – додати вміст та прикрасити його.

Верхній розділ

  • У першому розділі col-8 ви можете додати "назва картки" та "текст картки" як ім’я та дані профілю. У розділі платформи використовується компонент значка за замовчуванням для виділення тегів різним кольором.
  • Другий розділ col-4 містить зображення профілю розміром 128 × 128 пікселів.

Нижній розділ

  • Нижній розділ має три розділи “col-4”, які мають посилання та опис соціальних профілів.

Додатковий CSS

Ви повинні включити посилання CDN для чудових значків шрифтів, щоб відображати піктограми на кнопках. Також ми налаштували елемент кнопки за допомогою додаткового 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>

Той самий клас CSS використовується з зображенням профілю для створення тіньового ефекту, а вбудований стиль “border-radius: 50%” використовується на зображенні профілю, щоб змінити його на форму кола.

Варіації

Ви можете створювати різні стилі автомобілів профілю користувача, змішуючи та узгоджуючи кольори та макет сітки. Нижче наведено, наприклад, деякі з можливостей:

Картка профілю з зображенням ліворуч

Як створити віджет картки профілю користувача за допомогою Bootstrap?

Картка профілю користувача з білим тлом

Як створити віджет картки профілю користувача за допомогою Bootstrap?

Картка профілю з основним фоном (Ви можете встановити кольори інформації, попередження, небезпеки або успіху)

Як створити віджет картки профілю користувача за допомогою Bootstrap?

Картка користувача з двома колонками

Як створити віджет картки профілю користувача за допомогою Bootstrap?

Джерело запису: www.webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі