네비게이션 바 샘플 <nav class ="navbar navbar-expand-lg navbar-light bg-light" >
<a class ="navbar-brand" href ="#" > Navbar</a >
<button class ="navbar-toggler" type ="button" data-toggle ="collapse" data-target ="#navbarSupportedContent" aria-controls ="navbarSupportedContent" aria-expanded ="false" aria-label ="Toggle navigation" >
<span class ="navbar-toggler-icon" > </span >
</button >
<div class ="collapse navbar-collapse" id ="navbarSupportedContent" >
<ul class ="navbar-nav mr-auto" >
<li class ="nav-item active" >
<a class ="nav-link" href ="#" > Home <span class ="sr-only" > (current)</span > </a >
</li >
<li class ="nav-item" >
<a class ="nav-link" href ="#" > Link</a >
</li >
<li class ="nav-item dropdown" >
<a class ="nav-link dropdown-toggle" href ="#" id ="navbarDropdown" role ="button" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" >
Dropdown
</a >
<div class ="dropdown-menu" aria-labelledby ="navbarDropdown" >
<a class ="dropdown-item" href ="#" > Action</a >
<a class ="dropdown-item" href ="#" > Another action</a >
<div class ="dropdown-divider" > </div >
<a class ="dropdown-item" href ="#" > Something else here</a >
</div >
</li >
<li class ="nav-item" >
<a class ="nav-link disabled" href ="#" tabindex ="-1" aria-disabled ="true" > Disabled</a >
</li >
</ul >
<form class ="form-inline my-2 my-lg-0" >
<input class ="form-control mr-sm-2" type ="search" placeholder ="Search" aria-label ="Search" >
<button class ="btn btn-outline-success my-2 my-sm-0" type ="submit" > Search</button >
</form >
</div >
</nav >
브랜드 <!-- As a link -->
<nav class ="navbar navbar-light bg-light" >
<a class ="navbar-brand" href ="#" > Navbar</a >
</nav >
<!-- As a heading -->
<nav class ="navbar navbar-light bg-light" >
<span class ="navbar-brand mb-0 h1" > Navbar</span >
</nav >
<!-- Just an image -->
<nav class ="navbar navbar-light bg-light" >
<a class ="navbar-brand" href ="#" >
<img src ="/docs/4.2/assets/brand/bootstrap-solid.svg" width ="30" height ="30" alt ="" >
</a >
</nav >
<!-- Image and text -->
<nav class ="navbar navbar-light bg-light" >
<a class ="navbar-brand" href ="#" >
<img src ="/docs/4.2/assets/brand/bootstrap-solid.svg" width ="30" height ="30" class ="d-inline-block align-top" alt ="" >
Bootstrap
</a >
</nav >
네비게이션 <nav class ="navbar navbar-expand-lg navbar-light bg-light" >
<a class ="navbar-brand" href ="#" > Navbar</a >
<button class ="navbar-toggler" type ="button" data-toggle ="collapse" data-target ="#navbarNav" aria-controls ="navbarNav" aria-expanded ="false" aria-label ="Toggle navigation" >
<span class ="navbar-toggler-icon" > </span >
</button >
<div class ="collapse navbar-collapse" id ="navbarNav" >
<ul class ="navbar-nav" >
<li class ="nav-item active" >
<a class ="nav-link" href ="#" > Home <span class ="sr-only" > (current)</span > </a >
</li >
<li class ="nav-item" >
<a class ="nav-link" href ="#" > Features</a >
</li >
<li class ="nav-item" >
<a class ="nav-link" href ="#" > Pricing</a >
</li >
<li class ="nav-item" >
<a class ="nav-link disabled" href ="#" tabindex ="-1" aria-disabled ="true" > Disabled</a >
</li >
</ul >
</div >
</nav >
<nav class ="navbar navbar-expand-lg navbar-light bg-light" >
<a class ="navbar-brand" href ="#" > Navbar</a >
<button class ="navbar-toggler" type ="button" data-toggle ="collapse" data-target ="#navbarNavAltMarkup" aria-controls ="navbarNavAltMarkup" aria-expanded ="false" aria-label ="Toggle navigation" >
<span class ="navbar-toggler-icon" > </span >
</button >
<div class ="collapse navbar-collapse" id ="navbarNavAltMarkup" >
<div class ="navbar-nav" >
<a class ="nav-item nav-link active" href ="#" > Home <span class ="sr-only" > (current)</span > </a >
<a class ="nav-item nav-link" href ="#" > Features</a >
<a class ="nav-item nav-link" href ="#" > Pricing</a >
<a class ="nav-item nav-link disabled" href ="#" tabindex ="-1" aria-disabled ="true" > Disabled</a >
</div >
</div >
</nav >
<nav class ="navbar navbar-expand-lg navbar-light bg-light" >
<a class ="navbar-brand" href ="#" > Navbar</a >
<button class ="navbar-toggler" type ="button" data-toggle ="collapse" data-target ="#navbarNavDropdown" aria-controls ="navbarNavDropdown" aria-expanded ="false" aria-label ="Toggle navigation" >
<span class ="navbar-toggler-icon" > </span >
</button >
<div class ="collapse navbar-collapse" id ="navbarNavDropdown" >
<ul class ="navbar-nav" >
<li class ="nav-item active" >
<a class ="nav-link" href ="#" > Home <span class ="sr-only" > (current)</span > </a >
</li >
<li class ="nav-item" >
<a class ="nav-link" href ="#" > Features</a >
</li >
<li class ="nav-item" >
<a class ="nav-link" href ="#" > Pricing</a >
</li >
<li class ="nav-item dropdown" >
<a class ="nav-link dropdown-toggle" href ="#" id ="navbarDropdownMenuLink" role ="button" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" >
Dropdown link
</a >
<div class ="dropdown-menu" aria-labelledby ="navbarDropdownMenuLink" >
<a class ="dropdown-item" href ="#" > Action</a >
<a class ="dropdown-item" href ="#" > Another action</a >
<a class ="dropdown-item" href ="#" > Something else here</a >
</div >
</li >
</ul >
</div >
</nav >
폼
<nav class ="navbar navbar-light bg-light" >
<form class ="form-inline" >
<input class ="form-control mr-sm-2" type ="search" placeholder ="Search" aria-label ="Search" >
<button class ="btn btn-outline-success my-2 my-sm-0" type ="submit" > Search</button >
</form >
</nav >
<nav class ="navbar navbar-light bg-light" >
<a class ="navbar-brand" > Navbar</a >
<form class ="form-inline" >
<input class ="form-control mr-sm-2" type ="search" placeholder ="Search" aria-label ="Search" >
<button class ="btn btn-outline-success my-2 my-sm-0" type ="submit" > Search</button >
</form >
</nav >
<nav class ="navbar navbar-light bg-light" >
<form class ="form-inline" >
<div class ="input-group" >
<div class ="input-group-prepend" >
<span class ="input-group-text" id ="basic-addon1" > @</span >
</div >
<input type ="text" class ="form-control" placeholder ="Username" aria-label ="Username" aria-describedby ="basic-addon1" >
</div >
</form >
</nav >
<nav class ="navbar navbar-light bg-light" >
<form class ="form-inline" >
<button class ="btn btn-outline-success" type ="button" > Main button</button >
<button class ="btn btn-sm btn-outline-secondary" type ="button" > Smaller button</button >
</form >
</nav >
텍스트 Navbar text with an inline element
<nav class ="navbar navbar-light bg-light" >
<span class ="navbar-text" >
Navbar text with an inline element
</span >
</nav >
<nav class ="navbar navbar-expand-lg navbar-light bg-light" >
<a class ="navbar-brand" href ="#" > Navbar w/ text</a >
<button class ="navbar-toggler" type ="button" data-toggle ="collapse" data-target ="#navbarText" aria-controls ="navbarText" aria-expanded ="false" aria-label ="Toggle navigation" >
<span class ="navbar-toggler-icon" > </span >
</button >
<div class ="collapse navbar-collapse" id ="navbarText" >
<ul class ="navbar-nav mr-auto" >
<li class ="nav-item active" >
<a class ="nav-link" href ="#" > Home <span class ="sr-only" > (current)</span > </a >
</li >
<li class ="nav-item" >
<a class ="nav-link" href ="#" > Features</a >
</li >
<li class ="nav-item" >
<a class ="nav-link" href ="#" > Pricing</a >
</li >
</ul >
<span class ="navbar-text" >
Navbar text with an inline element
</span >
</div >
</nav >
컬러 스키마 <nav class ="navbar navbar-dark bg-dark" >
<!-- Navbar content -->
</nav >
<nav class ="navbar navbar-dark bg-primary" >
<!-- Navbar content -->
</nav >
<nav class ="navbar navbar-light" style ="background-color: #e3f2fd;" >
<!-- Navbar content -->
</nav >
컨테이너 <div class ="container" >
<nav class ="navbar navbar-expand-lg navbar-light bg-light" >
<a class ="navbar-brand" href ="#" > Navbar</a >
</nav >
</div >
<nav class ="navbar navbar-expand-lg navbar-light bg-light" >
<div class ="container" >
<a class ="navbar-brand" href ="#" > Navbar</a >
</div >
</nav >
위치 <nav class ="navbar navbar-light bg-light" >
<a class ="navbar-brand" href ="#" > Default</a >
</nav >
<nav class ="navbar fixed-top navbar-light bg-light" >
<a class ="navbar-brand" href ="#" > Fixed top</a >
</nav >
<nav class ="navbar fixed-bottom navbar-light bg-light" >
<a class ="navbar-brand" href ="#" > Fixed bottom</a >
</nav >
<nav class ="navbar sticky-top navbar-light bg-light" >
<a class ="navbar-brand" href ="#" > Sticky top</a >
</nav >
반응형 동작 토글러 <nav class ="navbar navbar-expand-lg navbar-light bg-light" >
<button class ="navbar-toggler" type ="button" data-toggle ="collapse" data-target ="#navbarTogglerDemo01" aria-controls ="navbarTogglerDemo01" aria-expanded ="false" aria-label ="Toggle navigation" >
<span class ="navbar-toggler-icon" > </span >
</button >
<div class ="collapse navbar-collapse" id ="navbarTogglerDemo01" >
<a class ="navbar-brand" href ="#" > Hidden brand</a >
<ul class ="navbar-nav mr-auto mt-2 mt-lg-0" >
<li class ="nav-item active" >
<a class ="nav-link" href ="#" > Home <span class ="sr-only" > (current)</span > </a >
</li >
<li class ="nav-item" >
<a class ="nav-link" href ="#" > Link</a >
</li >
<li class ="nav-item" >
<a class ="nav-link disabled" href ="#" tabindex ="-1" aria-disabled ="true" > Disabled</a >
</li >
</ul >
<form class ="form-inline my-2 my-lg-0" >
<input class ="form-control mr-sm-2" type ="search" placeholder ="Search" aria-label ="Search" >
<button class ="btn btn-outline-success my-2 my-sm-0" type ="submit" > Search</button >
</form >
</div >
</nav >
<nav class ="navbar navbar-expand-lg navbar-light bg-light" >
<a class ="navbar-brand" href ="#" > Navbar</a >
<button class ="navbar-toggler" type ="button" data-toggle ="collapse" data-target ="#navbarTogglerDemo02" aria-controls ="navbarTogglerDemo02" aria-expanded ="false" aria-label ="Toggle navigation" >
<span class ="navbar-toggler-icon" > </span >
</button >
<div class ="collapse navbar-collapse" id ="navbarTogglerDemo02" >
<ul class ="navbar-nav mr-auto mt-2 mt-lg-0" >
<li class ="nav-item active" >
<a class ="nav-link" href ="#" > Home <span class ="sr-only" > (current)</span > </a >
</li >
<li class ="nav-item" >
<a class ="nav-link" href ="#" > Link</a >
</li >
<li class ="nav-item" >
<a class ="nav-link disabled" href ="#" tabindex ="-1" aria-disabled ="true" > Disabled</a >
</li >
</ul >
<form class ="form-inline my-2 my-lg-0" >
<input class ="form-control mr-sm-2" type ="search" placeholder ="Search" >
<button class ="btn btn-outline-success my-2 my-sm-0" type ="submit" > Search</button >
</form >
</div >
</nav >
<nav class ="navbar navbar-expand-lg navbar-light bg-light" >
<button class ="navbar-toggler" type ="button" data-toggle ="collapse" data-target ="#navbarTogglerDemo03" aria-controls ="navbarTogglerDemo03" aria-expanded ="false" aria-label ="Toggle navigation" >
<span class ="navbar-toggler-icon" > </span >
</button >
<a class ="navbar-brand" href ="#" > Navbar</a >
<div class ="collapse navbar-collapse" id ="navbarTogglerDemo03" >
<ul class ="navbar-nav mr-auto mt-2 mt-lg-0" >
<li class ="nav-item active" >
<a class ="nav-link" href ="#" > Home <span class ="sr-only" > (current)</span > </a >
</li >
<li class ="nav-item" >
<a class ="nav-link" href ="#" > Link</a >
</li >
<li class ="nav-item" >
<a class ="nav-link disabled" href ="#" tabindex ="-1" aria-disabled ="true" > Disabled</a >
</li >
</ul >
<form class ="form-inline my-2 my-lg-0" >
<input class ="form-control mr-sm-2" type ="search" placeholder ="Search" aria-label ="Search" >
<button class ="btn btn-outline-success my-2 my-sm-0" type ="submit" > Search</button >
</form >
</div >
</nav >
외부 컨텐츠
Collapsed content Toggleable via the navbar brand. <div class ="pos-f-t" >
<div class ="collapse" id ="navbarToggleExternalContent" >
<div class ="bg-dark p-4" >
<h5 class ="text-white h4" > Collapsed content</h5 >
<span class ="text-muted" > Toggleable via the navbar brand.</span >
</div >
</div >
<nav class ="navbar navbar-dark bg-dark" >
<button class ="navbar-toggler" type ="button" data-toggle ="collapse" data-target ="#navbarToggleExternalContent" aria-controls ="navbarToggleExternalContent" aria-expanded ="false" aria-label ="Toggle navigation" >
<span class ="navbar-toggler-icon" > </span >
</button >
</nav >
</div >