전에도 적었듯 이 블로그는 부트스트랩 3을 사용하고 있으며 나는 이 블로그 동영상 페이지에서 아래와 같은 탭을 사용하고 있다. 아래에서 볼 수 있는 소스는 https://bootsnipp.com/snippets/lvq6q에서 구할 수 있다. 참고로 그 사이트는 부트스트랩2에서 4까지 소스를 구할 수 있다.
적용 과정
나는 HTML 소스에서 <div class="container">를 포함한 9번까지 이 글에 적용하지 않았다. 왜냐하면 6번까지 스크립트와 LINK CSS는 중복이라 제거했고 <div class="container">를 포함한다면 전체에 해당하므로 제거했다. 만약 <div class="container">를 포함한다면 위와 같이 나오지 않고 아래 그림처럼 이 블로그 사이드바 영역까지 침범한다.
그리고 원본 CSS에서 body 부분은 삭제했다. 왜냐하면 이 블로그 CSS에서 body를 정의했기 때문이다. 탭의 크기는 .nav-tabs > li에서 정의하여 20%로 위를 보듯이 5등분하고 있다. 나는 https://min-blog.tistory.com/pages/동영상에서 탭을 5개가 아닌 4개로 했으므로 20%가 아닌 25%로 설정했다. 만약 해보지 않았지만 탭이 3개라면 33.3%라고 하면 될 것이다.
또한 CSS 마지막 부분에 있는 아래에서 볼 수 있는 부분을 삭제했다. 왜냐하면 나에게 필요 없었기 때문이다. 스마트폰에서 이 글에 삽입된 탭을 보면 글자가 없다. 아래 소스를 보면 스마트폰에서는 글자를 사라지게 하고 아이콘만 남게 한다는 것을 알 수 있다. PC에서 브라우저 창을 줄이면 글자가 없어지고 아이콘만 남을 것이다. 그리고 원본 CSS를 <style>소스</style>에 넣었다.
@media all and (max-width:724px){
.nav-tabs > li > a > span {display:none;}
.nav-tabs > li > a {padding: 5px 5px;}
이 블로그 댓글에서 사용하고 있는 애래 그림과 같은 탭은 부트스트랩3에서 기본적으로 지원하고 있는 탭으로 변형하지 않고 그대로 사용하고 있다. 이 글에 적은 탭은 변형한 것이다. 참고로 이 글에서 댓글창은 없앴다. 왜냐하면 두 개 탭이 서로 충돌했기 때문이다.
'IT.인터넷.생활 관련 > 부트스트랩' 카테고리의 다른 글
| 부트스트랩5 알파에 '그리드 레이아웃'이 없다. (0) | 2020.07.30 |
|---|---|
| 부트스트랩5 알파가 나왔다는 것을 알았다 (0) | 2020.07.28 |
| 벽돌리스트인 Masonry 레이아웃 구현하기 (0) | 2020.07.01 |
| 타임라인 리스트 만들기 (2) | 2020.05.01 |
| 부트스트랩3,슬라이드 표시 원 크게 (0) | 2020.02.21 |
| 부트스트랩 버전 3,4,5 소식 (0) | 2019.11.12 |
| 부트스트랩 버전3과 4에서 가능한 hover, 두번째 (0) | 2019.10.27 |
| 부트스트랩 3과 4에서 모두 가능한 hover 첫번째 (0) | 2019.10.09 |
