이 블로그에서 사용하는 대부분의 부트스트랩 소스는 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 등으로 그리드 만들었다. 참고로 아래 예는 일부로 모든 예는 아래 링크에서 볼 수 있다. 그리고 소스도 거기에서 구할 수 있다.



아래 예는 위 소스를 적용한 것이다.  티스토리 블로그 글에는 HTML, CSS, 스크립트 제한이 없다. 위에서 적었듯 해당 페이지로 가면 모든 예를 볼 수 있다. 여담으로 유입경로를 없앤 것처럼 에디터를 개편하면서 HTML도 없앨 수도... 페이지 에디터에는 HTML이 없다. 그리고 네이버 블로그의 새 에디터에도 HTML이 없다. 

Hover Effect Style : Demo - 1

Williamson

Kristiana

Kristiana

Hover Effect Style : Demo - 2

Williamson

Web Developer

Kristiana

Web Designer

Kristiana

Web Designer

Hover Effect Style : Demo - 3

Williamson

Web Developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad adipisci pariatur qui.

Kristiana

Web Designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad adipisci pariatur qui.

Kristiana

Web Designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad adipisci pariatur qui.

-----------------------------------------------------------------------

shopping Demo-1

Sale 20%
Sale 50%
Sale 50%
Sale 50%

shopping Demo-2


shopping Demo-5


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