부트스트랩 affix 테마와 템플릿

여기에서 부투스트랩 무료 테마 및 템플릿을 소개합니다. 2016/01/11 - 부트스트랩,affix 기능에서도 적었듯 부트스트랩 affix는 일정 지점에 페이지가 스크롤 되면 특정 영역이 고정되는 것입니다. 그 특정 영역이란 보통 사이드바나 메뉴가 된다는 것은 알 것입니다. 그리고 아래에서 소개하는 테마 페이지는 영어이므로 미리보기 및 다운로드가 영어로 나오니 이것에 대해 간단히 설명합니다. 테마를 미리보기고 싶다면 PREVIEW 버튼을 누르면 되며 다운로드는 DOWNLOAD 버튼을 누르면 됩니다. 

첫 번째로 소개할 아래 테마는 사이드바가 없는 1단으로 스크롤을 내리면 메뉴가 고정되는 것입니다. 여담으로 메뉴를 클릭하면 이동하는 것은 후에 설명할 부트스트랩 scrollspy 활용한 것인지 모르겠는데 그것인 것 같습니다. 그리고 상단의 슬라이드도 나중에 설명할 부트스트랩 carousel 입니다.

• 미리보기 및 다운로드  : http://www.bootstrapzero.com/bootstrap-template/the-firm

두 번째로 소개할 아래 테마는 사이드바가 있는 2단으로 스크롤을 내리면 왼쪽에 있는 사이드바가 고정되는 것입니다. 이 블로그를 예로 들면 스크롤을 움직이더라도 오른쪽 사이드바는 항상 보이게 됩니다. 스마트폰에서는 안 봐서 어떻게 보이질지 모르겠습니다.

• 미리보기 및 다운로드 : http://www.bootstrapzero.com/bootstrap-template/flathood

세 번째로 소개할 테마는 멋있는데 보면 간단한 것이 아니라는 것을 느낄 것입니다. 멋있는 것으로 치자면 아래인데 배우는 것만 한다면 위의 것이 좋을 것 같습니다. 아래 두 개는 복잡할 것 같습니다. 미리보기는 LIve Preview 를 누르면 되고 다운로드는 Download를 하면 됩니다. 다운로드는 메일로 링크를 보내는 것 같습니다. 멋있는 대신 높은 브라우저를 요구합니다. 거기에 나온 설명을 보니 부트스트랩 3.3.5를 기반으로 했고 브라우저는 익스플로러 9,10,11,크롬,사파리,파이어폭스 등을 지원한다고 합니다. 우리나라는 익스플로러 7,8 사용자가 많으니 아래 멋있는 것은 필요가 없을지도...

• 미리보기 및 다운로드 : http://www.themefisher.com/items/meghna-free-responsive-onepage-business-template/
• 미리보기 및 다운로드 : http://www.themefisher.com/items/blue-free-onepage-responsive-corporate-template/

네번째로 소개할 것은 테마가 아니고 템플릿입니다. 저는 영어이지만 부트스트랩 관련 템플릿을 구하고자 할 때 http://bootsnipp.com/에서 구합니다. 아주 멋있는 소스를 구할 수 있습니다. 

• http://bootsnipp.com/snippets/featured/vertical-affix-menu-css-only : 여기에서 볼 수 있는 소스는 CSS를 사용한 것인데 스크롤 하면 사이드바가 고정되는 것입니다. 이 페이지의 예를 들면 사이드바를 내리면 사이드바가 움직이지 않는 것입니다. 사이드바를 고정하고 싶을 때 유용할 것 같습니다.
  
• http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_affix2&stacked=h 도 위처럼 사이드바가 고정되는 것인데 위와 다른 것이 위는 처음부터 사이드바가 고정되는데 이것은 일정 부분인 205에 가면 사이드바가 고정되는 것입니다. 
• http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_affix&stacked=h 은 페이지 내의 메뉴가 고정되는데 스크롤 197 내리면 고정됩니다.