네비게이션바 수정하기

지난 글에서는 부트스트랩 소스를 가져와서 넣는 것까지 진행이 되었습니다.

이제는 부트스트랩 소스를 내가 원하는데로 바꾸는 방법에 대해서 안내를 드리겠습니다.

지난 시간에 붙여넣고 사이트를 웹사이트 상으로 보면 아래 사진과 같이 나옵니다.

이제 위에 나오는 Project name과 네비게이션에 항목을 변경하겠습니다.

예제에 있는 소스를 보면 아래처럼 나와 있습니다.

<nav class="navbar navbar-default">

        <div class="container-fluid">

          <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

              <span class="sr-only">Toggle navigation</span>

              <span class="icon-bar"></span>

              <span class="icon-bar"></span>

              <span class="icon-bar"></span>

            </button>

            <a class="navbar-brand" href="#">Project name</a>

          </div>

          <div id="navbar" class="navbar-collapse collapse">

            <ul class="nav navbar-nav">

              <li class="active"><a href="#">Home</a></li>

              <li><a href="#">About</a></li>

              <li><a href="#">Contact</a></li>

              <li class="dropdown">

                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>

                <ul class="dropdown-menu" role="menu">

                  <li><a href="#">Action</a></li>

                  <li><a href="#">Another action</a></li>

                  <li><a href="#">Something else here</a></li>

                  <li class="divider"></li>

                  <li class="dropdown-header">Nav header</li>

                  <li><a href="#">Separated link</a></li>

                  <li><a href="#">One more separated link</a></li>

                </ul>

              </li>

            </ul>

            <ul class="nav navbar-nav navbar-right">

              <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>

              <li><a href="../navbar-static-top/">Static top</a></li>

              <li><a href="../navbar-fixed-top/">Fixed top</a></li>

            </ul>

          </div><!--/.nav-collapse -->

        </div><!--/.container-fluid -->

      </nav>

우선은 해당 소스에서 빨간색으로 나오는 부분을 수정할 예정인데 저는 Dropdown Menu를 사용하지 않을 예정이기 때문에

과감하게 삭제를 해주겠습니다.

페이지 상의 있는 글자를 나에게 맞는 항목으로 변경해 줍니다.

참고하실 만한 사항으로 class="active"로 되어 있는 부분은 선택되어 있다는 것을 표현하기 위해 강조하여 표현이 됩니다.

저는 하나의 항목만 강조가 되어 있으면 되기 때문에 네비게이션에 Default 부분에 들어가 있는 active를 삭제해 줍니다.

그렇게 수정된 항목은 아래와 같습니다.

<nav class="navbar navbar-default" style="margin-bottom:0;">

        <div class="container-fluid">

          <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

              <span class="sr-only">Toggle navigation</span>

              <span class="icon-bar"></span>

              <span class="icon-bar"></span>

              <span class="icon-bar"></span>

            </button>

            <a class="navbar-brand" href="./index.php">공방장인</a>

          </div>

          <div id="navbar" class="navbar-collapse collapse">

            <ul class="nav navbar-nav">

              <li class="active"><a href="#">Home</a></li>

              <li><a href="#">장터</a></li>

              <li><a href="#">의뢰</a></li>

            </ul>

            <ul class="nav navbar-nav navbar-right">

              <li><a href="./">로그인</a></li>

              <li><a href="../navbar-static-top/">회원가입</a></li>

            </ul>

          </div><!--/.nav-collapse -->

        </div><!--/.container-fluid -->

      </nav>

이렇게 내용을 수정하면 아래와 같이 네비게이션이 변경되는 것을 볼 수 있습니다.

소스를 보면 중간에 style="margin-bottom:0;" 라는 소스를 볼 수 있는데요

네비게이션과 아래 내용과의 공간을 없게 만들겠다는 내용으로 아래와 같이 네비게이션과 내용 사이에 공간이 있는 부분을 없애 남는 공간이 없도록 지정한 것입니다.

저는 Jumbotron을 사용하지 않을 것이기 때문에 해당 내용을 지워버리고 이미지를 임시로 넣어 놨습니다.

참고 하세요.