사용자 정의 부트스트랩 읽기 경로 -Ver 2-CSS 튜토리얼-php.cn

Bootstrap 5 프레임워크용 사용자 정의 탐색경로

요약: 사용자 정의 Bootstrap 5 이동 경로에 대한 코드(CSS)를 제공합니다. 이전에 올렸던 글을 개선한 글입니다.

1 더 나은 이동 경로의 필요성

Bootstrap 5 프레임워크에는 매우 기본적인 Breadcrumbs 구현이 포함되어 있습니다. 시각적으로나 기능적으로나 훨씬 더 나은 것이 필요했습니다. 시간이 지남에 따라 내 애플리케이션에서 사용자가 특정 항목/개체에 대한 세부 정보를 자세히 살펴본 후 더 높은 수준으로 돌아갈 수 있도록 이동 경로를 사용하는 것이 매우 유용하다는 것을 알게 되었습니다.

나에게 매우 중요한 것은 두 행의 텍스트 데이터를 표시하는 기능이었습니다. 특히 일부 계정의 데이터인 표시와 같은 일부 데이터와 ID를 표시하는 동시에 계좌번호.

인터넷에서 본 솔루션이 만족스럽지 않아서 직접 개발하게 되었습니다.

제목에는 "Bootstrap 5" 라이브러리라고 나와 있지만 Bootstrap CSS와 완전히 독립적이며 Bootstrap 5 테마에 맞게 Bootstrap CSS에서 선택한 색상만 가져왔습니다. 원하는 경우 Bootstrap과 독립적으로 사용할 수 있습니다.

1.1 이 버전의 변경 사항

이 버전에는 Graeme_Grant@codeproject.com의 제안과 코드가 통합되어 코드를 더 짧게 만듭니다. 나는 코드의 인간 가독성이 짧은 코드보다 더 중요하다고 생각하기 때문에 모든 제안에 반드시 동의하지는 않습니다. 그래서 제가 직접 새로운 버전을 만들어 봤습니다.

또한 이 버전은 Font Awesome 아이콘 대신 부트스트랩 아이콘 [1]을 사용합니다.

2 최종 결과

다음은 최종 결과와 이를 생성하는 데모 코드입니다. 선택적으로 아이콘을 사용하여 3가지 크기(대형, 중간, 소형)의 탐색경로 스트립을 만들었습니다. 색상은 마음대로 선택할 수 있으며 명시적으로 비활성화하지 않는 한 호버 효과는 기본적으로 제공됩니다. 호버 효과는 일반적으로 마지막 탐색경로에 대해 비활성화됩니다. 이는 현재 선택 항목이 적용되기 때문입니다.

Custom Bootstrap readcrumbs -Ver 2

위 렌더링을 생성하는 HTML 코드는 다음과 같습니다. 모든 웹 개발자는 HTML 코드를 읽고 위 그림과 일치하여 자신이 좋아하는 변형을 찾을 수 있어야 합니다.

아이콘을 사용하려면 Bootstrap Icons [1] 무료 버전을 설치하고 이 예제에서 수행되는 방법과 유사하게 참조하면 됩니다. 아이콘 사용을 위한 HTML 코드는 독립적으로 스타일을 지정할 수 있도록 아이콘과 텍스트를 2개의 개별 요소로 분리해야 했기 때문에 약간 복잡합니다.

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="breadcrumb3.css" />
    <!-- Download bootstrap icons from https://icons.getbootstrap.com/#install  
        and install -->
    <link rel="stylesheet" href="bootstrap-icons-1.11.3\font\bootstrap-icons.min.css" />
</head>

