항상 적지만 이 블로그 스킨은 부트스트랩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


shopping Demo-3

New

Men's Blazer

$63.50 $75.00
New

Men's Blazer

$63.50 $75.00
New

Men's Blazer

$63.50 $75.00

shopping Demo-4

New -10%
-12%
New -10%
New -10%

shopping Demo-5


shopping Demo-6

Men's Shirt

$11.00 $14.00

Women's Red Top

$8.00 $12.00

Men's Shirt

$11.00 $14.00

Men's Shirt

$11.00 $14.00

shopping Demo-8

-20%
£ 8.00 £ 10.00
Free Shipping

Women's Plain Top

See all deals
-30%
£ 7.00 £ 10.00
Free Shipping

Women's Designer Top

See all deals
-20%
£ 8.00 £ 10.00
Free Shipping

Women's Plain Top

See all deals

shopping Demo-9


'정보/부트스트랩' 관련된 글