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

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

부트스트랩은 css 와 js 로 이루어져있다고 보면 되겠는데...

원래 그누보드에 있는 css 파일과 분명 부딪히는 일이 생길거 같다.

앞선 글에서 소스 보기를 하면 알 수 있는게, 

그누는 default.css 파일과 아래 js 파일들을 사용한다.

물론 admin 으로 로그인을 하면 admin.css 를 참조하긴 한다만...지금은 일반 로그인의 경우만 살펴봐야지.

<script src="http://appspop.com/js/jquery-1.8.3.min.js"></script>

<script src="http://appspop.com/js/jquery.menu.js"></script>

<script src="http://appspop.com/js/common.js"></script>

<script src="http://appspop.com/js/wrest.js"></script>

부트스트랩도 jquery 를 사용하는데, 버전이 맞을라나 모르겠네. 그건 나중에 부트스트랩에서 js 를 사용할 때 좀 더 확실히 살펴봐야겠다.

default.css 를 열어보니.... 레이아웃, 게시판용 css 등이 주석과 함께 작성이 되어있다.

그냥 두고 부트스트랩을 추가하면 충돌이 일어날 듯한데...

default.css 대신에 부트스트랩을 사용하고 필요한거는 하나씩 추가를 하는 방법으로 진행해야겠다.

일단 부트스트랩을 다운받아서 압축을 푼 후, 서버로 올려줬다. 다운받을 곳은 getbootstrap.com 이다.

현재 부트스트랩이 3.3.2 버전이고, 압축 풀어 올린 위치는 루트 디렉토리(www) 바로 아래 되시겠다.

www/bootstrap/css/

www/bootstrap/fonts/

www/bootstrap/js/

부트스트랩도 서버에 준비를 해 놨으니,

css 파일 추가 코드가 있는 head.sub.php 에 가서 수정을 하겠다. 빨간 색이 추가한 내용이다.

<title><?php echo $g5_head_title; ?></title>

<?php

if (defined('G5_IS_ADMIN')) {

    echo '<link rel="stylesheet" href="'.G5_ADMIN_URL.'/css/admin.css">'.PHP_EOL;

} else {

//    echo '<link rel="stylesheet" href="'.G5_CSS_URL.'/'.(G5_IS_MOBILE?'mobile':'default').'.css">'.PHP_EOL;

    echo '<link rel="stylesheet" href="'.G5_URL.'/bootstrap/css/bootstrap.min.css">'.PHP_EOL;    

}

?>

관리자로 로그인한 것이 아니라면, 그누보드는 부트스트랩을 이용하도록 했다. 관리자는 관리페이지가 틀어질까봐 일단 제쳐뒀다..

그다음, 부트스트랩이 사용할 js 파일은 추가해줘야겠는데... 이녀석이 jquery 를 사용한다.

jquery 는 그누에서도 사용을 하기때문에 head.sub.php 파일안에 보면 추가하는 부분이 있다.

<script src="<?php echo G5_JS_URL ?>/jquery-1.8.3.min.js"></script>

<script src="<?php echo G5_JS_URL ?>/jquery.menu.js"></script>

<script src="<?php echo G5_JS_URL ?>/common.js"></script>

<script src="<?php echo G5_JS_URL ?>/wrest.js"></script>

1.8.3 버전을 사용하고 있다.

그러나!

부트스트랩 3.3.0은 아래 링크를 보면 1.9.1 이상이 필요하다고 한다. 

https://github.com/twbs/bootstrap/blob/v3.3.2/bower.json

난 현재 jquery 2.1.3 버전을 다운받아서 그누의 js 폴더아래에 jquery-2.1.3.min.js 로 업로드를 하고 head.sub.php 에서 2.1.3 으로 수정을 했다.

<script src="<?php echo G5_JS_URL ?>/jquery-2.1.3.min.js"></script>

그누의 기능 중 먼가 동작하지 않는 것들이 나오겠지.. 암튼..그건 나오면 고치고...

또...

부트스트랩이 사용하는 자바스크립트 파일인 bootstrap.min.js 를 어디다가 추가를 해줘야겠다.

부트스트랩 예제 템플릿을 보면 페이지 로딩 속도를 위해서 페이지 하단에서 포함시키고 있다.

그래서, tail.sub.php 에 아래처럼 추가를 해 줬다.

<script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

<?php echo html_end(); // HTML 마지막 처리 함수 : 반드시 넣어주시기 바랍니다. ?>

이렇게 하고 브라우저로 접속해보면 하~~얗다.

* 그누보드에 부트스트랩 적용 (1) 과 (2) 글은... 지난해에 작성해뒀다가 오늘 다시 진행하기 시작하면서 몇개 버전이 달라진 것들을 수정했습니다.

포스팅이 작성된 날짜와 그 당시 버전과 다를 수 있습니다..