Редизайн компонентов Bootstrap CSS

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

Но у этих примеров есть недостатки. Недостатки дизайна.

К счастью, их можно легко исправить с помощью небольшого дизайнерского ноу-хау и классов Bootstrap из коробки.

1) Переработайте цвета таблеток для более теплого и мягкого восприятия

Цвета таблеток в Bootstrap резковаты. Вы можете использовать CSS-переменную —bs-bg-opacity, которая поставляется вместе с Bootstrap. Это смягчит цвет фона и создаст лучший контраст.

<span class="badge rounded-pill text-primary bg-primary" style="--bs-bg-opacity: .20;">Primary</span>
<span class="badge rounded-pill text-secondary bg-secondary" style="--bs-bg-opacity: .20;">Secondary</span>
<span class="badge rounded-pill text-success bg-success" style="--bs-bg-opacity: .20;">Success</span>
<span class="badge rounded-pill text-danger bg-danger" style="--bs-bg-opacity: .20;">Danger</span>
Вход в полноэкранный режим Выход из полноэкранного режима

2) Выбросьте группы списков в окно

Они уродливы. Используйте стандартные списки HTML. Вы даже можете добавить SVGs вместо стандартных буллитов списка, чтобы привлечь больше внимания.

<div class="card border-0 shadow p-2">
    <div class="card-body">
        <h3 class="fs-5">Some items we sell</h3>
        <ul class="" style="list-style: none; list-style-position: outside; padding-left: 0px;">
            <li class="d-flex align-items-center mb-1">
                <svg xmlns="http://www.w3.org/2000/svg" class="me-2 text-primary" height="16" width="16" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                </svg>
                An item
            </li>
            <li class="d-flex align-items-center mb-1">
                <svg xmlns="http://www.w3.org/2000/svg" class="me-2 text-primary" height="16" width="16" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                </svg>
                A second item
            </li>
            <li class="d-flex align-items-center mb-1">
                <svg xmlns="http://www.w3.org/2000/svg" class="me-2 text-primary" height="16" width="16" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                </svg>
                A third item
            </li>
        </ul>
    </div>
</div>
Войти в полноэкранный режим Выход из полноэкранного режима

3) Дайте выпадающим спискам тень и немного пространства для дыхания.

Добавьте к выпадающим спискам тень с помощью класса shadow. Это придаст им глубину и создаст впечатление, что они ближе к пользователю. Добавьте небольшое поле с помощью mt-2, чтобы список не перекрывал кнопку.

<div class="bg-white p-4 shadow d-flex justify-content-center" style="height: 200px;">
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
          Dropdown
        </button>
        <ul class="dropdown-menu shadow mt-2" aria-labelledby="dropdownMenuButton1">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
    </div>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

4) Используйте тени и дополнительные вставки на карточках

Границы карточек часто кажутся неуклюжими. Тени подчеркивают элементы и придают странице глубину. Используйте класс shadow, чтобы добавить тень к вашему классу, и увеличьте подложку с помощью класса p-2, чтобы придать ей больше внутреннего пространства.

<div class="card border-0 shadow p-2">
    <div class="card-body">
        <h5 class="card-title fs-5">Collaborate</h5>
        <p class="card-text">
            Share your work with hundreds of like minded individuals around the world!
        </p>
    </div>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

5) HTML-таблицы не должны быть скучными

Таблицы не обязательно должны быть прямым 1-1 представлением вашей базы данных. Если это имеет смысл, объедините колонки и скройте заголовки. Это позволяет меньше чувствовать себя как база данных и больше как компонент пользовательского интерфейса.

<div class="border-0 shadow bg-white rounded">
    <h3 class="fs-5 px-3 pt-3">Users</h3>
    <div class="px-2 pt-2">
        <table class="table table-borderless fs-6">
            <tbody>
                <tr>
                    <td>Mark Otto</td>
                    <td class="text-end text-muted">@mdo</td>
                </tr>
                <tr class="bg-light rounded-4">
                    <td>Jacob Thornton</td>
                    <td class="text-end text-muted">@fat</td>
                </tr>
                <tr>
                    <td>Larry the Bird</td>
                    <td class="text-end text-muted">@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="p-3 bg-light rounded d-flex justify-content-end">
        <buttons class="btn btn-link text-secondary text-decoration-none">Cancel</buttons>
        <buttons class="btn btn-primary">View</buttons>
    </div>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

Другие советы по Bootstrap?

Если вам понравилась эта статья, обратите внимание на мой новый проект — Better Bootstrap.

Там вы найдете бесплатную книгу, содержащую 15 советов по дизайну Bootstrap. Полная книга выйдет позже в этом году.

Оцените статью
devanswers.ru
Добавить комментарий