[명령 불필요! ]Bootstrap을 오프라인에서도 사용할 수 있도록 로컬 환경을 구축한다.
htps : // 게이 t보오 tst et al p. 코m/
대상 독자
Bootstrap을 오프라인에서도 사용하고 싶은 사람
링크를 붙여넣기만 하면 Bootstrap을 사용하는 사람
명령 조작을 잘 모르기 때문에 우선 마우스를 사용하여 환경을 구축하고 싶은 사람
여기서 할 일.
오프라인에서도 Bootstrap을 사용할 수 있도록 로컬 환경을 구축합니다.
사용하는 OS는 Mac이지만 Windows에서도 똑같이 할 수 있어야합니다.
CDN을 사용하는 간단한 방법은 여기 의 기사로 정리하고 있습니다.
다운로드할 내용
오프라인에서도 Bootstrap을 사용할 수 있도록 로컬 환경을 구축합니다.
사용하는 OS는 Mac이지만 Windows에서도 똑같이 할 수 있어야합니다.
CDN을 사용하는 간단한 방법은 여기 의 기사로 정리하고 있습니다.
다운로드할 내용
Bootstrap
공식 문서로 이동하여 파일을 다운로드합니다.
Compiled CSS and JS 항목으로 이동하여 Download 버튼을 누릅니다.
링크 대상은 여기
다운로드가 끝나면 압축을 풀고 아래 파일을 꺼냅니다.
이번에는 다음 파일을 사용하여 오프라인에서도 Bootstrap을 사용할 수 있도록합니다.
bootstrap-4.3.1-dist > css > bootstrap.min.css
bootstrap-4.3.1-dist > js > bootstrap.min.js 
jQuery
Bootstrap은 jQuery를 사용하여 표시합니다.
즉, jQuery를 넣지 않으면 Bootstrap도 움직이지 않는 이유입니다.
jQuery를 PC에 다운로드합니다.
htps : // j 쿠에 ry. 코 m / 도 w 응 아 d /
다운로드 버튼이 많이 있지만 가장 먼저 쓰고 있습니다.
Download the compressed, production jQuery 3.4.1 링크를 마우스 오른쪽 버튼으로 클릭하고
名前をつけて保存 또는 リンク先を別名をつけて保存를 선택하여 다운로드하십시오.(버전은 다소 달라도 문제 없습니다.)
popper.js
popper.js를 설치합니다.
jQuery와 마찬가지로 Popper.js를 다운로드하지 않으면 Bootstrap이 작동하지 않습니다.
htps : // 뽀빠 r. js. rg/
톱 페이지의 INSTALL에서 날아가면 Github 페이지로 날아갑니다.
jQuery와 마찬가지로 링크를 마우스 오른쪽 버튼으로 클릭하여 저장하십시오.
준비
디렉토리 만들기
디렉토리 구조는 다음과 같이 작성하십시오.
그리고 방금 다운로드 한 bootstrap.min.css, bootstrap.min.js, jquery-3.4.1.min.js를 드래그 앤 드롭으로 이동하십시오.
helloworld/
├ css/
│ └ bootstrap.min.css
├ js/
│ ├ bootstrap.min.js
│ ├ popper.min.js
│ └ jquery-3.4.1.min.js
└ hello_world.html
아래 사진과 같이 있는지 확인하십시오.
hello_world.html을 편집합니다.
CSS 파일 로드
head 의 태그에 아래 링크 태그를 붙여넣으십시오.
<link rel="stylesheet" href="css/bootstrap.min.css">
JS 파일 로드
</body> 아래에 script 태그를 붙여 넣습니다.
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
여기에서 조심하고 싶은 것이 먼저 jQuery, popper.js의 스크립트 태그를 읽어주십시오.
HTML은 위에서부터 순서대로 읽습니다.
jQuery, popper.js를 먼저로드하지 않으면 Bootsrap이 작동하지 않습니다.
전체는 이런 느낌입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>hello world</title>
</head>
<body>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
이제 준비가 되었습니다!
실제로 Single button을 구현해 본다.
지난번 하지만 사용한 Single button을 실제로 구현해 봅시다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
아래 이미지처럼 보이면 성공입니다!
마지막으로
이제 Bootstrap을 오프라인에서도 사용할 수 있었습니다!
CDN에 비해 다운로드하는 것, 작업이 많습니다만,
실제로 해보십시오.
Reference
이 문제에 관하여([명령 불필요! ]Bootstrap을 오프라인에서도 사용할 수 있도록 로컬 환경을 구축한다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/YutakaYamasaki/items/6a74be2a08c4986836c4
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
helloworld/
├ css/
│ └ bootstrap.min.css
├ js/
│ ├ bootstrap.min.js
│ ├ popper.min.js
│ └ jquery-3.4.1.min.js
└ hello_world.html
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>hello world</title>
</head>
<body>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
지난번 하지만 사용한 Single button을 실제로 구현해 봅시다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
아래 이미지처럼 보이면 성공입니다!
마지막으로
이제 Bootstrap을 오프라인에서도 사용할 수 있었습니다!
CDN에 비해 다운로드하는 것, 작업이 많습니다만,
실제로 해보십시오.
Reference
이 문제에 관하여([명령 불필요! ]Bootstrap을 오프라인에서도 사용할 수 있도록 로컬 환경을 구축한다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/YutakaYamasaki/items/6a74be2a08c4986836c4
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여([명령 불필요! ]Bootstrap을 오프라인에서도 사용할 수 있도록 로컬 환경을 구축한다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/YutakaYamasaki/items/6a74be2a08c4986836c4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
