JKUN

Welcome To The Jkun.net

블로그 포스트 검색결과


bootstrap 에 해당되는 글 6개가 검색 되었습니다.

  1. 2016.06.19 [BootStrap 3] ScrollSpy
  2. 2016.06.19 [BootStrap 3] popover live
  3. 2016.06.19 [BootStrap] Tooltip Styling
  4. 2014.06.17 Metro UI CSS 2.0 BootStrap - Guide 1. Base CSS | 1. General CSS
  5. 2014.06.17 Metro UI CSS 2.0 BootStrap - Guide 1. Base CSS | Requirements
  6. 2014.03.14 메트로UI (MetroUI) 부트스트랩 (2)

Blog

[BootStrap 3] ScrollSpy

2016.06.19 18:19 Development/WebUI FrameWork | BootStrap


부트스트랩 스크롤 스파이 엘리먼트에 적용

링크 : http://tutsme-webdesign.info/bootstrap-3-scrollspy/

<body>
<div class="container">
    <nav id="target_nav" class="col-md-3">
        <ul class="nav list-group">
            <li class="list-group-item"><a href="#one">One</a></li>
            <li class="list-group-item"><a href="#two">Two</a></li>
            <li class="list-group-item"><a href="#three">Three</a></li>
            <li class="list-group-item"><a href="#four">Four</a></li>
        </ul>
    </nav>
    <div id="scroll-able" class="col-md-6">
        <section><h4 id="one">One</h4><p>Pellentesque habitant morbi tristique senectus et netus ... metus</p></section>
        <section><h4 id="two">Two</h4><p>Pellentesque habitant morbi tristique senectus et netus ... metus</p></section>
        <section><h4 id="three">Three</h4><p>Pellentesque habitant morbi tristique senectus et netus ... metus</p></section>
        <section><h4 id="four">Four</h4><p>Pellentesque habitant morbi tristique senectus et netus ... metus</p></section>
   </div>
</div>
 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script>
  $('div#scroll-able').scrollspy({ target: '#target_nav' });
</script>
</body>


저작자 표시
신고
현재 0 개의 댓글이 있습니다.
Comment

Blog

[BootStrap 3] popover live

2016.06.19 18:12 Development/WebUI FrameWork | BootStrap


부트스트랩 팝오버 컴포넌트를 사용하려다 보면, live / on 으로 이벤트를 바인딩 해야할 경우가 있다.

jsFiddle 에 누가 올려놓음. 링크


그래서~ 아래와 같이


HTML

<div id="popover-triggers">
    <a class="btn has-popover" data-content="Hello world">Initial trigger</a>
</div>
<a class="btn btn-orange add-one">Add new Popover trigger</a>
$('body').popover({
    selector: '.has-popover',
    trigger: 'hover'
});

$('.add-one').on('click', function () {
    $('#popover-triggers').append("Added trigger")
;});


저작자 표시
신고
현재 0 개의 댓글이 있습니다.
Comment

Blog

[BootStrap] Tooltip Styling

2016.06.19 18:06 Development/WebUI FrameWork | BootStrap


부트스트랩 툴팁에 대한 스타일링~


HTML

<a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom" class="red-tooltip">Tooltip on bottom</a>


CSS


