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

집

웹 프론트엔드

부트스트랩 튜토리얼

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

藏色散人

Nov 18, 2020 am 10:28 AM

bootstrap

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

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

부트 스트랩을 React에 통합 : 실용 가이드Apr 25, 2025 am 12:04 AM

부트 스트랩을 React 프로젝트에 통합하는 단계에는 다음이 포함됩니다. 1. 부트 스트랩 패키지 설치, 2. CSS 파일 가져 오기, 3. 부트 스트랩 클래스 이름을 스타일 요소에 사용하십시오. 이 통합은 REACT의 구성 요소화 및 부트 스트랩의 스타일 시스템을 사용하여 효율적인 UI 개발을 달성합니다.

부트 스트랩은 무엇에 사용됩니까? 실용적인 설명Apr 24, 2025 am 12:16 AM

BootStrapisApowerfulframeworkstimplifiescreatingresponsive, mobile-firstwebsites.itoffers : 1) Agridsystemforadaptablelayouts, 2) pre-styledements-buttonsandforms 및 3) javascromponentssuchascarouselsforenhancedinteractifice.

부트 스트랩 : 레이아웃에서 구성 요소까지Apr 23, 2025 am 12:06 AM

Bootstrap은 Twitter에서 개발 한 프론트 엔드 프레임 워크로 HTML, CSS 및 JavaScript를 통합하여 개발자가 반응 형 웹 사이트를 신속하게 구축 할 수 있도록 도와줍니다. 핵심 기능에는 다음이 포함됩니다. 그리드 시스템 및 레이아웃 : 12 열 설계, Flexbox 레이아웃 사용 및 다양한 장치 크기의 반응 형 페이지를 지원하는 것이 포함됩니다. 구성 요소 및 스타일 : 버튼, 모달 박스 등과 같은 풍부한 구성 요소 라이브러리를 제공하며 클래스 이름을 추가하여 아름다운 효과를 얻을 수 있습니다. 작동 방식 : CSS 및 JavaScript에 의존하면 CSS는 적은 또는 SASS 전 처리기를 사용하며 JavaScript는 jQuery를 사용하여 대화식 및 동적 효과를 달성합니다. 이러한 기능을 통해 부트 스트랩은 개발을 크게 향상시킵니다

부트 스트랩이란 무엇입니까? 초보자를위한 소개Apr 22, 2025 am 12:07 AM

bootstrapisafreecssframework that thatwebdevelopmentbyprovingpre-styledcomponentsandjavascriptplugins.it'sidealforcreatingresponsive, mobile-firstwebsites, powerfilectiblegridsystemforlayoutSandasupportiveCommunityOrlynityAndOcustomization.

Bootstrap Demystified : 간단한 설명Apr 21, 2025 am 12:13 AM

BootstrapisAfree, Open-SourcecsSframeworkthathelpScreateResponsive, mobile-firstwebsites.1) itofferSagridsystemforlayoutFlexibility, 2) incespre-styledcomponentsforquickDesign 및 3) ishighlyCustomaMaSavoidGenericLooks, ButRequirsTOTET

부트 스트랩 대 반응 : 올바른 접근법 선택Apr 20, 2025 am 12:09 AM

부트 스트랩은 빠른 건설 및 소규모 프로젝트에 적합하지만 React는 복잡하고 대화식 응용 프로그램에 적합합니다. 1) Bootstrap은 사전 정의 된 CSS 및 JavaScript 구성 요소를 제공하여 반응 형 인터페이스 개발을 단순화합니다. 2) React는 구성 요소 개발 및 가상 DOM을 통해 성능과 상호 작용을 향상시킵니다.

부트 스트랩의 목적 : 일관되고 매력적인 웹 사이트 구축Apr 19, 2025 am 12:07 AM

Bootstrap의 주요 목적은 개발자가 반응 형 모바일 우선 웹 사이트를 신속하게 구축 할 수 있도록 돕는 것입니다. 핵심 기능에는 다음이 포함됩니다. 1. 반응 형 디자인은 그리드 시스템을 통한 다양한 장치의 레이아웃 조정을 실현합니다. 2. 내비게이션 바 및 모달 박스와 같은 사전 정의 된 구성 요소는 미학 및 크로스 브라우저 호환성을 보장합니다. 3. 사용자 정의 및 확장을 지원하고 SASS 변수 및 Mixins를 사용하여 스타일을 조정하십시오.

부트 스트랩 대 기타 프레임 워크 : 비교 개요Apr 18, 2025 am 12:06 AM

Bootstrap은 사용하기 쉽고 반응 형 웹 사이트를 신속하게 개발하기 쉽기 때문에 Tailwindcss, Foundation 및 Bulma보다 낫습니다. 1. Bootstrap은 미리 정의 된 스타일과 구성 요소의 풍부한 라이브러리를 제공합니다. 2. CSS 및 JavaScript 라이브러리는 반응 형 디자인 및 대화식 기능을 지원합니다. 3. 빠른 개발에 적합하지만 맞춤형 스타일이 더 복잡 할 수 있습니다.

See all articles