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

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

<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를 다시 로딩함)