Как создать виджет карточки профиля пользователя с помощью Bootstrap?

Bootstrap имеет более мощные компоненты, чем предыдущая версия 3. Несомненно, карточный компонент является одним из самых стильных и удобных для мобильных устройств. В основном вы можете смешивать и сопоставлять карточки для создания различных типов виджетов. В этой статье давайте обсудим, как создать виджет карточки профиля пользователя Bootstrap. Мы используем Bootstrap версии 4, и вы можете скачать все файлы, необходимые для этого виджета. здесь.

Как это выглядит?

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

Карточка профиля пользователя Bootstrap 4

Виджет состоит из следующих частей:

  • Имя, профиль, навыки и сведения о платформе
  • Изображение профиля
  • Три детали социального профиля (вы также можете использовать для разных целей)

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

Ниже приведен полный код виджета.

<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="https://www.webnots.com/bootstrap-user-profile-card-widget/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 с «container-fluid», «row» и «col-12» в идеале не требуются для одного виджета. Но мы использовали для того, чтобы виджет можно было вставить в любом месте между макетом Bootstrap с соответствующими полями.

Основная часть виджета — это компонент карточки с подразделами. Мы использовали карту по умолчанию с «обратной картой» и использовали встроенный стиль для назначения цветов фона и границ как # 333. Далее идет раздел «карточка-блок» с элементом «строка», разделенным на сетки, как показано ниже:

Структура сетки карты пользователя

В основном есть 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 на значки font awesome, чтобы значки отображались на кнопках. Также мы настроили элемент кнопки с помощью дополнительного 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%» используется для изображения профиля, чтобы изменить его на форму круга.

Вариации

Вы можете создавать разные стили автомобилей профиля пользователя, смешивая и сопоставляя цвета и макет сетки. Ниже приведены некоторые из показанных, например, возможностей:

Карточка профиля с изображением слева

Карточка пользователя с изображением левого профиля

Карточка профиля пользователя с белым фоном

Карточка пользователя с белым фоном

Карточка профиля с основным фоном (вы можете установить цвета информации, предупреждения, опасности или успеха)

Карточка пользователя с основным фоном

Карточка пользователя с двумя столбцами

Карточка пользователя в две колонки

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.