부트스트랩을 사용하는 방법
4214 단어 htmltutorialopensourcebootstrap
부트스트랩을 사용하는 방법에 대한 모든 방법을 보여주기 전에 템플릿에 포함할 때 프레임워크의 축소 버전을 사용하는 것이 좋습니다.
일반적으로 실제 부트스트랩 스타일 및 스크립트로 작업할 필요가 없으며, 대신 Sass 변수 또는 믹스인을 사용하여 이를 재정의하거나 수정합니다.
CDN을 통해 부트스트랩 사용
CDN 사용의 장점은 이 리소스가 사용자의 브라우저에 이미 캐시되어 웹사이트를 더 빠르게 만들 수 있다는 것입니다. 또한 Bootstrap을 프로젝트에 포함하는 매우 빠른 방법입니다.
프로젝트에 다음 스타일시트를 포함합니다.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
또한 스크립트에 다음을 추가합니다.
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
직접 다운로드를 통한 부트스트랩 사용
부트스트랩 사용을 시작하는 또 다른 쉬운 방법은 부트스트랩을 다운로드하는 것입니다. 소스 코드와 컴파일된 파일을 모두 얻을 수 있습니다.
Download
패키지 관리자를 통해 부트스트랩 사용
이것은 특정 패키지 관리자를 사용하는 것을 선호하는 사람들을 위한 더 많은 우선적 옵션입니다. 부트스트랩은 널리 사용되는 대부분의 패키지 관리자에서 사용할 수 있으며 제대로 사용하려면 Sass 컴파일러와 Autoprefixer가 필요합니다.
NPM
다음 명령을 사용하여 최신 안정 버전의 부트스트랩을 Node.js 기반 앱에 설치합니다.
npm install bootstrap
실
다음 Yarn 패키지로 부트스트랩을 설치합니다.
yarn add bootstrap
루비젬
Gemfile에 다음 코드를 추가하여 Bundler 및 RubyGems을 사용하여 부트스트랩을 설치하는 것이 좋습니다.
gem 'bootstrap', '~> 4.5.2'
Bundler를 사용하지 않는 경우 다음 명령을 실행하여 gem을 설치할 수도 있습니다.
gem install bootstrap -v 4.5.2
작곡가
다음 명령을 실행하여 Composer 패키지 관리자를 사용하여 부트스트랩을 설치할 수도 있습니다.
composer require twbs/bootstrap:4.5.2
누겟
마지막으로, .NET에서 개발하는 경우 NuGet을 사용하여 Bootstrap의 CSS 또는 Sass를 설치할 수도 있습니다.
Install-Package bootstrap
Install-Package bootstrap.sass
CSS 또는 Sass 변수 및 믹스인 작업
위의 방법 중 하나로 부트스트랩을 성공적으로 설치했다면 이제 일반 이전 CSS를 사용할지 아니면 개발 프로세스의 속도를 높이고 인터페이스를 훨씬 빠르게 사용자 지정할 수 있는 강력한 Sass 변수 및 믹스인을 사용할지 결정할 수 있습니다.
부트스트랩을 사용하는 간단하지만 효율적인 작업 환경을 만드는 방법get started with using Gulp 4, Bootstrap Sass, and BrowserSync에 대한 매우 자세한 기사를 작성했습니다.
부트스트랩 테마 및 템플릿
Themesberg에서 무료 및 프리미엄Bootstrap templates, themes, and UI kits 중 일부를 다운로드하거나 구매하여 전문적으로 디자인된 템플릿을 사용하여 많은 시간을 절약하고 이점을 얻을 수 있습니다.
각 테마는 권장되는 Gulp, Bootstrap Sass 및 BrowserSync 스택 환경을 사용합니다. 또한 Bootstrap 5를 사용하는 최신 테마는 더 이상 jQuery를 종속성으로 필요로 하지 않으므로 웹 사이트를 더 빠르고 쉽게 작업할 수 있습니다.
Reference
이 문제에 관하여(부트스트랩을 사용하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/themesberg/how-to-use-bootstrap-17ni텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
