그누보드에 부트스트랩 적용 - (3)

주의) 재미로 하고 있는 작업입니다. 따라하시다가 욕을 볼 수도 있습니다.ㅎ

사이트 접속하면 처음 보이는 index.php 파일 및 기타 필수파일 몇개를 수정해서 하~얗게 만들었다.

수정하지 않았을 때 나타나는 것 중에 상단에 메뉴가 있는데...메뉴에 부트스트랩 적용해보겠다.

원본 head.php 에 보면 상단 시작, 상단 끝 구간이 있다.

거기 보면 글자크기를 변경하는 버튼, 회원가입, 로그인, 새글..등 있고, 그 아래에 메뉴 뿌려주는 코드가 있다.

글자크기 변경하는 건 관심없고. 메뉴 부분은 자세히 살펴봐야되고...

상단에 회원가입, 로그인, 새글..등이 나타나는 상단 고정 메뉴를 부트스트랩의 nav 로 바꿔봐야지...

부트스트랩에서 navbar 라고 이름지어진 component 가 있다. 그거 이용하면 될거같다.

head.php

......

if (G5_IS_MOBILE) {

//    include_once(G5_MOBILE_PATH.'/head.php');

//    return;

}

?>

<nav class="navbar navbar-default">

</nav>

부트스트랩 navbar 기본형을 추가했다..우선 틀만...

브라우저로 접속해보면, 상단에 회색 비스무리하게 가로 바가 보인다. 그 안에 아이템 하나씩 넣어야겠지.

그리고, 모바일일 경우 다른 파일을 include 하는 것을 막아버렸다. index.php, tail.php 에도... 부트스트랩은 모바일 자동이니까..그렇게...

nav 태그 안에 아래 코드를 넣어봤다. navbar 앞쪽에 사이트명 보이게 navbar-brand 도 넣어줬다.

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

<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="#">GNUBOARD5</a>

</div>

접속해보면 navbar 앞에 GNUBOARD5 라고 보이네.

그 뒤에 회원가입, 로그인, FAQ.., , 새글 이 보이면 되겠다.

원본 코드는..

<ul id="tnb">

            <?php if ($is_member) {  ?>

            <?php if ($is_admin) {  ?>

            <li><a href="<?php echo G5_ADMIN_URL ?>"><b>관리자</b></a></li>

            <?php }  ?>

            <li><a href="<?php echo G5_BBS_URL ?>/member_confirm.php?url=<?php echo G5_BBS_URL ?>/register_form.php">정보수정</a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/logout.php">로그아웃</a></li>

            <?php } else {  ?>

            <li><a href="<?php echo G5_BBS_URL ?>/register.php">회원가입</a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/login.php"><b>로그인</b></a></li>

            <?php }  ?>

            <li><a href="<?php echo G5_BBS_URL ?>/faq.php">FAQ</a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/qalist.php">1:1문의</a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/current_connect.php">접속자 <?php echo connect(); // 현재 접속자수  ?></a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/new.php">새글</a></li>

        </ul>

ul id="tnb" 로 되어있는데.. id="tnb" 를 class="nav navbar-nav" 로 변경해주면 된다. 부트스트랩 간단하네.

근데..이 코드를 다른 div로 감싸줘야한다. 이유는 모바일에 보여줄 때, 첨부터 다 보여주는게 아니라, 버튼으로 collapse?해놓고 버튼 누르면 보여주는 기능이 자동으로 되기 위해서다. navbar-header 에서 brand 말고 이상한게 붙은게 뭔가 했었다.

아래 코드 내부에 위 ul...코드를 넣어줘야한다는거다.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

</div>

합쳐보면..

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

            <?php if ($is_member) {  ?>

            <?php if ($is_admin) {  ?>

            <li><a href="<?php echo G5_ADMIN_URL ?>"><b>관리자</b></a></li>

            <?php }  ?>

            <li><a href="<?php echo G5_BBS_URL ?>/member_confirm.php?url=<?php echo G5_BBS_URL ?>/register_form.php">정보수정</a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/logout.php">로그아웃</a></li>

            <?php } else {  ?>

            <li><a href="<?php echo G5_BBS_URL ?>/register.php">회원가입</a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/login.php"><b>로그인</b></a></li>

            <?php }  ?>

            <li><a href="<?php echo G5_BBS_URL ?>/faq.php">FAQ</a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/qalist.php">1:1문의</a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/current_connect.php">접속자 <?php echo connect(); // 현재 접속자수  ?></a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/new.php">새글</a></li>

</ul>

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

오케이..이렇게 해서 접속해보면 아래처럼 보이네.

오케이...