집 >웹 프론트엔드 >부트스트랩 튜토리얼 >HTML에서 부트스트랩을 참조하는 방법
HTML에서 부트스트랩을 참조하는 방법
- 藏色散人원래의
- 2020-11-18 10:28:097524검색
html에서 부트스트랩을 참조하는 방법: 1. "link rel" 방법을 사용하여 온라인으로 부트스트랩을 참조합니다. 2. 부트스트랩을 로컬로 다운로드하고 필요한 파일을 프로젝트 아래에 배치한 다음 해당 파일에 도입합니다.
권장: "bootstrap 비디오 튜토리얼"
Bootstrap 소개
Bootstrap을 사용하는 방법에는 일반적으로 두 가지가 있습니다:
온라인 Bootstrap 스타일 참조,
Bootstrap 견적을 로컬로 다운로드.
온라인 인용
기본 템플릿은 다음과 같습니다.
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap引入</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>장점: 로컬에 부트스트랩을 설치할 필요가 없고, 인용 시 경로 문제를 고려할 필요가 없습니다.
단점: 온라인 스타일이 다운되면 영향을 미칩니다. 전체 페이지 스타일의 프리젠테이션
로컬 참조
Bootstrap을 로컬로 다운로드하세요.
위 코드의 3개 URL에 직접 접속하여 코드를 받으세요
Bootstrap 공식 웹사이트 http://v3.bootcss.com/ 및 JQuery
공식 웹사이트 http://jquery.com/로 이동하여 다운로드하세요. 해당 파일
필요한 파일을 쉽게 참조할 수 있도록 프로젝트 아래에 배치하세요
부트스트랩의 디렉터리 구조는 다음과 같습니다.
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2가장 일반적으로 사용되는 파일은 css/bootstrap.min.css, js/bootstrap.min.js입니다.
jquery.min.js는 공식 홈페이지의 Download JQuery에서 확인하실 수 있습니다
마지막으로 해당 파일에 소개해주시면 됩니다.
장점: 네트워크 상태가 좋지 않아도 페이지 스타일이 정상적으로 표시되는지 확인
단점: 미리 설치하거나 다운로드해야 하며, 참조 시 경로 문제를 고려해야 합니다.
위 내용은 HTML에서 부트스트랩을 참조하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!