티스토리에 부트스트랩 적용하기

티스토리에 부트스트랩을 적용하려고 할 경우는, ①부트스트랩 파일과 jQuery 파일 다운로드, ②스킨 이미지 폴더에 업로드,  ③스킨 HTML 변경 순으로 진행하면 된다.

 

부트스트랩 내려받기

부트스트랩 다운로드 사이트 [bootstrapk.com/getting-started/#download]로 이동하여

부트스트랩 다운로드

클릭

부트스트랩다운로드페이지

jQuery 내려받기

jQuery 다운로드 사이트[Download the compressed, production jQuery 3.5.1]로 이동하여

jQuery 다운로드

클릭
(js가 그냥 브라우저에 출력된다면, 마우스 오른쪽 클릭해서, 다른 이름으로 저장, 해주시면 됩니다.)

Download the compressed, production jQuery 3.X.X 다운로드  받습니다.

다운로드 압축 해제 및 정리

jQuery 파일은 부트스트랩을 동작하기 위한 필수 파일이니 당연히 업로드 하시면 되고,

• jquery-3.5.1.min.js

부트스트랩 압출 파일 해제 후 모든 파일 올려서 사용해되 되지만, 최소만 올리겠다면 다음의 2개 파일의 위치를 확인해주세요.

• css 폴더의 ① bootstrap.min.css
• js 폴더의 ② bootstrap.min.js

스킨 편집에서 파일 업로드 진행

관리자 > 설정 > 꾸미기 > 스킨편집 > HTML 편집 > 파일업로드로 이동

하단 추가 버튼을 클릭해서 앞에 말한 3개의 파일을 업로드한다. (폴더는 기본으로 images 폴더로 등록이 됨)

티스토리_파일업로드_추가하기

HTML 에 js와 css 파일 추가하기

HTML로 이동

</head> 태그 앞에 다음과 같이 코드를 추가한다.

	<link href=“./images/bootstrap.min.css” rel=stylesheet” type=“text/css” />
	<script src=“./images/jquery-3.5.1.min.js”></script>
	<script src=“./images/bootstrap.min.js”></script>
</head>


<!-- 
</head> 의 이전 행에서 CSS 파일을 볼러오고
</body> 의 이전 행에서 JS 파일들을 불러오는 것이 가장 좋지만,

</head> 의 이전 행에 파일 3개를 모두 불러도 대부분 잘 동작한다.
-->

적용한 예시는 다음과 같습니다.

티스토리_HTML에 JS 파일과 CSS 추가하는 화면

티스토리 글쓰기에 부트스트랩 적용하기

다음의 사이트를 참고하여 부트스트랩을 적용해보세요.

bootstrapk.com/getting-started/#examples

시작하기 · 부트스트랩

끝.