본문 바로가기

Development/WebUI FrameWork | BootStrap

[BootStrap 3] ScrollSpy 부트스트랩 스크롤 스파이 엘리먼트에 적용링크 : http://tutsme-webdesign.info/bootstrap-3-scrollspy/
[BootStrap 3] popover Example 링크1 : http://www.w3schools.com/bootstrap/bootstrap_ref_js_popover.asp링크2 : http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_popover_methods&stacked=h Bootstrap Example [BootStrap 3] popover live 부트스트랩 팝오버 컴포넌트를 사용하려다 보면, live / on 으로 이벤트를 바인딩 해야할 경우가 있다.jsFiddle 에 누가 올려놓음. 링크그래서~ 아래와 같이HTML Add new Popover trigger $('body').popover({ selector: '.has-popover', trigger: 'hover' }); $('.add-one').on('click', function () { $('#popover-triggers')...
[BootStrap] Tooltip Styling 부트스트랩 툴팁에 대한 스타일링~HTML Tooltip on bottom CSS .red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;} .red-tooltip + .tooltip > .tooltip-arrow { border-bottom-color:#f00; } JS $(document).ready(function(){ $("a").tooltip(); });
부트스트랩 페이징 가운데 정렬(Center) 부트스트랩에서 페이지네이션 목록을 가운데 정렬할때마다 좀 짜증나는데;;구글링해보니 생각보다 간단했다.부트스트랩에서 페이지네이션은 아래와 같은 코드로 되있을것이다.
Metro UI CSS 2.0 BootStrap - Guide 1. Base CSS | 1. General CSS Metro UI CSS 2.0 BootStrap GuideBase CSSGeneral CSSGlobal StylesColors*-black*-white*-lime*-green*-emerald*-teal*-cyan*-cobalt*-indigo*-violet*-pink*-magenta*-crimson*-red*-orange*-amber*-yellow*-brown*-olive*-steel*-mauve*-taupe*-gray*-dark*-darker*-transparent*-darkBrown*-darkCrimson*-darkMagenta*-darkIndigo*-darkCyan*-darkCobalt*-darkTeal*-darkEmerald*-darkGreen*-darkOrange*-darkRed*-darkPink..
Metro UI CSS 2.0 BootStrap - Guide 1. Base CSS | Requirements Metro UI CSS 2.0 BootStrap Guide본문 : http://metroui.org.ua/※ 가끔씩 여기 웹사이트가 에러날때는 식겁합니다. 열심히 보고 하는데, 찾을 수 없다고 할때가 가끔 있더군요.해서 파일 다운로드는 및 가이드를 볼 수가 없게되면;; 어휴;;이 부트스트랩 기반으로 개발된 웹서비스가.. 상상도 하기 싫군요.해서 번역은 아니고 그냥 제가 가이드를 보면서 이해한 정도의 수준으로만 가이드 형식의 포스팅을 합니다.캡쳐의 대장정이 될듯하네요. ㄷㄷㄷ;;Base CSSRequirementsFolder Structure - 폴더 구조일단 기본적으로 빨간 밑줄 가있는 파일들은 모두 필요하다고 생각하시면 될 것 같습니다.DOCTYPE - 문서형식HTML 문서형식은 HTML5 의 문서 타..
메트로UI (MetroUI) 부트스트랩 윈도우8 스타일의 웹사이트를 구현하려던 도중 메트로UI 도 부트스트랩이 있더라구요.이미 많은 분들이 알고 사용하고 계시겠지만 꾸역꾸역 포스팅합니다. 이미지를 클릭하시면 링크로 이동합니다.상단의 네비게이션을 보면 다음과 같습니다.Base CSSRequirements : 부트스트랩을 설치하고 웹페이지에 적용시키는 과정설명General CSS : Global 로 사용하는 스타일, 그리드 구성, 타이포그라피, 테이블, 폼, 버튼, 이미지Responsive : 부트스트랩은 반응형을 지원한다. 화면크기(스크린 사이즈)에 반응하는 크기등Icons : 개인적으로 이 부투스트랩을 사용하며, 제일 편하고 고마움을 느끼고 있는 이 아이콘들.빠른 속도로 UI 를 구성하기에 너무 편리하게 되어있습니다.Components - 컴..