<body>
    <!--Large size --------------------------------------------------------------->
    <H5>Large size, info case</H5>
    <div class="breadcrumb3-lg ">
        <a href="#" class="breadcrumb3-item info">Accounts</a>
        <a href="#" class="breadcrumb3-item info">Account number</br>123456</a>
        <a href="#" class="breadcrumb3-item primary">Details</a>
    </div>
    <H5>Large size, info case, with no hover effect on the last button</H5>
    <div class="breadcrumb3-lg ">
        <a href="#" class="breadcrumb3-item info">Contracts</a>
        <a href="#" class="breadcrumb3-item info">Contract number</br>99999-2024</a>
        <a href="#" class="breadcrumb3-item primary no-hover-effect">Contract Info</a>
    </div>
    <H5>Large size, Rainbow</H5>
    <div class="breadcrumb3-lg ">
        <a href="#" class="breadcrumb3-item info ">Breadcrumb</br>info</a>
        <a href="#" class="breadcrumb3-item primary ">Breadcrumb</br>primary</a>
        <a href="#" class="breadcrumb3-item warning ">Breadcrumb</br>warning</a>
        <a href="#" class="breadcrumb3-item success ">Breadcrumb</br>success</a>
        <a href="#" class="breadcrumb3-item secondary ">Breadcrumb</br>secondary</a>
        <a href="#" class="breadcrumb3-item light ">Breadcrumb</br>light</a>
        <a href="#" class="breadcrumb3-item danger ">Breadcrumb</br>danger</a>
    </div>
    <H5>Large size, icons usage</H5>
    <div class="breadcrumb3-lg ">
        <a href="#" class="breadcrumb3-item info">
            <span class="breadcrumb3-icon" ><i class="bi bi-people-fill"></i></span> 
            <span class="breadcrumb3-text" >Users</span>
        </a>
        <a href="#" class="breadcrumb3-item info">
            <span class="breadcrumb3-icon" ><i class="bi bi-person-fill"></i></span>
            <span class="breadcrumb3-text" >User number</br>123456</span>
        </a>
        <a href="#" class="breadcrumb3-item primary"> 
            <span class="breadcrumb3-icon" ><i class="bi bi-info-circle-fill"></i></span>
            <span class="breadcrumb3-text" >Details</span>
        </a>
    </div>

    <!--Medium size --------------------------------------------------------------->
    <H5>Medium size, info case</H5>
    <div class="breadcrumb3-md ">
        <a href="#" class="breadcrumb3-item info">Accounts</a>
        <a href="#" class="breadcrumb3-item info">Account number</br>123456</a>
        <a href="#" class="breadcrumb3-item primary">Details</a>
    </div>
    <H5>Medium size, info case, with no hover effect on the last button</H5>
    <div class="breadcrumb3-md ">
        <a href="#" class="breadcrumb3-item info">Contracts</a>
        <a href="#" class="breadcrumb3-item info">Contract number</br>99999-2024</a>
        <a href="#" class="breadcrumb3-item primary no-hover-effect">Contract Info</a>
    </div>
    <H5>Medium size, Rainbow</H5>
    <div class="breadcrumb3-md ">
        <a href="#" class="breadcrumb3-item info ">Breadcrumb</br>info</a>
        <a href="#" class="breadcrumb3-item primary ">Breadcrumb</br>primary</a>
        <a href="#" class="breadcrumb3-item warning ">Breadcrumb</br>warning</a>
        <a href="#" class="breadcrumb3-item success ">Breadcrumb</br>success</a>
        <a href="#" class="breadcrumb3-item secondary ">Breadcrumb</br>secondary</a>
        <a href="#" class="breadcrumb3-item light ">Breadcrumb</br>light</a>
        <a href="#" class="breadcrumb3-item danger ">Breadcrumb</br>danger</a>
    </div>
    <H5>Medium size, icons usage</H5>
    <div class="breadcrumb3-md ">
        <a href="#" class="breadcrumb3-item info">
            <span class="breadcrumb3-icon" ><i class="bi bi-people-fill"></i></span> 
            <span class="breadcrumb3-text" >Users</span>
        </a>
        <a href="#" class="breadcrumb3-item info">
            <span class="breadcrumb3-icon" ><i class="bi bi-person-fill"></i></span>
            <span class="breadcrumb3-text" >User number</br>123456</span>
        </a>
        <a href="#" class="breadcrumb3-item primary"> 
            <span class="breadcrumb3-icon" ><i class="bi bi-info-circle-fill"></i></span>
            <span class="breadcrumb3-text" >Details</span>
        </a>
    </div>

    <!--Small size --------------------------------------------------------------->
    <H5>Small size, info case</H5>
    <div class="breadcrumb3-sm ">
        <a href="#" class="breadcrumb3-item info">Accounts</a>
        <a href="#" class="breadcrumb3-item info">Account number</br>123456</a>
        <a href="#" class="breadcrumb3-item primary">Details</a>
    </div>
    <H5>Small size, info case, with no hover effect on the last button</H5>
    <div class="breadcrumb3-sm  ">
        <a href="#" class="breadcrumb3-item info">Contracts</a>
        <a href="#" class="breadcrumb3-item info">Contract number</br>99999-2024</a>
        <a href="#" class="breadcrumb3-item primary no-hover-effect">Contract Info</a>
    </div>
    <H5>Small size, Rainbow</H5>
    <div class="breadcrumb3-sm  ">
        <a href="#" class="breadcrumb3-item info ">Breadcrumb</br>info</a>
        <a href="#" class="breadcrumb3-item primary ">Breadcrumb</br>primary</a>
        <a href="#" class="breadcrumb3-item warning ">Breadcrumb</br>warning</a>
        <a href="#" class="breadcrumb3-item success ">Breadcrumb</br>success</a>
        <a href="#" class="breadcrumb3-item secondary ">Breadcrumb</br>secondary</a>
        <a href="#" class="breadcrumb3-item light ">Breadcrumb</br>light</a>
        <a href="#" class="breadcrumb3-item danger ">Breadcrumb</br>danger</a>
    </div>
    <H5>Small size, icons usage</H5>
    <div class="breadcrumb3-sm  ">
        <a href="#" class="breadcrumb3-item info">
            <span class="breadcrumb3-icon" ><i class="bi bi-people-fill"></i></span> 
            <span class="breadcrumb3-text" >Users</span>
        </a>
        <a href="#" class="breadcrumb3-item info">
            <span class="breadcrumb3-icon" ><i class="bi bi-person-fill"></i></span>
            <span class="breadcrumb3-text" >User number</br>123456</span>
        </a>
        <a href="#" class="breadcrumb3-item primary"> 
            <span class="breadcrumb3-icon" ><i class="bi bi-info-circle-fill"></i></span>
            <span class="breadcrumb3-text" >Details</span>
        </a>
    </div>
