본문 바로가기

Development/WebUI FrameWork | BootStrap

[BootStrap 3] ScrollSpy 부트스트랩 스크롤 스파이 엘리먼트에 적용링크 : http://tutsme-webdesign.info/bootstrap-3-scrollspy/ One Two Three Four OnePellentesque habitant morbi tristique senectus et netus ... metus TwoPellentesque habitant morbi tristique senectus et netus ... metus ThreePellentesque habitant morbi tristique senectus et netus ... metus FourPellentesque habitant morbi tristique senectus et netus ... metus
[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 Popover Methods Popover Example Click on the buttons to manually control the popover above: Show Hide Toggle Destroy
[BootStrap 3] popover live 부트스트랩 팝오버 컴포넌트를 사용하려다 보면, live / on 으로 이벤트를 바인딩 해야할 경우가 있다.jsFiddle 에 누가 올려놓음. 링크 그래서~ 아래와 같이 HTML Initial trigger Add new Popover trigger $('body').popover({ selector: '.has-popover', trigger: 'hover' }); $('.add-one').on('click', function () { $('#popover-triggers').append("Added trigger") ;});
[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) 부트스트랩에서 페이지네이션 목록을 가운데 정렬할때마다 좀 짜증나는데;;구글링해보니 생각보다 간단했다. 부트스트랩에서 페이지네이션은 아래와 같은 코드로 되있을것이다. 1 2 3 ... 4 500 암튼 그래가지고 저기에서 요소에 display 속성을 inline-block 으로 해줌 생각보다 간단.^^
Metro UI CSS 2.0 BootStrap - Guide 1. Base CSS | 1. General CSS Metro UI CSS 2.0 BootStrap GuideBase CSSGeneral CSS Global Styles Colors*-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*-darkPi..
Metro UI CSS 2.0 BootStrap - Guide 1. Base CSS | Requirements Metro UI CSS 2.0 BootStrap Guide본문 : http://metroui.org.ua/ ※ 가끔씩 여기 웹사이트가 에러날때는 식겁합니다. 열심히 보고 하는데, 찾을 수 없다고 할때가 가끔 있더군요. 해서 파일 다운로드는 및 가이드를 볼 수가 없게되면;; 어휴;;이 부트스트랩 기반으로 개발된 웹서비스가.. 상상도 하기 싫군요. 해서 번역은 아니고 그냥 제가 가이드를 보면서 이해한 정도의 수준으로만 가이드 형식의 포스팅을 합니다.캡쳐의 대장정이 될듯하네요. ㄷㄷㄷ;; Base CSSRequirements Folder Structure - 폴더 구조 일단 기본적으로 빨간 밑줄 가있는 파일들은 모두 필요하다고 생각하시면 될 것 같습니다. DOCTYPE - 문서형식HTML 문서형식은 HTML5..
메트로UI (MetroUI) 부트스트랩 윈도우8 스타일의 웹사이트를 구현하려던 도중 메트로UI 도 부트스트랩이 있더라구요.이미 많은 분들이 알고 사용하고 계시겠지만 꾸역꾸역 포스팅합니다. 이미지를 클릭하시면 링크로 이동합니다. 상단의 네비게이션을 보면 다음과 같습니다.Base CSS Requirements : 부트스트랩을 설치하고 웹페이지에 적용시키는 과정설명 General CSS : Global 로 사용하는 스타일, 그리드 구성, 타이포그라피, 테이블, 폼, 버튼, 이미지 Responsive : 부트스트랩은 반응형을 지원한다. 화면크기(스크린 사이즈)에 반응하는 크기등 Icons : 개인적으로 이 부투스트랩을 사용하며, 제일 편하고 고마움을 느끼고 있는 이 아이콘들. 빠른 속도로 UI 를 구성하기에 너무 편리하게 되어있습니다.Componen..