'Bootstrap'에 해당되는 글 4건

  1. 2014.09.29 bootstrap-datepicker를 modal에 띄울때 hidden 현상
  2. 2014.06.23 Bootstrap3 Accordion에 chevron 추가하기
  3. 2012.12.07 Bootstrap Tab 사용
  4. 2012.12.07 Bootstrap Dropdown 사용
2014.09.29 18:25

bootstrap-datepicker를 modal에 띄울때 hidden 현상

Boostrap 기반 datepicker

bootstrap-datepicker

_images/demo_head.png


근데 요놈을 modal 위에 띄우면 modal 뒤로 숨는 현상이 있다.

구글링을 해결 방법이 z-index를 수정하면 된다.





[이미지 출처] bootstrap-datepicker

[참고] Twitter Bootstrap Datepicker within modal window

Trackback 0 Comment 0
2014.06.23 13:31

Bootstrap3 Accordion에 chevron 추가하기

자바스크립트

function toggleChevron(e) {

    $(e.target)

        .prev('.panel-heading')

        .find("i.indicator")

        .toggleClass('glyphicon-chevron-down glyphicon-chevron-up');

}

$('#accordion').on('hidden.bs.collapse', toggleChevron);

$('#accordion').on('shown.bs.collapse', toggleChevron);


[출처] Bootstrap 3 accordion chevron icons

Trackback 0 Comment 0
2012.12.07 11:12

Bootstrap Tab 사용

1. Page에 bootstrap-tab.js 링크 추가

http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js


2. Tab을 사용하기 위한 html 작성

<!-- Tab Title -->
<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<!-- Tab Contents -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>First Tab</p>
    </div>
    <div class="tab-pane fade" id="profile">
        <p>Second Tab</p>
    </div>
</div>


3. 작성한 html과 tab event을 연결하는 javascript 함수 작성

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})


[참고] Bootstrap Tabs

Trackback 0 Comment 0
2012.12.07 10:16

Bootstrap Dropdown 사용

1. Page에 bootstrap-dropdown.js 링크 추가

http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js


2. Dropdown을 사용하기 위한 html 작성

<div id="navbar-example" class="navbar navbar-static">
    <div class="navbar-inner">
        <div class="container" style="width: auto;">
            <a class="brand" href="#">Project Name</a>
            <ul class="nav" role="navigation">
                <li class="dropdown"><a id="drop1" href="#" role="button"
                    class="dropdown-toggle" data-toggle="dropdown">Board<b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                        <li><a tabindex="-1" href="http://google.com">Action</a></li>
                        <li><a tabindex="-1" href="#anotherAction">Another
                                action</a></li>
                        <li><a tabindex="-1" href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a tabindex="-1" href="#">Separated link</a></li>
                    </ul>
                </li>
                <li class="dropdown"><a href="#" id="drop2" role="button"
                    class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
                        <li><a tabindex="-1" href="#">Action</a></li>
                        <li><a tabindex="-1" href="#">Another action</a></li>
                        <li><a tabindex="-1" href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a tabindex="-1" href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>


3. 작성한 html을 Dropdown화(?) 하기 위해 javascript 함수 호출

$('.dropdown-toggle').dropdown()



[참고] Bootstrap Dropdown

Trackback 0 Comment 0