Виджет карточки профиля пользователя Bootstrap 4 »WebNots

Bootstrap 4 имеет более мощные компоненты, чем предыдущая версия 3. Несомненно, карточный компонент является одним из самых стильных и удобных для мобильных устройств среди других. В основном вы можете смешивать и сопоставлять карты для создания различных типов виджетов. В этой статье давайте обсудим, как создать виджет карточки профиля пользователя 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-4-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 4 с соответствующими полями.

Основная часть виджета — это компонент карточки с подразделами. Мы использовали карту по умолчанию с «обратной картой» и использовали встроенный стиль для назначения цветов фона и границ как # 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%» используется для изображения профиля, чтобы изменить его на форму круга.

Предложение: Получите 92% скидку на конструктор сайтов Mobirise Bootstrap.

Вариации

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