</body>

</html>

로그인 후 복사

3 이동경로 CSS

여기 CSS가 있습니다. JavaScript는 필요하지 않습니다. Bootstrap 5 원본 클래스와의 이름 충돌을 피하기 위해 의도적으로 클래스 이름 “breadcrumbs3”을 사용했습니다.

/* breadcrumb3.css */
/* by Mark.Pelf@Codeproject.com, 
   using partly code from Graeme_Grant@codeproject.com  */

.breadcrumb3-lg, .breadcrumb3-md, .breadcrumb3-sm{
    /* colors taken from bootstrap.css Bootstrap v5.1.0 */
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-gray: #6c757d;
    --bs-white: white;
    --bs-black: black;

    /* changeable colors */
    --_bgcolor: var(--bs-info);
    --_color: var(--bs-black);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-primary);
    --_hover-color: var(--bs-white);
}

@media (max-width: 767px) {
    /* making it responsive, using CSS Flexbox with column (vertical) direction*/
    .breadcrumb3-lg, .breadcrumb3-md, .breadcrumb3-sm {
        display: flex;
        flex-direction: column;
    }

    .breadcrumb3-lg  .breadcrumb3-item {
        width: 80% ;
        border-radius: 4px 0 0 4px;
        padding-left: 25px ;
    }

    .breadcrumb3-md .breadcrumb3-item {
        width: 80% ;
        border-radius: 3px 0 0 3px;
        padding-left: 20px ;
    }

    .breadcrumb3-sm .breadcrumb3-item {
        width: 80% ;
        border-radius: 3px 0 0 3px;
        padding-left: 18px ;
    }
}

/* large size breadcrumb3-item -----------------------------------*/
.breadcrumb3-item {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    color: var(--_color);
    background-color: var(--_bgcolor);
    height: 40px;
    line-height: 18px;
    font-size: 18px;
    text-align: center;
    padding-right: 10px;
    padding-left: 25px;
    text-decoration: none;
}

.breadcrumb3-text {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.breadcrumb3-icon {
    display: table-cell;
    text-align: center;
    line-height: 25px;
    font-size: 25px;
    padding-right: 10px;
    vertical-align: middle;
}

.breadcrumb3-item:first-child {
    border-radius: 4px 0 0 4px;
    padding-left: 15px;
}

.breadcrumb3-item:before,
.breadcrumb3-item:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    position: absolute;
    margin-top: -20px;
    border-bottom: 20px solid transparent;
    left: 100%;
    top: 50%;
}
/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-item:after {
    border-left: 15px solid var(--_arrowbordercolor);
    margin-left: 1px;
    z-index: 2;
}

/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-item:before {
    border-left: 15px solid var(--_bgcolor);
    margin-left: 0px;
    z-index: 3;
}

.breadcrumb3-item:hover:not(.no-hover-effect) ,
.breadcrumb3-item:focus:not(.no-hover-effect){
    background-color: var(--_hover-bgcolor);
    color: var(--_hover-color);
}

