728x90
navbar
그리드 시스템을 제외하면 가장 대표적인 부트스트랩 컴포넌트인 내비게이션 바
navbar-brand
제목 같은 걸 생성할 때 쓰는 class. nav만 생성하면 된다. div로 대신할 수 있지만 nav 클래스를 넣은 nav가 더 낫다.
navbar-light와 narbar-dark 중 선택해야 한다. 배경색도 골라야한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Navbars</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"><link rel="stylesheet" href="basics.css">
<link rel="stylesheet" href="nav.css">
</head>
<body>
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<nav class="navbar navbar-dark bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>h1클래스를 사용해 크기를 키울 수 있지만 앵커 태그로 두었다. navbar-dark를 사용하니 텍스트의 색상이 변경되었다. navbar-light와 nav-dark는 배경색을 바꾸는 게 아니라 내비게이션 바의 문자를 바꾼다.
앵커 태그인 navbar-brand 안에 이미지를 삽입하고 링크 여러개를 추가하면 된다. (내비게이션에서 흔한 일이다.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Navbars</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"><link rel="stylesheet" href="basics.css">
<link rel="stylesheet" href="nav.css">
</head>
<body>
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<nav class="navbar navbar-dark bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse">
<div class="navbar-nav">
<a href="Home" class="nav-item nav-link">Home</a>
<a href="About" class="nav-item nav-link">About</a>
<a href="Contact" class="nav-item nav-link">Contact</a>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>collapse는 부트스트랩의 일부이다. collapse class로 인해 Home, About, Contact가 사라졌다. 왜냐하면 collpase class때문이다. collapse를 사용해 겹치거나 드러내거나 숨길 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Navbars</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"><link rel="stylesheet" href="basics.css">
<link rel="stylesheet" href="nav.css">
</head>
<body>
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse">
<div class="navbar-nav">
<a href="Home" class="nav-item nav-link">Home</a>
<a href="About" class="nav-item nav-link">About</a>
<a href="Contact" class="nav-item nav-link">Contact</a>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>navbar 배경색을 바꿨다. 그리고 navbar-expand-lg를 추가했다. lg를 입력했기 때문에 창을 크게하면 지금처럼 보이고 창을 작게하면 사라진다.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<div class="navbar-nav">
<a href="Home" class="nav-item nav-link">Home</a>
<a href="About" class="nav-item nav-link">About</a>
<a href="Contact" class="nav-item nav-link">Contact</a>
</div>
</div>
</nav>네비게이션 바에 toggler 버튼을 추가했다. 그러면 햄버거 아이콘 → ≡ 이 생성된다.
data-target 속성과 data-toggle을 이용한다. data-toggle="collapse"라고 적고 data-target에는 확장하거나 collapse하려는 것의 ID를 입력한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Navbars</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"><link rel="stylesheet" href="basics.css">
<link rel="stylesheet" href="nav.css">
</head>
<body>
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#expandme">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="expandme">
<div class="navbar-nav">
<a href="Home" class="nav-item nav-link">Home</a>
<a href="About" class="nav-item nav-link">About</a>
<a href="Contact" class="nav-item nav-link">Contact</a>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>창을 작게해 햄버거 모양을 누르니 Home, About, Contact가 펼쳐져 나왔다. 이것을 하려면 JS가 있어야 한다.
다른 콘텐츠를 여기 넣으면 이 div 안에 들어가는 모든 것은 collapse가 된다.
(21번째
<div class="collapse navbar-collapse" id="expandme">
<div class="navbar-nav">
<a href="Home" class="nav-item nav-link">Home</a>
<a href="About" class="nav-item nav-link">About</a>
<a href="Contact" class="nav-item nav-link">Contact</a>
</div>
)
<form class="form-inline ml-auto">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>fixed-top
내비게이션 바에 검색 창을 만들 수 있다. search 버튼의 배경 색 또한 바꿀 수 있다.
<body>
<!-- <nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav> -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#expandme">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="expandme">
<div class="navbar-nav">
<a href="Home" class="nav-item nav-link">Home</a>
<a href="About" class="nav-item nav-link">About</a>
<a href="Contact" class="nav-item nav-link">Contact</a>
</div>
<form class="form-inline ml-auto">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas aspernatur reprehenderit qui earum perferendis, assumenda tempora officiis illo incidunt quibusdam nihil expedita reiciendis magnam ut corrupti non repudiandae? Illum, deleniti!
Hic, expedita. Fuga totam laborum optio aperiam exercitationem eligendi provident recusandae porro illum nobis, magni repellat et accusantium voluptatum autem quibusdam consequuntur doloremque beatae? Similique accusantium aliquid iusto consectetur incidunt.
Nemo sit recusandae, est accusamus quaerat, necessitatibus reiciendis excepturi animi placeat atque consequatur quae delectus laboriosam. Quam quas a explicabo? Velit ipsam a ea quae animi error ex rem? Nulla!
Tempora aspernatur nesciunt, non suscipit veniam, sed nostrum quos debitis officia consequatur nisi magnam quaerat natus quibusdam quisquam laboriosam. Nisi placeat minima nulla, nostrum eligendi eveniet magnam magni et nam!
Voluptates, nisi quam expedita perferendis odio molestiae sapiente enim totam, omnis deserunt eveniet atque quasi quia dolorum nobis delectus amet cupiditate consequatur, ut unde blanditiis distinctio voluptas. Nemo, vitae ea?
Accusamus non perferendis, aspernatur corporis nihil ipsa dolorum in provident. Labore, quae voluptatem repellat dolor distinctio repudiandae ad sapiente minima officia repellendus sint, quia eum in facere! Nihil, maxime minus?
Rerum quia neque magni dolores aliquam exercitationem suscipit corrupti repellendus, pariatur voluptates reprehenderit odio? Beatae repudiandae quod sit molestias, ea eligendi possimus facilis magnam doloremque, tenetur accusantium, et corrupti natus.
Hic, mollitia. Pariatur reprehenderit facere, blanditiis repudiandae molestiae repellat ducimus exercitationem quaerat esse, alias consequatur laborum officia aut in eaque, fugiat enim quam nulla? Dolor, veniam! Ullam ratione iste at.
Libero necessitatibus quisquam consectetur, ut eaque doloremque excepturi deserunt dolores, obcaecati iure architecto illo optio ducimus culpa officia, autem dignissimos accusantium. Numquam nostrum officia ipsa consequuntur nam at, dolorum incidunt.
Maiores qui, ad eaque at quisquam delectus aliquid officiis nemo voluptate possimus magni illo dolor quaerat iusto eligendi veritatis dolorum dolore, quis earum laboriosam quas blanditiis nulla pariatur. Voluptatum, nostrum.
A doloremque, consectetur distinctio quia fugit natus explicabo exercitationem eos! Iusto rerum asperiores cumque sit aperiam, dolor optio dolores blanditiis sed placeat alias praesentium quae iste tempora, reiciendis nostrum incidunt.
Deleniti consequuntur alias eligendi, et odio laborum expedita! Voluptatem eveniet, deserunt asperiores delectus ad nesciunt quis numquam exercitationem earum molestiae expedita maxime esse cupiditate eius, ipsa impedit officia minima? Impedit!
A ullam deleniti labore assumenda facere deserunt! Nisi aliquid odit ratione ipsum? Saepe, voluptate aliquid laudantium, veritatis doloremque minima aspernatur itaque nam ipsum vero corrupti? Placeat minus expedita fuga reiciendis?
Accusamus vel fuga ipsum sed, harum, aliquid in deleniti facere, possimus doloremque cum dolor maiores eligendi provident molestiae voluptatum obcaecati sint sunt illum ducimus voluptate! Velit ex obcaecati minus distinctio.
Recusandae, repudiandae ipsum. Culpa error aut porro quod pariatur rem nam? Quia fuga debitis veniam cupiditate libero veritatis amet. Veritatis tempora quaerat voluptatum reprehenderit necessitatibus saepe tempore earum, eveniet ipsam!
Aut rem blanditiis doloremque autem culpa ipsa. Similique voluptas mollitia itaque deleniti necessitatibus in consequatur corrupti libero placeat labore ipsum, minus enim, totam quas cumque dolores dolorem distinctio voluptatem tempore?
Eveniet, quasi necessitatibus incidunt nesciunt nemo excepturi accusamus illum possimus vel, facilis saepe placeat maxime dicta quidem. Repellat, suscipit. Iusto nisi necessitatibus et, maiores atque maxime aspernatur totam vero iste!
Unde, laboriosam reiciendis cupiditate earum fugiat eligendi ducimus nesciunt vel, beatae totam voluptate! Obcaecati, iusto nobis. Facere iste dolorum ea vero dicta quasi tempore, ad sequi, repudiandae nam quam aliquam!
Magni corrupti illum sapiente soluta magnam alias dicta, laboriosam sed blanditiis repudiandae ipsa aliquid qui? Praesentium eaque deserunt, voluptatem vero commodi corporis suscipit eum. Exercitationem mollitia ducimus quam obcaecati saepe.
Quidem optio ipsa eaque, temporibus expedita neque atque quia, praesentium excepturi tenetur quae consectetur asperiores earum commodi sunt ea? In tempore tenetur vero nulla iure odit rerum nostrum eum molestias?
Fuga omnis in esse aliquam, nostrum magnam illo minus reiciendis dolor, atque debitis ea odit aspernatur recusandae qui cum reprehenderit obcaecati praesentium, maxime consectetur illum error optio! Commodi, cum cumque!
Laboriosam doloribus ut animi maxime optio illum aliquid a itaque, mollitia fugiat, nesciunt pariatur possimus suscipit doloremque sed? Maxime aspernatur iusto natus nam quae mollitia fugiat voluptatum nesciunt necessitatibus quo.
Est consequuntur expedita autem vel unde corporis nesciunt minus voluptas, maxime doloremque facilis sequi totam odio labore, laboriosam inventore quas quod neque quasi. Maxime sint dolor libero, minus dolore corporis.
Quisquam dignissimos neque voluptatum, sapiente ut esse necessitatibus corporis architecto pariatur veritatis odio quis sint consequatur a placeat voluptates quibusdam, eos nesciunt sit, nihil facilis ducimus! Quaerat earum cupiditate aut?
Animi cupiditate error perspiciatis nihil, ducimus, fuga, consectetur placeat praesentium repudiandae dolore itaque earum minima quos. Quos illum saepe sed animi, deserunt facilis impedit dolorum minima, fugit est a ad.
Sequi libero quos unde dolorem culpa, aliquid ipsum nemo sint vero odit impedit eveniet. Saepe placeat quo adipisci at fuga accusamus delectus rerum reiciendis, culpa, mollitia hic sunt quisquam distinctio.
Quos consequuntur sit deserunt harum id, illum, est fuga quidem tempore impedit laborum, facere distinctio! Perferendis quod minus aperiam eos enim? Similique nisi mollitia qui iste sint, dolore ut totam.
Dolorem eaque eum, excepturi esse repellat beatae ut. Architecto in hic laboriosam aperiam tenetur quos alias sit accusamus ex, quam neque nihil adipisci facilis natus veniam! Nam ipsam magnam similique?
Optio inventore temporibus nesciunt, eveniet a qui omnis aut ad dolorem, asperiores ut dolor molestiae quos? Libero quasi, sit consequatur illo adipisci earum ipsam debitis dolores dolorum, dolorem ipsa quis!
Perspiciatis, repellat porro a sunt sequi, maxime tempore illum neque asperiores qui iure consectetur nemo temporibus nobis magnam perferendis quo deserunt molestiae! Omnis cupiditate suscipit assumenda, cum voluptatibus autem eius.
Eligendi enim nulla qui modi quasi blanditiis! Nam repudiandae ipsam aperiam, quam et voluptatibus dolorem quo sit eaque facilis corrupti esse aliquid asperiores nisi velit libero expedita enim quis quisquam!
Libero doloribus sunt, eos delectus quisquam magni vel expedita, perferendis, facilis sequi illo? Itaque earum, ut, deserunt illo similique nostrum quam quaerat ipsum consectetur aspernatur quasi! Quis eum itaque tempora.
Atque amet mollitia explicabo ad praesentium, quod nostrum consectetur voluptatibus sed non nihil perferendis culpa labore? Blanditiis est vitae vero doloremque nihil vel perferendis eos rerum, officia quo consequatur explicabo.
Maiores hic, quas modi ab obcaecati dolores fugiat nostrum eveniet voluptate quod ducimus repudiandae magni alias consequuntur labore minus ipsa doloribus? Ipsam, explicabo consequatur sed architecto similique quam. Officia, ullam!
Enim alias unde veniam tempore voluptatibus quo voluptas quis quibusdam maiores tempora possimus, temporibus repudiandae, saepe earum labore nostrum! Molestiae alias aspernatur mollitia! In ad illum, repudiandae doloremque quaerat facere.
Laborum numquam necessitatibus, quo, laudantium assumenda nihil eos voluptatum repellendus quam ducimus quia nobis nulla minus rerum illo mollitia temporibus sint officiis id nesciunt ipsa deleniti perferendis impedit. Nulla, veritatis?
Qui nemo, laboriosam enim animi quibusdam expedita vero ipsam maxime nostrum inventore quo accusamus in, ratione doloribus cum amet. Dolorem minus et voluptate fuga aliquid excepturi nisi eos, consequatur natus?
Cumque impedit exercitationem quas dignissimos doloremque fuga, itaque dolorem nihil atque ex, consectetur consequuntur. Harum sapiente eaque expedita perferendis commodi dolorum autem quam at adipisci, ipsum praesentium deserunt necessitatibus dolore?
At aspernatur voluptas sapiente nihil quam aliquid fugit, quia et officia rem, ducimus magnam exercitationem iusto eos vel facilis eveniet nam odio nobis repellendus, temporibus quae minima. Enim, harum similique!
Quis ab, voluptas dolorem nulla fugiat facere sapiente architecto, aspernatur laudantium voluptatibus sint maiores fugit expedita amet ad debitis doloremque nisi, eius temporibus adipisci modi animi voluptates odit! Officiis, eaque.
Vel placeat nisi eaque incidunt libero iure autem, neque, culpa ipsum ipsam ipsa obcaecati voluptates, quam iusto reiciendis non totam quos sed. Exercitationem omnis ut ab facere ullam quasi distinctio.
Esse illo harum et aliquid corporis nesciunt molestias dolorum. Provident animi distinctio id laudantium placeat. Sed reprehenderit recusandae delectus. A quisquam adipisci, fugit iusto temporibus soluta facere neque expedita labore.
Nemo at blanditiis soluta incidunt, quis quibusdam quasi ex voluptatem voluptatum error, quia adipisci odit quisquam voluptas? Officiis, quae. Dolores corrupti voluptatum facere recusandae numquam blanditiis quae reiciendis rem officiis.
Suscipit odio nobis illo libero iusto et magnam eos incidunt culpa corrupti quo, praesentium similique quod harum nesciunt rerum aperiam possimus tenetur deleniti nemo deserunt sed reiciendis. Beatae, odio libero?
Soluta, fuga mollitia amet nihil nostrum omnis, dignissimos iure reprehenderit impedit esse accusamus fugit explicabo iste repudiandae culpa voluptatum sed atque dicta quaerat sequi? Quis provident voluptate reiciendis ut tempore.
Vitae explicabo tempore quo, culpa architecto minus possimus quod modi excepturi quam dolorem tenetur ea aperiam exercitationem cumque repudiandae nostrum molestiae, fuga sint dicta laudantium cupiditate, dolores ab ratione! Porro?
Autem, itaque quidem ad repudiandae, eveniet, voluptatem tenetur eum dolore omnis magni mollitia dolorum! Suscipit vero nulla incidunt odit fugiat laborum amet esse, excepturi error quibusdam earum deserunt illum nihil!
Ducimus assumenda iusto eveniet odio totam pariatur iure temporibus voluptatum fugiat, molestias expedita sint soluta, accusamus repellendus reiciendis itaque illo rem, facere omnis! Perferendis, exercitationem provident fugit blanditiis pariatur ea!
Minima, tempora itaque! Tenetur, saepe fugiat aperiam natus soluta unde autem ipsam modi nobis eos distinctio excepturi, amet placeat perspiciatis inventore fugit. Dolorem hic ipsam soluta placeat quaerat, itaque reiciendis?
Odit minima dolorem excepturi. Tempore excepturi, et provident nulla doloremque, ut ipsum doloribus pariatur aperiam autem ea totam esse nemo animi inventore suscipit rem earum vitae maxime quasi dolorum eveniet.
Labore, incidunt totam quam hic ipsam cupiditate, ducimus, sed itaque minima sequi ut! Reprehenderit aspernatur, quam accusantium quisquam expedita voluptatibus ducimus aliquam dolorum alias laboriosam facilis dignissimos et? Temporibus, voluptatum.
Corporis perspiciatis praesentium commodi porro? Unde vero molestiae adipisci hic. Nobis maxime architecto eum dolorum iusto dolorem repellendus pariatur, maiores optio quod ex eligendi quam laboriosam natus adipisci porro aliquam!
Illo consectetur, repellat quibusdam fugit fuga saepe. Earum doloremque consequuntur amet veniam esse aspernatur repudiandae? Perferendis nesciunt id culpa voluptatem ducimus. Ex neque molestias accusantium nesciunt distinctio nam facilis perferendis!
Vel ab non obcaecati similique laboriosam? Necessitatibus unde debitis eaque? Distinctio accusamus recusandae, ullam tempora iste eligendi deserunt, repudiandae praesentium excepturi corrupti non natus, dolorum earum adipisci asperiores error! Libero?
Fuga rerum distinctio, saepe inventore, maxime nisi ipsam sit assumenda deleniti officia vero numquam nemo incidunt dicta optio quam asperiores nam aliquid non fugit minus voluptas rem. Magnam, nulla assumenda.
Ullam quia excepturi reiciendis exercitationem cum ex, eligendi placeat nemo ea molestias ipsam sint ipsum numquam. Similique, laudantium. Autem ut totam, recusandae doloribus rerum iusto voluptatum at veniam ratione consequatur!
Beatae voluptates quia impedit harum voluptate esse, neque adipisci consequatur, nihil quo, expedita minus eum hic accusantium voluptatem fuga? Quos laboriosam perspiciatis incidunt magni facere, voluptatibus molestiae suscipit atque commodi?
Vitae nam, fugit harum dignissimos obcaecati cum ex modi beatae, omnis numquam, dolore eum? Molestias placeat cupiditate eum blanditiis iusto perferendis facilis ad tempore voluptates rerum incidunt, eveniet voluptate harum.
Dicta asperiores molestias vel vero impedit voluptas commodi. Aperiam quis ea expedita in iure ipsam nulla illo, totam excepturi! Quae tempora soluta cupiditate veritatis. Voluptatibus placeat praesentium aperiam hic blanditiis?
Autem impedit quae corporis debitis optio adipisci aperiam. Perferendis consequuntur incidunt possimus corrupti. Ipsa, fugiat natus odit quibusdam tenetur sed, reprehenderit neque numquam, iste rerum cupiditate doloremque! Quam, possimus eos.
Perferendis porro eius incidunt cum dicta architecto necessitatibus eveniet non error, aperiam quisquam inventore! Odit dolore animi ab maxime officiis adipisci neque libero soluta aspernatur id, inventore enim quas veritatis?
Ipsam numquam, rerum quia adipisci obcaecati velit accusamus ratione ea repudiandae totam officia facere, consequuntur ullam consectetur odio dignissimos eius error neque? Corrupti consectetur non numquam sed totam blanditiis ratione.
Animi asperiores aliquam dolorum a vero earum nobis consequatur excepturi aut voluptates odit dolores alias necessitatibus iste, sequi eveniet laboriosam corporis optio inventore nulla facilis ad est reprehenderit. Architecto, possimus?
Recusandae voluptas rerum sit, temporibus accusamus tempora voluptatem unde consequuntur ea molestiae voluptatibus quasi commodi facere voluptatum debitis doloribus, quam cupiditate. Odio dolor possimus ab illo, in dolore est veritatis!
Sed aliquid velit autem natus ullam enim dignissimos illo cupiditate suscipit. Voluptatibus, nam qui, dignissimos ducimus veniam, fuga suscipit doloribus delectus assumenda molestiae explicabo eos quam ipsum quibusdam corporis enim!
Nisi, ab suscipit odit quidem ad et quo iusto exercitationem velit repudiandae. Voluptatibus vel magnam exercitationem sed rem, quasi numquam adipisci neque, necessitatibus, magni quis asperiores nulla fuga molestiae deleniti?
Nemo, neque delectus ipsum eligendi amet est fugiat, iusto animi suscipit fuga non laborum tenetur expedita in corporis odio aspernatur libero beatae iure exercitationem veritatis. Nisi omnis consectetur nam fuga.
Odit sapiente facere mollitia, accusantium atque dignissimos velit soluta ipsa. Optio, quia nihil perferendis, ipsum veniam eius, aliquid non iste ut quos ex obcaecati vero? Amet impedit eius corrupti officia.
Esse quia fugiat hic laudantium voluptas repellendus consequuntur placeat natus, modi aliquam voluptates laborum at beatae? Neque totam praesentium et alias mollitia eius aspernatur hic nisi amet, consequuntur placeat perferendis.
Labore in ratione repudiandae explicabo dolor! Non quaerat autem vitae assumenda magnam beatae dolorem eveniet. Perspiciatis veritatis autem delectus dolorum obcaecati corrupti, voluptas temporibus, tempore facilis corporis aut aperiam iusto.
Quis voluptates eum quod illo quisquam aut eaque modi praesentium veritatis, ipsam ut natus? Quae totam maiores quod sapiente delectus beatae eos aut, quia harum, rem exercitationem voluptas, perferendis a!
Blanditiis animi itaque soluta officia numquam est molestias similique, minima quos id sed cumque aliquam atque cupiditate. Veniam ullam quis officiis exercitationem rerum sequi, voluptas nisi natus velit tempore recusandae?
Laudantium sapiente corporis praesentium voluptatibus non, itaque, sint in maxime consequuntur voluptatem placeat. Dolore repellendus odio expedita voluptas optio nihil modi id reiciendis, facilis aliquid. In natus sit earum! Labore.
Quo illum a quia, aspernatur maxime illo quibusdam. Saepe corrupti delectus quam nemo laborum, ad ratione sed voluptate atque quia quibusdam vero. Earum quidem sequi beatae nihil eaque repellendus odio.
Vel eius, ducimus repellendus soluta natus doloribus labore veniam corrupti amet beatae. Iusto, enim voluptates, iure rem labore eos culpa, odio quasi autem tempore recusandae officia praesentium aliquam vitae ipsum.
Hic, unde quis asperiores exercitationem similique quisquam temporibus inventore quia est aliquid? Itaque incidunt laboriosam voluptates aspernatur cum, similique maxime! Explicabo magnam provident, fugiat amet quos atque aliquam temporibus qui.
Natus possimus unde provident, vel nesciunt adipisci, optio aspernatur quisquam labore atque fuga libero dignissimos reprehenderit iusto hic fugiat quibusdam. Tenetur error ipsa minima, voluptates eaque quos temporibus quis expedita.
Vitae omnis veritatis ipsa numquam perspiciatis modi, dolorum quaerat repudiandae saepe architecto, ea quae culpa et, corrupti amet optio animi soluta quibusdam molestiae iste officia. Cumque, odit laudantium? Hic, explicabo!
Est qui voluptatem blanditiis rem. Corporis optio ad quos harum odit tempore, quas cum praesentium atque molestias iste minus vel nulla autem porro nesciunt nihil sapiente? Voluptate libero sunt vitae!
Ex, dolorum saepe harum quia nobis, in architecto ipsum accusamus tenetur officiis amet officia veritatis debitis impedit placeat sapiente reprehenderit consequatur sed repellendus iusto neque minus repudiandae pariatur obcaecati! Eum.
Nostrum quo aut et dicta, suscipit modi, numquam consequatur eos officiis nemo quaerat autem! Iure, eligendi eaque dolor, neque obcaecati cupiditate tempore reiciendis praesentium amet commodi beatae cumque culpa aut.
Nam minima et rerum libero maxime aliquid rem cum nobis porro ut dicta quasi vitae, recusandae repellat autem quae sint? Illo officiis impedit tempora corporis amet, ipsam porro voluptas rem.
Dicta, nobis voluptatem? Impedit beatae dicta pariatur, eos architecto adipisci esse optio aperiam asperiores vero, quas dignissimos assumenda alias, placeat exercitationem incidunt eaque! Aliquam iure corrupti voluptates accusamus atque numquam?
Rem laudantium, debitis molestias sint quos aperiam consequatur quis earum cupiditate nesciunt dolorem, quae nulla voluptate nostrum ipsa dolorum animi possimus tempore iure sed mollitia. Fugit voluptatum sit nihil doloremque!
Maiores enim nulla a, porro dolore soluta? Fugiat assumenda voluptates recusandae nisi inventore. Fugiat doloribus quas eum, consectetur neque odio nihil quos animi numquam velit similique tempore corporis laborum laboriosam.
Alias exercitationem sequi voluptatem modi dolor beatae amet, omnis earum! Et, ab voluptate maiores neque exercitationem perferendis vero est temporibus quae praesentium odit cupiditate pariatur expedita maxime nemo in quibusdam?
Rerum voluptatibus nemo saepe maiores dicta debitis inventore pariatur odio laboriosam, doloremque nostrum nobis libero quos in quis tenetur natus vero, molestiae, laborum earum quaerat atque eius sit! Repellat, voluptas!
Quod explicabo neque assumenda aperiam. Laborum quia aspernatur nemo sint mollitia consectetur, reiciendis, nobis perferendis cumque dolorem error maxime voluptatem placeat commodi, ipsa voluptate nam corrupti? Magni accusantium cumque doloribus!
Ab vitae mollitia ducimus sapiente ipsum nisi voluptatibus! Eligendi, adipisci aperiam tenetur deleniti iusto blanditiis vero, optio, placeat quis dolores necessitatibus illum error dolor magni aliquam! Laborum voluptatum in cupiditate?
Animi voluptates nesciunt dicta alias cum rerum eveniet maiores repellendus sapiente nisi labore iste aut tempore ipsa architecto accusantium, veniam nulla quibusdam numquam nihil sunt adipisci sint. Obcaecati, culpa asperiores!
Molestiae recusandae hic illum, at molestias necessitatibus accusamus pariatur quas inventore voluptates aliquid optio non perferendis ipsam minima eligendi aperiam, expedita obcaecati. Est quisquam distinctio obcaecati quaerat accusantium ipsam sapiente!
Quas consequatur dolore enim magni tempora commodi assumenda temporibus laudantium ex quod fuga quae atque earum tenetur architecto nisi ea, ut, molestias aperiam deserunt dignissimos quis omnis. Ab, tempore assumenda?
Eveniet quod praesentium vitae quibusdam optio ullam voluptas. Iusto provident vero unde corporis vitae laudantium aliquid illo dolorum, ab magni! Quibusdam necessitatibus placeat suscipit dicta quos quia tempore enim saepe.
Repellat cumque sed, soluta, neque porro debitis ipsam quas deserunt inventore at facere consectetur, omnis laboriosam minus nostrum reprehenderit? Neque quia quis delectus sunt corporis nemo fugit eius aliquid iste!
Distinctio reprehenderit quod veniam nobis suscipit voluptates eius vitae, sequi expedita voluptatum reiciendis harum nam error at quibusdam sunt sint illo exercitationem? Omnis voluptatibus nihil deserunt iusto atque corrupti adipisci!
Est quisquam eveniet veniam, expedita sint ea quaerat similique nihil voluptate aperiam amet possimus illum fugiat fuga mollitia praesentium eligendi laborum cum? Dolorum, consectetur veniam unde tempora molestiae aspernatur dolores.
Doloribus iusto numquam debitis, maxime accusantium sapiente ratione tenetur necessitatibus voluptatem recusandae. Soluta ratione nemo atque impedit reiciendis, mollitia iusto exercitationem, culpa ullam deleniti vel. Corrupti harum doloribus sint blanditiis!
Debitis velit ullam nihil unde voluptatum enim ad necessitatibus numquam accusamus placeat eum illo, similique dolorum ipsam fuga suscipit aliquid quaerat aliquam. Eius ipsum a quidem cumque impedit mollitia et?
Reprehenderit enim fugit est similique dolor tempore quisquam officiis nulla quas officia velit, quo molestias a modi sint dicta, eaque ad deleniti blanditiis cumque minima! Delectus fugit ullam ut aliquam?
Suscipit est officia laudantium nulla libero nobis itaque dicta, iure vero facere quidem. Id sapiente, iure rem voluptas iste consequatur adipisci, officia sint praesentium quo quam eveniet, ex eaque illum!
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>fixed-top을 입력하니 스크롤을 다운해도 네비게이션 바가 상단에 고정되어 있다.
stickty-top
<h1 class="display-1 text-center">Navbars</h1>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#expandme">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="expandme">
<div class="navbar-nav">
<a href="Home" class="nav-item nav-link">Home</a>
<a href="About" class="nav-item nav-link">About</a>
<a href="Contact" class="nav-item nav-link">Contact</a>
</div>
<form class="form-inline ml-auto">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>sticky-bar를 입력하면 위의 콘텐츠인 Navbars는 고정되지 않지만 내비게이션 바는 위로 고정된다.
https://getbootstrap.com/docs/5.2/components/navbar/
Navbar
Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
getbootstrap.com
728x90
'📦 CSS > CSS Framework' 카테고리의 다른 글
| [CSS Framework] Utilities (0) | 2022.12.30 |
|---|---|
| [CSS Framework] Bootstrap | Icons (0) | 2022.12.27 |
| [CSS Framework] bootstrap | Forms | form-group | form-class (0) | 2022.12.26 |
| [CSS Framework] Grid Utilities (0) | 2022.12.23 |
| [CSS Framework] Bootstrap | Grid System (0) | 2022.12.12 |