bootstrap sass
v3.4.1
bootstrap-sass Bootstrap 3의 Sass 기반 버전으로, Sass 기반 애플리케이션에 바로 사용할 수 있습니다.
이것은 부트스트랩 3 입니다. Bootstrap 4 의 경우 Ruby를 사용하는 경우 Bootstrap rubygem을 사용하고, 그렇지 않으면 기본 저장소를 사용하세요.
선택한 환경에 적합한 가이드를 참조하세요.
루비 온 레일즈.
나무 그늘.
npm / Node.js.
bootstrap-sass 자산 파이프라인을 통해 Rails에 쉽게 포함됩니다.
Gemfile에 bootstrap-sass gem을 추가하고 sass-rails gem이 있는지 확인해야 합니다. 기본적으로 새 Rails 애플리케이션에 추가됩니다.
gem 'bootstrap-sass', '~> 3.4.1'gem 'sassc-rails', '>= 2.1.0'
bundle install 하고 서버를 다시 시작하여 파이프라인을 통해 파일을 사용할 수 있게 만드세요.
app/assets/stylesheets/application.scss 에서 부트스트랩 스타일을 가져옵니다.
// "bootstrap-sprockets"는 "bootstrap" 및 "bootstrap/variables" 전에 가져와야 합니다.@import "bootstrap-sprockets";@import "bootstrap";
아이콘 글꼴이 작동하려면 부트 bootstrap 전에 bootstrap-sprockets 가져와야 합니다.
파일의 확장자가 .scss (또는 Sass 구문의 경우 .sass )인지 확인하세요. 방금 새로운 Rails 앱을 생성했다면 대신 .css 파일이 함께 제공될 수 있습니다. 이 파일이 있으면 Sass 대신 제공되므로 이름을 바꾸십시오.
$ mv 앱/자산/stylesheets/application.css 앱/assets/stylesheets/application.scss
그런 다음 *= require_self 및 *= require_tree . sass 파일의 명령문. 대신 @import 사용하여 Sass 파일을 가져오세요.
Sass에서 *= require 사용하지 마세요. 그렇지 않으면 다른 스타일시트가 Bootstrap 믹스인이나 변수에 액세스할 수 없습니다.
부트스트랩 JavaScript는 jQuery에 의존합니다. Rails 5.1 이상을 사용하는 경우 Gemfile에 jquery-rails gem을 추가하세요.
보석 'jquery-rails'
$ 번들 설치
app/assets/javascripts/application.js 에 부트스트랩 Javascript가 필요합니다.
//= jquery 필요//= bootstrap-sprocket 필요
bootstrap-sprockets 와 bootstrap 둘 다 application.js 에 포함되어서는 안 됩니다.
bootstrap-sprockets 개별 Bootstrap Javascript 파일(예: alert.js 또는 dropdown.js )을 제공하는 반면 bootstrap 모든 Bootstrap Javascript를 포함하는 연결된 파일을 제공합니다.
Rails의 gem 대신 bootstrap-sass Bower 패키지를 사용하는 경우 config/application.rb 에서 자산을 구성하십시오.
# Bower 자산 경로root.join('vendor', 'assets', 'bower_comComponents').to_s.tap do |bower_path| config.sass.load_paths << bower_path
config.assets.paths << bower_pathend# 사전 컴파일 부트스트랩 글꼴config.assets.precompile << %r(bootstrap-sass/assets/fonts/bootstrap/[w-]+.(?:eot|svg|ttf|woff2?)$ )# bootstrap-sass::Sass::Script::Value::Number.precision = [8, ::Sass::스크립트::값::숫자.정밀도].max application.scss 의 Bootstrap @import 문을 다음으로 바꾸세요.
$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";@import "bootstrap-sass/assets/stylesheets/bootstrap-sprockets";@import "bootstrap-sass/assets/stylesheets/bootstrap";
application.js 의 Bootstrap require 지시문을 다음으로 바꾸세요.
//= bootstrap-sass/assets/javascripts/bootstrap-sprockets 필요
sprockets-rails 이 v2.1.4 이상인지 확인하세요.
bootstrap-sass는 더 이상 Rails 3과 호환되지 않습니다. Rails 3.2와 호환되는 bootstrap-sass의 최신 버전은 v3.1.1.0입니다.
bootstrap-sass Bower 패키지는 node-sass 3.2.0+와 호환됩니다. 다음을 사용하여 설치할 수 있습니다.
$ Bower 설치 bootstrap-sass
Sass, JS 및 기타 모든 자산은 자산에 있습니다.
기본적으로 bower.json 기본 필드에는 기본 _bootstrap.scss 및 모든 정적 자산(글꼴 및 JS)만 나열됩니다. 이는 기본적으로 wiredep과 같은 자산 관리자와 호환됩니다.
node-sass와 함께 mincer를 사용하는 경우 다음과 같이 Bootstrap을 가져옵니다.
application.css.ejs.scss (NB .css.ejs.scss )에서:
// Mincer 자산 경로 가져오기 helper Integration@import "bootstrap-mincer";@import "bootstrap";
application.js 에서:
//= 부트스트랩 스프로킷이 필요합니다.
Mincer에 대한 이 예제 Manifest.js도 참조하세요.
$ npm 설치 bootstrap-sass
기본적으로 모든 Bootstrap을 가져옵니다.
구성요소를 명시적으로 가져올 수도 있습니다. 전체 모듈 목록으로 시작하려면 _bootstrap.scss 파일을 자산에 _bootstrap-custom.scss 로 복사하세요. 그런 다음 _bootstrap-custom 에서 원하지 않는 구성 요소를 주석 처리합니다. 애플리케이션 Sass 파일에서 @import 'bootstrap' 다음으로 바꿉니다.
@import '부트스트랩-맞춤형';
bootstrap-sass에는 최소 Sass 숫자 정밀도 8이 필요합니다(기본값은 5).
sassc-rails gem을 사용할 때 Ruby에 대한 정밀도가 자동으로 설정됩니다. Ruby와 함께 npm 또는 Bower 버전을 사용하는 경우 다음을 사용하여 설정할 수 있습니다.
::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max
부트스트랩에는 Autoprefixer를 사용해야 합니다. Autoprefixer는 Can I Use의 값을 사용하여 CSS 규칙에 공급업체 접두사를 추가합니다.
업스트림 Bootstrap의 브라우저 호환성 수준을 일치시키려면 Autoprefixer의 browsers 옵션을 다음과 같이 설정하십시오.
[ "Android 2.3", "Android >= 4", "Chrome >= 20", "Firefox >= 24", "Explorer >= 8", "iOS >= 6", "Opera >= 12", "Safari >= 6"]
assets/javascripts/bootstrap.js 에는 Bootstrap의 모든 JavaScript가 올바른 순서로 연결되어 포함되어 있습니다.
Sprockets 또는 Mincer를 사용하는 경우 개별 모듈을 로드하는 대신 bootstrap-sprockets 요구할 수 있습니다.
// 모든 부트스트랩 JavaScript 로드//= 부트스트랩 스프로킷 필요
종속성이 필요한 경우 개별 모듈을 로드할 수도 있습니다. Bootstrap JS 문서에서 종속성을 확인할 수 있습니다.
//= bootstrap/scrollspy 필요//= bootstrap/modal 필요//= bootstrap/dropdown 필요
글꼴은 다음과 같이 참조됩니다.
"#{$icon-font-path}#{$icon-font-name}.eot" 자산 경로 도우미를 사용하는 경우 $icon-font-path 기본값은 bootstrap/ 이고 그렇지 않은 경우 ../fonts/bootstrap/ 입니다.
Compass, Sprockets 또는 Mincer와 함께 bootstrap-sass를 사용하는 경우 Bootstrap 자체보다 먼저 관련 경로 도우미를 가져와야 합니다 . 예를 들면 다음과 같습니다.
@import "부트스트랩-나침반";@import "부트스트랩";
Bootstrap의 스타일, 믹스인 및 변수를 모두 얻으려면 Bootstrap을 Sass 파일(예: application.scss )로 가져오세요!
@import "부트스트랩";
선택적 Bootstrap 테마를 포함할 수도 있습니다.
@import "부트스트랩/테마";
Bootstrap 변수의 전체 목록은 여기에서 찾을 수 있습니다. @import 지시문 앞의 변수를 재정의하여 이를 재정의할 수 있습니다. 예:
$navbar-기본-bg: #312312;$light-orange: #ff8c00;$navbar-default-color: $light-orange;@import "부트스트랩";
Bootstrap은 안경 모듈로 제공됩니다. NPM을 통해 Bootstrap을 설치한 후 다음을 통해 Bootstrap 라이브러리를 가져올 수 있습니다.
@import "bootstrap-sass/bootstrap"
또는 필요한 Bootstrap 부분만 가져오세요.
@import "bootstrap-sass/bootstrap/variables";@import "bootstrap-sass/bootstrap/mixins";@import "bootstrap-sass/bootstrap/carousel";
Sass 버전용 부트스트랩은 PATCH라고 하는 마지막 번호의 업스트림 버전과 다를 수 있습니다. 패치 버전은 해당 업스트림 마이너 버전보다 앞서 있을 수 있습니다. 이는 Sass 관련 변경 사항을 릴리스해야 할 때 발생합니다.
v3.3.2 이전에는 Sass 관련 변경 사항에 대한 추가 번호와 함께 업스트림 버전을 반영하는 데 Sass용 Bootstrap 버전이 사용되었습니다. 이는 Bower 및 npm 호환성 문제로 인해 변경되었습니다.
업스트림 버전과 Sass용 Bootstrap 버전은 다음과 같습니다.
| 업스트림 | 사스 |
|---|---|
| 3.3.4+ | 같은 |
| 3.3.2 | 3.3.3 |
| <= 3.3.1 | 3.3.1.x |
업그레이드할 때 항상 CHANGELOG.md를 참조하세요.
bootstrap-sass 자체 개발에 도움을 주고 싶다면 이 섹션을 읽어보세요.
Bootstrap-sass를 Bootstrap의 업스트림 변경 사항과 동기화 상태로 유지하는 것은 오류가 발생하기 쉽고 시간이 많이 걸리는 수동 프로세스였습니다. Bootstrap 3에서는 이를 자동화하는 변환기를 도입했습니다.
참고: Bootstrap 3만 사용 하려는 경우 위의 설치 섹션을 참조하세요.
이제 Bootstrap 프로젝트에 대한 업스트림 변경 사항을 rake convert 작업을 사용하여 가져올 수 있습니다.
다음은 기본 twbs/bootstrap 저장소에서 마스터 브랜치를 풀다운하는 실행 예입니다.
rake convert
그러면 최신 LESS가 Sass로 변환되고 최신 JS로 업데이트됩니다. 특정 브랜치나 버전을 변환하려면 브랜치 이름이나 커밋 해시를 첫 번째 작업 인수로 전달하세요.
rake convert[e8a1df5f060bf7e6631554648e0abde150aedbe4]
최신 변환기 스크립트는 여기에 있으며 다음을 수행합니다.
업스트림 Bootstrap LESS 파일을 일치하는 SCSS 파일로 변환합니다.
모든 업스트림 JavaScript를 assets/javascripts/bootstrap , assets/javascripts/bootstrap-sprockets.js 의 Sprockets 매니페스트 및 assets/javascripts/bootstrap.js 의 연결에 복사합니다.
모든 업스트림 글꼴 파일을 assets/fonts/bootstrap 에 복사합니다.
version.rb의 Bootstrap::BOOTSTRAP_SHA sha 분기로 설정합니다.
이 변환기는 원본 LESS를 SCSS로 완전히 변환합니다. 변환은 자동이지만 특정 변환에 대한 지침이 필요합니다(변환기 출력 참조). conversion 태그가 붙은 GitHub 문제를 제출해 주세요.
bootstrap-sass에는 다수의 주요 기여자가 있습니다:
토마스 맥도날드
트리스탄 하워드
피터 검슨
글렙 마조베츠키
그리고 상당수의 다른 기여자들.
bootstrap-sass는 Diaspora, Rails_admin, Michael Hartl의 Rails Tutorial, gitlabhq 및 kandan을 포함하여 웹 전체에서 멋진 프로젝트를 구축하는 데 사용됩니다.
