일상다반사(日常茶飯事) > 스터디 > BootStrap http://nuno21.net/bbs/board.php?bo_table=bootstrap ko BootStrap (2021-02-08 12:37:52) 부트스트랩 modal 오픈시 여백, 스크롤바 문제 http://nuno21.net/bbs/board.php?bo_table=bootstrap&wr_id=4 .modal-open{

    overflow: hidden;

    padding-right:0 !important;

}

]]> 최고관리자 2021-02-08T12:37:52+09:00 모달창(bootstrap modal) ESC, 클릭 막기 http://nuno21.net/bbs/board.php?bo_table=bootstrap&wr_id=3 Add to HTML element


<div id="modal_id" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">




OR control with JavaScript


$('#modal_id').modal({ backdrop: 'static', keyboard: false });

]]> nuno 2019-04-29T15:44:49+09:00 부트스트랩 메인메뉴 오버시 서브메뉴 보이기 http://nuno21.net/bbs/board.php?bo_table=bootstrap&amp;wr_id=2 부트스트랩(bootstrap)에서 기본적으로 제공하는 메뉴는 메뉴를 클릭해야 서브메뉴가 보여지는데
메뉴를 클릭하지 않고 마우스 오버시 서브메뉴가 보여지게 하는 방법은 아래 css를 추가하면 됩니다.
 
<style>
ul.nav li.dropdown:hover > ul.dropdown-menu{display:block; margin:0;}
</style>
 
 
마우스 오버시 서브메뉴가 출력되게 했다면 메인메뉴 클릭시 해당링크로 이동하게 하는 방법은
data-toggle="dropdown" 부분을 삭제하면 됩니다.
<a href="#" class="dropdown-toggle" data-toggle="dropdown">메뉴1 <b class="caret"></b></a>
]]> nuno 2016-04-05T09:53:53+09:00 부트스트랩3(Bootstrap) 메뉴(navbar) 색상을 바꾸는 방법 http://nuno21.net/bbs/board.php?bo_table=bootstrap&amp;wr_id=1
부트스트랩3 (Bootstrap) 네비게이션바 색상을 바꾸는 방법입니다.
 
<기본색상>
#F8F8F8 : navbar background
#E7E7E7 : navbar border
#777 : default color
#333 : hover color (#5E5E5E for .nav-brand)
#555 : active color
#D5D5D5 : active background
 
아래 css를 추가하여 색상을 수정합니다.
<style>
/* navbar */
.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}
/* title */
.navbar-default .navbar-brand {
    color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
}
/* link */
.navbar-default .navbar-nav > li > a {
    color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #D5D5D5;
}
/* caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #777;
    border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}
/* mobile version */
.navbar-default .navbar-toggle {
    border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
}
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #333;
    }
}
</style>
]]> nuno 2016-04-05T09:53:04+09:00