.breadcrumb3-item:hover:not(.no-hover-effect):before,
.breadcrumb3-item:focus:not(.no-hover-effect):before {
    border-left-color: var(--_hover-bgcolor);
}

/* remove keyboard navigation focus rectangle */
.breadcrumb3-item:focus-visible {
  outline: none;
}

/* medium size breadcrumb3-item -----------------------------------*/
.breadcrumb3-md .breadcrumb3-item {
    height: 32px;
    line-height: 15px;
    font-size: 15px;
    padding-left: 20px;
}

.breadcrumb3-md .breadcrumb3-icon {
    line-height: 20px;
    font-size: 20px;
    padding-right: 7px;
}

.breadcrumb3-md .breadcrumb3-item:first-child {
    border-radius: 3px 0 0 3px;
    padding-left: 12px;
}

/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-md .breadcrumb3-item:after {
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 12px solid var(--_arrowbordercolor);
    margin-top: -16px;
    margin-left: 1px;
}

/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-md .breadcrumb3-item:before {
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 12px solid var(--_bgcolor);
    margin-top: -16px;
}

/* small size breadcrumb3-item-sm -----------------------------------*/
.breadcrumb3-sm .breadcrumb3-item {
    height: 24px;
    line-height: 11px;
    font-size: 11px;
    padding-right: 8px;
    padding-left: 18px;
}

.breadcrumb3-sm .breadcrumb3-icon {
    line-height: 16px;
    font-size: 16px;
    padding-right: 5px;
}

.breadcrumb3-sm .breadcrumb3-item:first-child {
    border-radius: 3px 0 0 3px;
    padding-left: 10px;
}

/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-sm .breadcrumb3-item:after {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 8px solid var(--_arrowbordercolor);
    margin-top: -12px;
    margin-left: 1px;
}

/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-sm .breadcrumb3-item:before {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 8px solid var(--_bgcolor);
    margin-top: -12px;
}

/*breadcrumb3-item colors ------------------------------------------*/
/* we like specificity, to avoid namespace collisions */
.breadcrumb3-lg .info, .breadcrumb3-md .info, .breadcrumb3-sm .info {
    --_color: var(--bs-black);
    --_bgcolor: var(--bs-info);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-primary);
    --_hover-color: var(--bs-white);
}

.breadcrumb3-lg .primary , .breadcrumb3-md .primary , .breadcrumb3-sm .primary {
    --_color: var(--bs-white);
    --_bgcolor: var(--bs-primary);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-success);
    --_hover-color: var(--bs-white);
}

.breadcrumb3-lg .warning, .breadcrumb3-md .warning, .breadcrumb3-sm .warning {
    --_color: var(--bs-black);
    --_bgcolor: var(--bs-warning);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-primary);
    --_hover-color: var(--bs-white);
}

.breadcrumb3-lg .success, .breadcrumb3-md .success, .breadcrumb3-sm .success {
    --_color: var(--bs-black);
    --_bgcolor: var(--bs-success);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-primary);
    --_hover-color: var(--bs-white);
}

.breadcrumb3-lg .secondary, .breadcrumb3-md .secondary, .breadcrumb3-sm .secondary {
    --_color: var(--bs-white);
    --_bgcolor: var(--bs-secondary);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-primary);
    --_hover-color: var(--bs-white);
}

.breadcrumb3-lg .light, .breadcrumb3-md .light, .breadcrumb3-sm .light {
    --_color: var(--bs-black);
    --_bgcolor: var(--bs-light);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-primary);
    --_hover-color: var(--bs-white);
}

.breadcrumb3-lg .danger, .breadcrumb3-md .danger, .breadcrumb3-sm .danger {
    --_color: var(--bs-white);
    --_bgcolor: var(--bs-danger);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-primary);
    --_hover-color: var(--bs-white);
}

로그인 후 복사

4 CSS 작동 방식

여기서 CSS 작동 방식에 대한 몇 가지 힌트를 제공합니다. 이는 매우 간단한 CSS 코드이고 대부분 설명이 필요하지 않습니다.

4.1 CSS로 삼각형을 만드는 요령

CSS를 사용하여 삼각형을 만드는 방법에 대한 매우 인기 있는 트릭이 여기에 사용됩니다. 요점은 테두리를 렌더링하는 CSS의 기능을 남용하여 삼각형 모양의 테두리를 렌더링하도록 하는 것입니다. 너비와 높이가 0이고 한쪽에 화살표 역할을 하는 색상 테두리가 있고 인접한 두 면에 두 개의 투명한 테두리가 있는 블록 요소를 생성하면 됩니다.

