항상 적지만 이 블로그 스킨은 부트스트랩3으로 만들었다. 이 블로그는 부트스트랩 3으로 만들었지만 이 글 소스는 버전 4.1.1로 만든 소스를 적용하고 있다. 부트스트랩 3에서 4로 업데이트 되면서 변경된 것이 많지만 어떤 소스는 3에서도 그렇게 변화가 없다. 특히 이 글에서 소개하는 소스의 경우와 같다.
소스 다운로드는 https://bootsnipp.com/snippets/O5yMd에서 할 수 있다. 거기에서 다운로드 하고 미리 봤으면 한다. 왜냐하면 이 글에서도 미리 볼 수 있지만 원본은 사이드바가 없는 페이지를 곳을 고려하여 만든 것이며 소스도 변형했기 때문이다.
티스토리 블로그에 삽입할 때 소스의 HTML에 있는 <div class="container"> 부분을 삭제했다. 왜냐하면 삭제하지 않으면 이 블로그 사이드바를 무시하므로 삭제했다. 그리고 HTML 위에 <style></style>을 만들고 그 안에 소스의 CSS를 삽입했다. HTML 아래에 CSS를 넣어도 되는데 습관적으로 CSS는 상단에 넣게 된다.
HTML 소스에 있는 <div class="container"> 윗부분은 삽입하지 않았다. 왜냐하면 일부는 부트스트랩이고 폰트 아이콘인 fontawesome CSS는 이미 이 블로그에서 사용 중이기 때문이다. 그리고 스마트폰에서 썸네일이 가로로 1개만 되기 때문에 두 개로 나오게 하기 위해 HTML에서 col-md-3 col-sm-6에 col-xs-6을 추가했다. 부트스트랩3과 4를 알고 있다면 col-xs-6은 부트스트랩 3에서 해당하는 것이고 4는 xs라는 것이 없어졌으므로 col-6이라 하면 된다. 부트스트랩 그리드를 알면 수정할 수 있다.
shopping Demo-1
Sale
20%
Sale
50%
Sale
50%
Sale
50%
shopping Demo-2
Women's Designer Top
$599.99
Women's Yellow Top
$699.99
Women's Designer Top
$599.99
Women's Designer Top
$599.99shopping Demo-3
New
Men's Blazer
Women's Designer Top
New
Men's Blazer
New
Men's Blazer
shopping Demo-4
New
-10%
-12%
New
-10%
New
-10%
shopping Demo-5
Men's Sweat Shirt
Women's Shirt
Men's Sweat Shirt
Men's Sweat Shirt
shopping Demo-6
Men's Shirt
Women's Red Top
Men's Shirt
Men's Shirt
shopping Demo-8
-20%
-30%
-20%
shopping Demo-9
'IT.인터넷.생활 관련 > 부트스트랩' 카테고리의 다른 글
| 타임라인 리스트 만들기 (2) | 2020.05.01 |
|---|---|
| 부트스트랩3를 사용한 탭 (0) | 2020.03.13 |
| 부트스트랩3,슬라이드 표시 원 크게 (0) | 2020.02.21 |
| 부트스트랩 버전 3,4,5 소식 (0) | 2019.11.12 |
| 부트스트랩 3과 4에서 모두 가능한 hover 첫번째 (0) | 2019.10.09 |
| 부트스트랩 테마는 무료보다 유료 (0) | 2019.07.29 |
| 부트스트랩 collapse (0) | 2019.06.27 |
| 부트스트랩4에서 테두리 만들기 (0) | 2019.06.25 |
