Bootstrap CSS는 여전히 sh * t입니다. 그러나 우리는 그것을 더 좋게 만들 수 있습니다.

Bootstrap은 디자인, CSS로 어려움을 겪고 있거나 무언가를 빠르게 구축해야 하는 사람들을 위한 놀라운 CSS 프레임워크입니다.

그러나 설명서에서 복사하여 붙여넣은 부트스트랩 구성 요소에는 결함이 있습니다.

이러한 결함이 설계를 방해하고 있습니다!

이러한 결함을 수정하고 부트스트랩을 개선하기 위한 5가지 디자인 팁이 있습니다.

1) 경고에 주의를 기울이십시오.

어두운 테두리와 svg 아이콘을 추가하여 사용자의 관심을 끌 수 있습니다.

<div class="alert alert-primary rounded-0 border-0 border-start border-primary border-4" role="alert">
    <p class="fs-6 mb-0 d-flex align-items-center">
        <!-- https://heroicons.com/ light-bul-->
        <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
            <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" />
        </svg>
        <span>A simple primary alert—check it out!</span>
    </p>
</div>

2) 테이블이 데이터베이스와 일치하지 않아도 됩니다.

HTML 테이블은 데이터베이스 구조의 복사본일 필요가 없습니다. 열 이름, ID를 제거하고 의미가 있는 경우 필드를 결합합니다.

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

3) 보조 버튼에는 배경색이 필요하지 않습니다.

기본 작업에 배경색을 지정하고 보조 작업에 배경색을 지정하지 않으면 중요 계층이 설정됩니다.

<div class="card border-0 shadow p-2">
    <div class="card-body">
        <h5 class="card-title">Special offer</h5>
        <p class="card-text">Are you sure you want to cancel your subscription? We have a special offer if you want to stick around!</p>

        <buttons class="btn btn-primary">View Details</buttons>
        <buttons class="btn btn-link text-secondary text-decoration-none">Cancel</buttons>
    </div>
</div>

4) 모든 것에 라벨을 붙이지 마세요!

개발자는 값에 레이블을 지정하는 것을 좋아합니다. 그만해요! 키 값 쌍이 아닌 책의 한 문장인 것처럼 정보를 표시합니다.

<div class="card border-0 shadow">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
        <h1 class="card-title fs-5">Rocky Mount, MI</h1>
        <h2 class="card-title fs-6 text-muted fw-light">100 miles away</h2>
        <p class="card-text fw-light"><span class="fw-bold">$150</span> night</p>
    </div>
</div>

5) 그림자 > 테두리

카드 테두리는 종종 투박하게 느껴집니다. 그림자는 요소를 강조하고 페이지 깊이를 제공하여 요소가 사용자에게 더 가깝게 느껴지도록 합니다.

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

더 많은 부트스트랩 디자인 팁??

이 내용이 마음에 드셨다면 제 새 프로젝트를 확인해 보세요. - Better Bootstrap

여기에서 이 기사에 있는 것과 같은 더 많은 부트스트랩 디자인 팁이 포함된 무료 책을 찾을 수 있습니다.