๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐ŸŒ HTML\CSS/๐Ÿ›ฐ๏ธ ๋ถ€ํŠธ ์ŠคํŠธ๋žฉ BootStrap

5๏ธโƒฃ ๋ถ€ํŠธ ์ŠคํŠธ๋žฉ (BootStrap) - navigation basic

by Meteora_ 2021. 2. 26.
728x90

 

[์ฝ”๋“œ] ->

 

ํ™”๋ฉด์„ ๋Š˜๋ฆฌ๊ณ  ์ค„์ด๋Š” ๊ฒฐ๊ณผ๋ฌผ์ด ๋‹ค๋ฅด๋‹ค (๋™์  ์Šคํฌ๋ฆฐ)

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">-->
  
 
  <link rel="stylesheet" href="./bootstrap/bootstrap.min.css"> <!-- ํด๋”๋กœ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ์‚ฌ์šฉ์‹œ ์†๋„๋น ๋ฆ„ -->
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> 
  
</head>
<body>

<h1 class="text-center mb-5">component:navigation</h1>
<h2 class="text-center mb-4">๊ธฐ๋ณธ์ ์ธ ์‚ฌ์šฉ ์˜ˆ</h2>

<div class="container">

   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">๋ธŒ๋ Œ๋“œ</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#naviChange" aria-controls="naviChange" aria-expanded="false" aria-label="๋„ค๋น„๊ฒŒ์ด์…˜ ์ „ํ™˜">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="naviChange">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">link1</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="#">link2</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="#">link3</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="๊ฒ€์ƒ‰" aria-label="๊ฒ€์ƒ‰">
        <button class="btn btn- light my-2 my-sm-0" type="submit">๊ฒ€์ƒ‰</button>
      </form>
    </div>
  </nav>
</div>

</body>
</html>
์ €์ž‘์žํ‘œ์‹œ (์ƒˆ์ฐฝ์—ด๋ฆผ)

'๐ŸŒ HTML\CSS > ๐Ÿ›ฐ๏ธ ๋ถ€ํŠธ ์ŠคํŠธ๋žฉ BootStrap' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

7๏ธโƒฃ๋ถ€ํŠธ ์ŠคํŠธ๋žฉ (BootStrap) - Check box  (0) 2021.02.26
6๏ธโƒฃ๋ถ€ํŠธ ์ŠคํŠธ๋žฉ (BootStrap) - Button  (0) 2021.02.26
4๏ธโƒฃ๋ถ€ํŠธ ์ŠคํŠธ๋žฉ (BootStrap) - Jumbotron  (0) 2021.02.26
3๏ธโƒฃ ๋ถ€ํŠธ ์ŠคํŠธ๋žฉ (BootStrap) - Card basic  (0) 2021.02.26
2๏ธโƒฃ ๋ถ€ํŠธ ์ŠคํŠธ๋žฉ (BootStrap) - Alert basic  (0) 2021.02.26

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”