<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.js"></script><style>.form-inline{margin:auto 0 auto auto;}
/* .form-inline{margin:auto;} */</style></head><body><navclass="navbar navbar-expand-sm bg-dark navbar-dark"><!-- Brand --><aclass="navbar-brand"href="#">Logo</a><!-- Links --><ulclass="navbar-nav"><liclass="nav-item"><aclass="nav-link"href="#">Link 1</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link 2</a></li><!-- Dropdown --><liclass="nav-item dropdown"><divclass="nav-link dropdown-toggle"data-toggle="dropdown">Dropdown link
</div><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Link 1</a><aclass="dropdown-item"href="#">Link 2</a><aclass="dropdown-item"href="#">Link 3</a></div></li></ul><formclass="form-inline"action="#"><inputclass="form-control mr-sm-2"type="text"placeholder="Search"><buttonclass="btn btn-success"type="submit">Search</button></form></nav><br><divclass="container"><h3>Navbar With Dropdown</h3><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p></div></body></html>
navbar top만 고정 브라우저 좌우너비에 따라 컨텐츠 일부 이동됨
Top fixed Navbar
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.js"></script><style>.navtop {position:fixed; top:0; left:0; width:100%;}
</style></head><bodystyle="height: 1500px;"><!-- <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom"> --><!-- <nav class="navbar navbar-expand-sm bg-dark navbar-dark navtop"> --><navclass="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"><!-- fixed-top : 브라우저 상단 팝업고정 z-index:1030; --><aclass="navbar-brand"href="#">Logo</a><ulclass="navbar-nav"><liclass="nav-item"><aclass="nav-link"href="#">Link 1</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link 2</a></li></ul></nav><br><divclass="container"style="margin-top:80px;"><h1>Top Fixed Navbar</h1><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p></div></body></html></head><body></body></html>
;;
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.js"></script></head><bodystyle="height: 1500px;"><divclass="container-fluid"><br><h1>Sticky Navbar</h1><p>navbar의 상단 위치가 브라우저의 top에위치하면 붙어서 그대로 유지된다.</p><p>IE11 이전의 버전에서는 이 클래스가 작동하지 않는다.</p></div><navclass="navbar navbar-expand-sm bg-dark navbar-dark sticky-top"><aclass="navbar-brand"href="#">Logo</a><ulclass="navbar-nav"><liclass="nav-item"><aclass="nav-link"href="#">Link 1</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link 2</a></li></ul></nav><divclass="container"><br><h1>Top Fixed Navbar</h1><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p><p>This example adds a dropdown menu in the navbar.</p></div></body></html></head><body></body></html>
