Bootstrap 4 (부트스트랩) 구성요소, Breadcrumb

웹페이지의 현 위치를 알리는 부분.

<nav>...</nav>, <div>...</div>로 적용할 수도 있고 부트스트랩의 기본 column에 적용할 수 있다.

  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item active" aria-current="page">Home</li>
    </ol>
  </nav>

  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Home</a></li>
      <li class="breadcrumb-item active" aria-current="page">Library</li>
    </ol>
  </nav>

  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Home</a></li>
      <li class="breadcrumb-item"><a href="#">Library</a></li>
      <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
  </nav>

  <div aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Home</a></li>
      <li class="breadcrumb-item"><a href="#">Library</a></li>
      <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-sm-6" aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Home</a></li>
          <li class="breadcrumb-item"><a href="#">Library</a></li>
          <li class="breadcrumb-item active" aria-current="page">Data</li>
        </ol>
      </div>
    </div>
  </div>

분리기호의 수정

위의 예제대로 하면 Home / Library / Data 와 같이 표현된다. 각 페이지 항목의 분리기호가 기본적으로는 '/'로 설정되어 있다. 분리기호(separator)는 css를 수정하여 변경할 수 있다.

이미 설명한 바 있는 크롬의 개발자도구로 검사해보면 어떤 CSS가 여기에 관여하고 있는 지 알 수 있다.

이러한 분리기호는 대개 CSS의 ::before로 설정된다.

[참조] 크롬(Chrome) 개발자도구, 검사 http://passauer1083.tistory.com/20

bootstrap.css에서 해당 부분을 찾아서 content: "/"; 를 content:">";로 수정한 다음 다시 해당 페이지를 실행시켜보자. 분리기호가 ">"로 변경되었음을 알 수 있다.

이렇게해도 분리기호가 변경되지 않을 경우, 

1. 해당페이지가 bootstrap.css를 header 부분에 선언하고 있는 지 확인. 
   <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css"/>
2. 크롬에서 설정 > 고급 > 개인정보 및 보안 > 인터넷사용기록 삭제를 실행하고 페이지를 리로딩(F5)하면 된다.
   (이미 로딩되어 적용되고 있는 bootstrap.css를 다시 로딩함)