Express에 Bootstrap 적용하기

2016. 4. 1. 15:57IT관련

반응형



Bootstrap 이란?


웹서버에 적용할 CSS style을 고민하다가 결국은 Bootstrap을 사용하기로 결정하였다.

먼저 Bootstrap을 다운로드를 받아야 한다.


다운로드 --> http://bootstrapk.com/getting-started/#download


다운로드를 받아 압축을 해제하면 아래와 같은 디렉토리와 파일 구조를 확인할 수 있다.



이 압축해제한 것들을 Express 어플리케이션의 public 디렉토리에 그대로 복사를 하고 사용하고자 하는 템플릿 엔진에 적용하면 된다.

나는 Express-handlebars를 템플릿 엔진으로 사용하고 있기 때문에 DefaultLayout의 파일에 아래와 같이 적용하였다.


<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Example App</title>


<!-- 합쳐지고 최소화된 최신 CSS -->

<link rel="stylesheet" href="/css/bootstrap.min.css">


<!-- 부가적인 테마 -->

<link rel="stylesheet" href="/css/bootstrap-theme.min.css">


<!-- 합쳐지고 최소화된 최신 자바스크립트 -->

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


</head>

<body>

 

    {{{body}}}

 

</body>

</html>



반응형

'IT관련' 카테고리의 다른 글

ASUS 공유기 RT-AC68P 2.4GHz 먹통 현상 해결  (2) 2016.04.13
Evoluent Vertical Mouse 드라이버  (25) 2016.04.06
nodemon  (0) 2016.03.28
Express을 이용한 웹페이지 생성  (0) 2016.03.28
npm와 종속성(dependency)  (0) 2016.03.25