반응형
이 블로그에서 사용하는 대부분의 부트스트랩 소스는 https://bootsnipp.com/에서 구한다. 멋있는 부트스트랩 소스를 구하기 위해 굳이 다른 사이트를 고생하여 다닐 필요없을 것다. 지금은 부트스트랩 4 정식 버전에서 최신인 4.1.1에 대한 소스가 많지만 3에 대한 소스도 정말 많다.
https://bootsnipp.com/ : 부트스트랩 소스
거기 소스를 보면 부트스트랩 버전이 나오는데 비록 4 이상이라고 나와도 일부 소스는 3에서도 잘 된다. 아래 예는 4.1.1에 해당한다고 하지만 3에도 잘 된다. 참고로 이 블로그는 부트스트랩 3.3.6을 사용 중이다.
소스가 3에서 지원하지 않는 컨포넌트를 사용하지 않는 한 된다고 보면 될 것이다. 아래 예는 3과 4 모두 지원하며, 소스를 보면 알겠지만 3에서 지원하지 않는 컨포넌트인 card를 사용하지 않고 col-md 등으로 그리드 만들었다. 참고로 아래 예는 일부로 모든 예는 아래 링크에서 볼 수 있다. 그리고 소스도 거기에서 구할 수 있다.
- https://bootsnipp.com/snippets/featured/hover-effect-style
- https://bootsnipp.com/snippets/featured/product-shopping-grid-styles
아래 예는 위 소스를 적용한 것이다. 티스토리 블로그 글에는 HTML, CSS, 스크립트 제한이 없다. 위에서 적었듯 해당 페이지로 가면 모든 예를 볼 수 있다. 여담으로 유입경로를 없앤 것처럼 에디터를 개편하면서 HTML도 없앨 수도... 페이지 에디터에는 HTML이 없다. 그리고 네이버 블로그의 새 에디터에도 HTML이 없다.
Hover Effect Style : Demo - 1
Hover Effect Style : Demo - 2
Hover Effect Style : Demo - 3
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-5
Men's Sweat Shirt
$11.00 - $15.00
Women's Shirt
$10.00 - $12.00
Men's Sweat Shirt
$11.00 - $15.00
Men's Sweat Shirt
$11.00 - $15.00
'IT.인터넷.생활 관련 > 부트스트랩' 카테고리의 다른 글
| 부트스트랩 collapse (0) | 2019.06.27 |
|---|---|
| 부트스트랩4에서 테두리 만들기 (0) | 2019.06.25 |
| 부트스트랩4에서 그림자 만들기 (0) | 2019.05.31 |
| 부트스트랩 버전 5에 대한 기대감 (0) | 2019.04.11 |
| 부트스트랩4에서 마음에 들었던 컴포넌트 (0) | 2018.12.04 |
| 부트스트랩 3과 4에서 아이콘 사용 (0) | 2018.11.22 |
| 부트스트랩 버전4, 스마트폰에서 요소감추기 (0) | 2018.11.12 |
| 부트스트랩으로 스킨만들기 (0) | 2018.11.05 |
