부트스트랩 설치 방법-부트스트랩 튜토리얼-php.cn

집

웹 프론트엔드

부트스트랩 튜토리얼

부트스트랩 설치 방법

angryTom

Jul 20, 2019 pm 01:41 PM

bootstrap

RECEMEDRENDEND TUTORION :

부트스트랩 설치 방법

BootStrap 튜토리얼 다운로드 BootStrap http://getbootstrap.com/에서 Bootstrap의 최신 버전을 다운로드 할 수 있습니다. 두 가지 버튼이 표시됩니다.

　●부트스트랩 다운로드: 부트스트랩을 다운로드합니다. 이 버튼을 클릭하면 Bootstrap CSS, JavaScript 및 글꼴의 사전 컴파일된 압축 버전을 다운로드할 수 있습니다. 설명서와 원본 소스 코드 파일은 포함되지 않습니다.

　●

다운로드 소스: 소스코드를 다운로드합니다. 이 버튼을 클릭하면 최신 Bootstrap LESS 및 JavaScript 소스 코드를 직접 얻을 수 있습니다.

　컴파일되지 않은 소스 코드를 사용하는 경우 LESS 파일을 컴파일하여 재사용 가능한 CSS 파일을 생성해야 합니다. LESS 파일을 컴파일하기 위해 Bootstrap은 공식적으로 less.js를 기반으로 하는 Twitter의 CSS 프롬프트인 Recess만 지원합니다.

부트스트랩 설치 방법 　이 튜토리얼에서는 더 나은 이해와 더 쉬운 사용을 위해 미리 컴파일된 Bootstrap 버전을 사용합니다.

파일이 컴파일되고 압축되므로 독립 기능 개발 중에 매번 이러한 독립 파일을 포함할 필요는 없습니다. 　

이 튜토리얼을 작성할 때는 (Bootstrap 3)을 사용했습니다.

파일 구조

사전 컴파일된 Bootstrap

컴파일된 Bootstrap 버전을 다운로드한 후 ZIP 파일의 압축을 풀면 다음과 같은 파일/디렉토리 구조가 표시됩니다.

　As 위 그림과 같이 컴파일된 CSS와 JS(bootstrap.*), 컴파일되고 압축된 CSS와 JS(bootstrap.min.*)를 볼 수 있습니다. 또한 선택적 Bootstrap 테마인 Glyphicons용 글꼴도 포함되어 있습니다.

Bootstrap 소스 코드

Bootstrap 소스 코드를 다운로드하면 파일 구조는 다음과 같습니다.

부트스트랩 설치 방법

less/, js/ 및 글꼴/ 아래의 파일은 Bootstrap CSS, JS 및 글꼴입니다. / 각각 아이콘 글꼴의 소스 코드입니다. dist/ 폴더에는 위의 미리 컴파일된 다운로드 섹션에 나열된 파일과 폴더가 포함되어 있습니다. docs-assets/, example/ 및 모든 *.html 파일은 부트스트랩 문서입니다.

HTML 템플릿

Bootstrap을 사용하는 기본 HTML 템플릿은 다음과 같습니다.

<!DOCTYPE html><html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
      <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <h1 id="Hello-nbsp-world">Hello, world!</h1>
 
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="js/bootstrap.min.js"></script>
   </body></html>

여기서 보면 예전에 사용했던 jquery.js, bootstrap.min.js, bootstrap.min.css 파일이 포함되어 있는 것을 볼 수 있습니다. Bootstrap을 사용하여 일반 HTML 파일을 템플릿으로 변환합니다.

위 내용은 부트스트랩 설치 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

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

관련 기사

React and Bootstrap : 사용자 인터페이스 설계 향상Apr 26, 2025 am 12:18 AM

React 및 Bootstrap을 원활하게 통합하여 사용자 인터페이스 설계를 향상시킬 수 있습니다. 1) 종속성 패키지 설치 : NPMINSTALLBOOTSTRAPREACT-BOOTSTRAP. 2) CSS 파일을 가져옵니다 : import'Bootstrap/dist/css/bootstrap.min.css '. 3) 버튼 및 탐색 막대와 같은 부트 스트랩 구성 요소를 사용하십시오. 이 조합을 통해 개발자는 React의 유연성 및 Bootstrap의 스타일 라이브러리를 활용하여 아름답고 효율적인 사용자 인터페이스를 만들 수 있습니다.

부트 스트랩을 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를 사용하여 스타일을 조정하십시오.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.