VSCode_부트스트랩. 네비게이션 2(예제)
<!doctype html>
<html lang="ko-kr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>부트스트랩</title>
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/kfonts2.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery library -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- bootstrap.js -->
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-md bg-light navbar-light fixed-top">
<a class="navbar-brand" href="#">로고</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">메뉴 1 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">서브메뉴 1</a></li>
<li><a class="dropdown-item" href="#">서브메뉴 2</a></li>
<li><a class="dropdown-item" href="#">서브메뉴 3</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">메뉴 2 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">서브메뉴 1</a></li>
<li><a class="dropdown-item" href="#">서브메뉴 2</a></li>
<li><a class="dropdown-item" href="#">서브메뉴 3</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">메뉴 3 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">서브메뉴 1</a></li>
<li><a class="dropdown-item" href="#">서브메뉴 2</a></li>
<li><a class="dropdown-item" href="#">서브메뉴 3</a></li>
</ul>
</li>
</ul>
<form class="form-inline" role="search">
<div class="form-group">
<input type="text" class="form-control mr-sm-2" placeholder="검색">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- /.navbar-collapse -->
</nav>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque non orci interdum, pharetra dui nec, eleifend ligula.
Integer rutrum nunc a mi luctus vehicula. Aenean ut odio euismod,
fringilla leo quis, tincidunt tellus. Pellentesque ultricies lectus
non faucibus semper. Ut egestas turpis sed purus dignissim, quis
vehicula odio convallis. Suspendisse egestas rutrum velit sit amet
cursus. Suspendisse a sapien ac enim pretium egestas. Mauris eget
risus ut velit molestie pretium.</p>
<p>Integer ac molestie orci. Sed eget suscipit ante. Donec
suscipit lectus sed lectus elementum mollis. Vivamus tempor libero
vitae ligula rhoncus sollicitudin. Mauris pretium eros non mauris
pharetra, sit amet iaculis sapien egestas. Maecenas sodales augue at
sapien facilisis, ut venenatis justo sodales. Nam est mi, semper at
enim tincidunt, faucibus hendrerit risus. Morbi ligula libero,
laoreet non libero in, adipiscing sagittis eros. In hac habitasse
platea dictumst. Aenean nec accumsan mi. Nam dapibus mattis
vestibulum. Duis eget purus volutpat, cursus nisi quis, ullamcorper
diam. Cras commodo sodales quam, eget consectetur lorem laoreet vel.
Curabitur rhoncus metus vitae eleifend porttitor. Donec congue orci
id tortor laoreet, et fermentum lectus tincidunt. Nullam ac tincidunt
ante.</p>
<p>Aliquam erat volutpat. Duis tincidunt mattis orci et lacinia.
Praesent posuere fringilla dui ut vestibulum. Maecenas eleifend odio
id tincidunt cursus. Donec molestie orci nulla, sed lobortis libero
accumsan et. Quisque libero nisi, molestie a elit vel, ultricies
mollis ipsum. Praesent semper massa et pharetra aliquet.</p>
<p>Aliquam et fringilla odio. Integer tristique vehicula posuere.
Aenean vulputate a lectus sed vulputate. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos.
Aliquam tincidunt dui vitae viverra mattis. Sed eget enim enim.
Curabitur blandit turpis quis metus tincidunt, quis egestas tortor
gravida. Maecenas fermentum turpis justo, vel fermentum massa
scelerisque eget. Vivamus auctor, tortor vel porttitor cursus, sem
augue faucibus turpis, sed venenatis ante lacus in augue. Duis
faucibus tortor non magna faucibus dictum. Aenean at dictum ligula.
Maecenas at arcu massa. In et fermentum quam, a varius risus. Mauris
ut turpis et sem tristique scelerisque. Aenean dui erat, laoreet ac
faucibus eu, adipiscing ac dolor.</p>
<p>Etiam justo orci, accumsan a lacinia ac, suscipit id turpis.
Nunc auctor erat id risus cursus mollis. Pellentesque semper massa a
semper sodales. Proin pretium orci dolor, in lacinia tellus tincidunt
non. Praesent pretium nec sem vitae consectetur. Suspendisse ut
vestibulum libero. Ut eu eleifend enim, in dapibus nibh. Nullam
congue volutpat nisi sit amet iaculis. Nullam dapibus iaculis lectus
sed aliquam. Ut ut eros et lectus posuere vestibulum in et felis.
Etiam eu est iaculis, faucibus lectus ac, ultrices odio.</p>
</article>
</div>
</body>
</html>
Author And Source
이 문제에 관하여(VSCode_부트스트랩. 네비게이션 2(예제)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@nugoory20/VSCode부트스트랩.-네비게이션-2예제저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