4.2 CSS 삼각형에 테두리를 만드는 요령

삼각형 자체가 테두리이기 때문에 테두리를 만들 수는 없습니다. 따라서 삼각형/화살표에 테두리를 만드는 방법은 2개의 삼각형을 만들고 오프셋을 최소화하면서 하나를 다른 삼각형 위에 렌더링하는 것입니다. 그런 식으로 테두리 모양을 만듭니다.

CSS 코드를 선택기(.breadcrumb3-item:after) 및 (.breadcrumb3-item:before)로 살펴보면 회색 하나와 그 위에 정보 색상 하나 등 2개의 삼각형이 생성되는 것을 볼 수 있습니다. 첫 번째(왼쪽 여백: 1px; z-index: 2;)와 두 번째(왼쪽 여백: 0px; z-index: 3;)에 대한 CSS 규칙을 주의 깊게 살펴보세요. 첫 번째 삼각형 위에 두 번째 삼각형이 약간 오프셋되어 렌더링되는 것을 볼 수 있습니다.

유사 요소(:before, :after)는 해당 삼각형을 .breadcrumb3-item 요소에 연결하는 목적만 가집니다.

4.3 튜토리얼 예시

여기서는 삼각형이 어떻게 생성되는지 보여주기 위한 튜토리얼 예제 코드를 제공합니다. 튜토리얼 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>

<head>
    <style>
        .test1 {
            position: relative;
            display: table-cell;
            vertical-align: middle;
            color: blue;
            background-color: yellow;
            height: 40px;
            line-height: 18px;
            font-size: 18px;
            text-align: center;
            padding-right: 10px;
            padding-left: 25px;
            text-decoration: none;
        }

        .test1:after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-top: 20px solid red;
            position: absolute;
            margin-top: -20px;
            border-bottom: 20px solid red;
            left: 100%;
            top: 50%;
            border-left: 15px solid gray;
            margin-left: 1px;
            z-index: 2;
        }

        .test2 {
            position: relative;
            display: table-cell;
            vertical-align: middle;
            color: blue;
            background-color: yellow;
            height: 40px;
            line-height: 18px;
            font-size: 18px;
            text-align: center;
            padding-right: 10px;
            padding-left: 25px;
            text-decoration: none;
        }

        .test2:after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-top: 20px solid transparent;
            position: absolute;
            margin-top: -20px;
            border-bottom: 20px solid transparent;
            left: 100%;
            top: 50%;
            border-left: 15px solid gray;
            margin-left: 1px;
            z-index: 2;
        }

        .test3 {
            position: relative;
            display: table-cell;
            vertical-align: middle;
            color: blue;
            background-color: yellow;
            height: 40px;
            line-height: 18px;
            font-size: 18px;
            text-align: center;
            padding-right: 10px;
            padding-left: 25px;
            text-decoration: none;
        }

        .test3:before {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-top: 20px solid transparent;
            position: absolute;
            margin-top: -20px;
            border-bottom: 20px solid transparent;
            left: 100%;
            top: 50%;
            border-left: 15px solid blue;
            margin-left: 0px;
            z-index: 3;
        }
    </style>
</head>

<body>
    <div class="test1">
        Note how gray arrow is created from red border
    </div>
    <br/>
    <div >
        Now we will change red to transparent to keep just arrow
    </div>
    <br/>
    <div class="test2">
        Now we have only gray arrow, with 1 pixel offset to the right
    </div>
    <br/>
    <div class="test3">
        Similarly we have blue arrow, without that offset
    </div>
    <br/>
    <div class="test2 test3">
        Now we overlap 2 arrows, to get border effect for the arrow
    </div>
</body>

</html>

로그인 후 복사

실행 결과는 다음과 같습니다.

Custom Bootstrap readcrumbs -Ver 2

더 나은 프로그래머라면 코드 샘플을 생성된 결과와 일치시킬 수 있어야 합니다.

5 부트스트랩 아이콘 사용법

애플리케이션에 적합한 부트스트랩 아이콘 아이콘을 찾는 것이 복잡해 보일 수 있지만 실제로는 매우 쉽습니다. 아이콘은 키워드로 색인화되므로 먼저 키워드를 검색한 다음 관심 있는 아이콘을 선택하고(이 예에서는 무료) 해당 ID 클래스를 앱에 복사해야 합니다. 다음은 해당 프로세스를 보여주는 스크린샷입니다.

Custom Bootstrap readcrumbs -Ver 2