[Bootstrap] 예시(Examples)의 코드를 뽑아내는 방법

부트스트랩(Bootstrap) 예시(Examples) 사용하는 방법입니다.

 

1. 최상단 메뉴 > Examples

원하는 종류의 예시를 선택합니다.

Headers로 예를 들어보겠습니다.

 

 

2. 크롬 개발자 도구(단축키 : F12)에서 코드 확인

여러가지 형태의 예시가 모여있습니다.

개발자 도구를 열어서 코드를 확인합니다.

 

 

개발자 도구의 왼쪽 상단(빨간색 네모칸)에 보면, 검사할 페이지 요소 선택 버튼이 있습니다.

(단축키 : Ctrl + Shift + C)

클릭 후, 원하는 요소에 마우스 커서를 옮기면 해당 코드가 어디인지 확인할 수 있습니다.

 

 

 

해당 코드를 감싸고 있는 <div class="container>...</div> 코드를 클릭 후 복사합니다.

접혀있는 한 줄만 복사해도 아래와 같이 전체 코드가 복사됩니다.

 

<div class="container">
    <header class="d-flex justify-content-center py-3">
      <ul class="nav nav-pills">
        <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Features</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
        <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
        <li class="nav-item"><a href="#" class="nav-link">About</a></li>
      </ul>
    </header>
  </div>

 

그리고 본인 코드에 옮겨 넣으시면 됩니다.