.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
.red-tooltip + .tooltip > .tooltip-arrow { border-bottom-color:#f00; }

JS


$(document).ready(function(){
    $("a").tooltip();
});
저작자 표시
신고
현재 0 개의 댓글이 있습니다.
Comment

Blog

Metro UI CSS 2.0 BootStrap - Guide 1. Base CSS | 1. General CSS

2014.06.17 17:34 Development/WebUI FrameWork | BootStrap


Metro UI CSS 2.0 BootStrap Guide


Base CSS

General 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
  • *-darkPink
  • *-darkViolet
  • *-darkBlue
  • *-lightBlue
  • *-lightTeal
  • *-lightOlive
  • *-lightOrange
  • *-lightPink
  • *-lightRed
  • *-lightGreen

위 전역 색상 설정 클래스들을 사용하기에 규칙은 다음과 같습니다.


대상-컬러

대상-액션-컬러


대상

fg : 요소의 폰트 및 아이콘

bg : 요소의 배경

액션

hover : 마우스 오버시

active : 링크나 버튼에 대하여 실행 이벤트가 발생했을때

focus : 요소에 포커스가 발생했을때


해서 결과적으로는 녹색의 제목을 설정한다면 다음과 같다.

이 글은 제목 입니다.




저작자 표시
신고
현재 0 개의 댓글이 있습니다.
Comment

Blog

Metro UI CSS 2.0 BootStrap - Guide 1. Base CSS | Requirements

2014.06.17 17:19 Development/WebUI FrameWork | BootStrap


Metro UI CSS 2.0 BootStrap Guide

본문 : http://metroui.org.ua/


※ 가끔씩 여기 웹사이트가 에러날때는 식겁합니다. 열심히 보고 하는데, 찾을 수 없다고 할때가 가끔 있더군요.

해서 파일 다운로드는 및 가이드를 볼 수가 없게되면;; 어휴;;

이 부트스트랩 기반으로 개발된 웹서비스가.. 상상도 하기 싫군요.


해서 번역은 아니고 그냥 제가 가이드를 보면서 이해한 정도의 수준으로만 가이드 형식의 포스팅을 합니다.

캡쳐의 대장정이 될듯하네요. ㄷㄷㄷ;;



Base CSS

Requirements


Folder Structure - 폴더 구조


일단 기본적으로 빨간 밑줄 가있는 파일들은 모두 필요하다고 생각하시면 될 것 같습니다.


DOCTYPE - 문서형식

HTML 문서형식은 HTML5 의 문서 타입의 사용을 필요로 합니다.


<!DOCTYPE html>

<html>


Javascript - 자바스크립트

jQuery 2.0 플러그인과 jQuery UI 플러그인을 받아 적용시킵니다.


Namespace - 네임스페이스

BODY 요소에 metro 클래스를 추가해 주면 끝.

body class="metro"


저작자 표시
신고
현재 0 개의 댓글이 있습니다.
Comment

Blog

메트로UI (MetroUI) 부트스트랩

2014.03.14 12:40 Development/WebUI FrameWork | BootStrap


윈도우8 스타일의 웹사이트를 구현하려던 도중 메트로UI 도 부트스트랩이 있더라구요.

이미 많은 분들이 알고 사용하고 계시겠지만 꾸역꾸역 포스팅합니다. 

이미지를 클릭하시면 링크로 이동합니다.



상단의 네비게이션을 보면 다음과 같습니다.

  • Base CSS
    Requirements : 부트스트랩을 설치하고 웹페이지에 적용시키는 과정설명
    General CSS : Global 로 사용하는 스타일, 그리드 구성, 타이포그라피, 테이블, 폼, 버튼, 이미지
    Responsive : 부트스트랩은 반응형을 지원한다. 화면크기(스크린 사이즈)에 반응하는 크기등
    Icons : 개인적으로 이 부투스트랩을 사용하며, 제일 편하고 고마움을 느끼고 있는 이 아이콘들.
    빠른 속도로 UI 를 구성하기에 너무 편리하게 되어있습니다.
  • Components - 컴포넌트형식으로 모듈단으로 구성되어 있습니다. 여기 첫번째 메뉴에 나오는 타일.
    메트로의 꽃이라 할수 있는 타일과 다양한 컴포넌트들이 설명되있다.
  • Examples : 각각의 컴포넌트들을 구동시켜 예제로 표시되어있다. 근데;; 코드설명이 없어 자꾸 여기서
    요소검사기를 켜야해서 좀 짜증나기는 한다.
흠.. 더이상 설명은 힘드네. 다음 포스팅 부터는 차례대로 적용하는 과정을 포스팅하겠습니다.


저작자 표시
신고
현재 2 개의 댓글이 있습니다.

softsky 2014.03.18 14:26 신고

잘 사용하겠습니다. 감사합니다~


Comment