HTML에서 부트스트랩을 참조하는 방법-부트스트랩 튜토리얼-php.cn

HTML에서 부트스트랩을 참조하는 방법

藏色散人

풀어 주다： 2020-11-18 10:28:09

원래의

7485명이 탐색했습니다.

html에서 부트스트랩을 참조하는 방법: 1. "link rel" 방법을 사용하여 온라인으로 부트스트랩을 참조합니다. 2. 부트스트랩을 로컬로 다운로드하고 필요한 파일을 프로젝트 아래에 배치한 다음 해당 파일에 도입합니다.

HTML에서 부트스트랩을 참조하는 방법

권장: "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 중국어 웹사이트의 기타 관련 기사를 참조하세요!