집 >웹 프론트엔드 >부트스트랩 튜토리얼 >부트스트랩에 코드를 도입하는 방법
부트스트랩에 코드를 도입하는 방법
- 下次还敢원래의
- 2024-04-05 02:51:161014검색
부트스트랩 코드를 소개하는 방법에는 CDN 사용, 파일 다운로드, 패키지 관리자 사용의 세 가지 방법이 있습니다. 파일은 CDN을 통해 웹에서 빠르게 얻을 수 있고, 파일을 다운로드하여 로컬로 사용하거나, 패키지 관리자를 통해 명령줄을 사용하여 설치할 수 있습니다.
Bootstrap 코드 소개
Bootstrap은 반응형 모바일 우선 웹사이트 및 애플리케이션을 구축하는 데 널리 사용되는 CSS 프레임워크입니다. Bootstrap 코드를 도입하려면 다음과 같은 방법으로 수행할 수 있습니다.
1. CDN 사용
가장 쉬운 방법은 CDN(Content Delivery Network)을 사용하여 Bootstrap 파일을 호스팅하는 것입니다. CDN은 CSS, JavaScript 등의 정적 파일을 빠르고 효율적으로 제공하는 전 세계에 분산된 서버 네트워크입니다.
CDN에서 부트스트랩을 로드하는 단계는 다음과 같습니다.
-
HTML 문서의
<head>태그에 다음 줄을 추가합니다.<head>标签中，添加以下行：<code class="html"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"></code>
-
对于 JavaScript，添加：
<code class="html"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></code>
2. 下载 Bootstrap 文件
您还可以从 Bootstrap 官方网站下载 Bootstrap 文件。下载后，将文件复制到您网站的目录中。
-
对于 CSS，将文件命名为 "bootstrap.min.css" 并将其放置在
<style>标签中：<code class="html"><link rel="stylesheet" href="css/bootstrap.min.css"></code>
-
对于 JavaScript，将文件命名为 "bootstrap.bundle.min.js" 并将其放置在
<script><code class="html"><script src="js/bootstrap.bundle.min.js"></script></code>
<code>npm install bootstrap</code>
2. Bootstrap 파일 다운로드
Bootstrap 공식 웹사이트에서도 Bootstrap 파일을 다운로드할 수 있습니다. 다운로드한 후 파일을 웹사이트 디렉토리에 복사하세요.- CSS의 경우 파일 이름을 "bootstrap.min.css"로 지정하고
<style>태그 안에 넣습니다. rrreee
<script> 태그에 넣습니다: 🎜rrreee🎜🎜🎜🎜3. 노드 패키지와 같은 패키지 관리자를 사용하는 경우 패키지 관리자를 사용하세요 🎜🎜🎜. Manager(npm)의 경우 다음 명령을 사용하여 Bootstrap을 설치할 수 있습니다. 🎜rrreee🎜설치 후 프로젝트에서 다음 코드를 사용할 수 있습니다. 🎜🎜🎜CSS의 경우 "bootstrap/dist/css/bootstrap.min.css"를 가져옵니다. . 🎜🎜JavaScript의 경우 "bootstrap/dist/js/bootstrap.bundle.min.js"를 가져옵니다. 🎜🎜위 내용은 부트스트랩에 코드를 도입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!