bootstrap-sass

KO | EN

gitlite — search

#python #typescript #llm #golang #go #machine-learning #awesome #cli #kubernetes #awesome-list #vue #pytorch #ios #openai

(★ 12,498)

Bootstrap 2와 3의 공식 Sass 포트입니다.

bootstrap-sass 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Bootstrap 3 for Sass
[![Gem Version](https://badge.fury.io/rb/bootstrap-sass.svg)](http://badge.fury.io/rb/bootstrap-sass)
[![npm version](https://img.shields.io/npm/v/bootstrap-sass.svg?style=flat)](https://www.npmjs.com/package/bootstrap-sass)
[![Bower Version](https://badge.fury.io/bo/bootstrap-sass.svg)](http://badge.fury.io/bo/bootstrap-sass)
[![Build Status](https://img.shields.io/travis/twbs/bootstrap-sass.svg)](https://travis-ci.org/twbs/bootstrap-sass)
`bootstrap-sass`는 [Bootstrap](https://github.com/twbs/bootstrap) 3의 Sass 기반 버전으로, Sass를 사용하는 애플리케이션에 바로 적용할 수 있습니다.
이 버전은 Bootstrap **3**입니다. Bootstrap **4**를 사용하려면 Ruby의 경우 [Bootstrap rubygem](https://github.com/twbs/bootstrap-rubygem)을 사용하고, 그 외의 경우 [메인 저장소](https://github.com/twbs/bootstrap)를 사용하세요.
## 설치
사용하는 환경에 맞는 가이드를 참조하세요:
* [Ruby on Rails](#a-ruby-on-rails).
* [Bower](#b-bower).
* [npm / Node.js](#c-npm--nodejs).
### a. Ruby on Rails
`bootstrap-sass`는 asset pipeline을 사용하여 Rails에 쉽게 적용할 수 있습니다.
Gemfile에 `bootstrap-sass` 젬을 추가하고, `sass-rails` 젬이 포함되어 있는지 확인하세요. 이 젬은 새로운 Rails 애플리케이션에 기본적으로 추가됩니다.
```ruby
gem 'bootstrap-sass', '~> 3.4.1'
gem 'sassc-rails', '>= 2.1.0'
```
`bundle install`을 실행하고 서버를 재시작하여 pipeline을 통해 파일을 사용할 수 있도록 합니다.
`app/assets/stylesheets/application.scss`에서 Bootstrap 스타일을 임포트합니다:
```scss
// "bootstrap-sprockets"는 "bootstrap" 및 "bootstrap/variables"보다 먼저 임포트되어야 합니다.
@import "bootstrap-sprockets";
@import "bootstrap";
```
아이콘 폰트가 작동하려면 `bootstrap`보다 `bootstrap-sprockets`가 먼저 임포트되어야 합니다.
파일 확장자가 `.scss`(또는 Sass 구문의 경우 `.sass`)인지 확인하세요. 새 Rails 앱을 생성한 직후라면
대신 `.css` 파일이 포함되어 있을 수 있습니다. 이 파일이 존재하면 Sass 대신 제공되므로 이름을 변경하세요:
```console
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
```
그런 다음, sass 파일에서 모든 `\*= require\_self` 및 `\*= require\_tree .` 구문을 제거합니다. 대신 `@import`를 사용하여 Sass 파일을 임포트하세요.
Sass에서 `\*= require`를 사용하지 마세요. 그렇지 않으면 다른 스타일시트가 Bootstrap 믹스인이나 변수에 [접근할 수 없게][antirequire] 됩니다.
Bootstrap JavaScript는 jQuery에 의존합니다.
Rails 5.1 이상을 사용하는 경우, Gemfile에 `jquery-rails` 젬을 추가하세요:
```ruby
gem 'jquery-rails'
```
```console
$ bundle install
```
`app/assets/javascripts/application.js`에서 Bootstrap 자바스크립트를 요구(require)합니다:
```js
//= require jquery
//= require bootstrap-sprockets
```
`application.js`에 `bootstrap-sprockets`와 `bootstrap`을 [동시에 포함해서는 안 됩니다](https://github.com/twbs/bootstrap-sass/issues/829#issuecomment-75153827).
`bootstrap-sprockets`는 개별 Bootstrap Javascript 파일(`alert.js` 또는 `dropdown.js` 등)을 제공하는 반면,
`bootstrap`은 모든 Bootstrap Javascript가 결합된 파일을 제공합니다.
#### Rails와 Bower 함께 사용하기
Rails에서 젬 대신 [bootstrap-sass Bower 패키지](#c-bower)를 사용할 때는 `config/application.rb`에서 에셋을 설정하세요:
```ruby
# Bower 에셋 경로
root.join('vendor', 'assets', 'bower\_components').to\_s.tap do |bower\_path|
config.sass.load\_paths << bower\_path
config.assets.paths << bower\_path
end
# Bootstrap 폰트 사전 컴파일
config.assets.precompile << %r(bootstrap-sass/assets/fonts/bootstrap/[\w-]+\.(?:eot|svg|ttf|woff2?)$)
# bootstrap-sass에 필요한 최소 Sass 숫자 정밀도
::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max
```
`application.scss`의 Bootstrap `@import` 구문을 다음과 같이 변경합니다:
```scss
$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` 지시어를 다음과 같이 변경합니다:
```js
//= require bootstrap-sass/assets/javascripts/bootstrap-

sprockets
```
#### Rails 4.x
`sprockets-rails` 버전이 v2.1.4 이상인지 확인해 주세요.
#### Rails 3.2.x
bootstrap-sass는 더 이상 Rails 3와 호환되지 않습니다. Rails 3.2와 호환되는 가장 최신 버전의 bootstrap-sass는 v3.1.1.0입니다.
### b. Bower
bootstrap-sass Bower 패키지는 node-sass 3.2.0+ 버전과 호환됩니다. 다음 명령어로 설치할 수 있습니다:
```console
$ bower install bootstrap-sass
```
Sass, JS 및 기타 모든 에셋은 [assets](/assets)에 위치해 있습니다.
기본적으로 `bower.json`의 main 필드에는 메인 `\_bootstrap.scss`와 모든 정적 에셋(폰트 및 JS)만 나열됩니다.
이는 [wiredep](https://github.com/taptapship/wiredep)과 같은 에셋 관리자와 기본적으로 호환됩니다.
#### Node.js Mincer
node-sass와 함께 [mincer][mincer]를 사용하는 경우, 다음과 같이 Bootstrap을 임포트하세요:
`application.css.ejs.scss` 파일에서 (주의: \*\*.css.ejs.scss\*\*):
```scss
// Import mincer asset paths helper integration
@import "bootstrap-mincer";
@import "bootstrap";
```
`application.js` 파일에서:
```js
//= require bootstrap-sprockets
```
mincer에 대한 다음 [example manifest.js](/test/dummy\_node\_mincer/manifest.js)도 참고하세요.
### c. npm / Node.js
```console
$ npm install bootstrap-sass
```
## Configuration
### Sass
기본적으로 Bootstrap의 모든 내용이 임포트됩니다.
컴포넌트를 명시적으로 임포트할 수도 있습니다. 전체 모듈 목록으로 시작하려면 [`\_bootstrap.scss`](assets/stylesheets/\_bootstrap.scss) 파일을 에셋 폴더에 `\_bootstrap-custom.scss` 이름으로 복사하세요.
그런 다음 `\_bootstrap-custom`에서 원하지 않는 컴포넌트를 주석 처리합니다.
애플리케이션 Sass 파일에서 `@import 'bootstrap'`을 다음으로 교체합니다:
```scss
@import 'bootstrap-custom';
```
### Sass: Number Precision
bootstrap-sass는 [Sass 숫자 정밀도(number precision)][sass-precision] 최소값 8을 [요구합니다](https://github.com/twbs/bootstrap-sass/issues/409) (기본값은 5).
`sassc-rails` 젬을 사용하는 경우 Ruby에 대한 정밀도가 자동으로 설정됩니다.
Ruby에서 npm 또는 Bower 버전을 사용하는 경우, 다음과 같이 설정할 수 있습니다:
```ruby
::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max
```
### Sass: Autoprefixer
Bootstrap은 [Autoprefixer][autoprefixer] 사용을 요구합니다.
[Autoprefixer][autoprefixer]는 [Can I Use](https://caniuse.com/)의 값을 사용하여 CSS 규칙에 벤더 프리픽스를 추가합니다.
[업스트림 Bootstrap의 브라우저 호환성 수준](https://getbootstrap.com/getting-started/#support)에 맞추려면 Autoprefixer의 `browsers` 옵션을 다음과 같이 설정하세요:
```json
[
"Android 2.3",
"Android >= 4",
"Chrome >= 20",
"Firefox >= 24",
"Explorer >= 8",
"iOS >= 6",
"Opera >= 12",
"Safari >= 6"
]
```
### JavaScript
[`assets/javascripts/bootstrap.js`](/assets/javascripts/bootstrap.js)에는 [올바른 순서로](/assets/javascripts/bootstrap-sprockets.js) 연결된 Bootstrap의 모든 JavaScript가 포함되어 있습니다.
#### JavaScript with Sprockets or Mincer
Sprockets나 Mincer를 사용하는 경우, 대신 `bootstrap-sprockets`를 요구하여 개별 모듈을 로드할 수 있습니다:
```js
// Load all Bootstrap JavaScript
//= require bootstrap-sprockets
```
의존성도 함께 요구하는 경우 개별 모듈을 로드할 수도 있습니다.
의존성은 [Bootstrap JS 문서][jsdocs]에서 확인할 수 있습니다.
```js
//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/dropdown
```
### Fonts
폰트는 다음과 같이 참조됩니다:
```scss
"#{$icon-font-path}#{$icon-font-name}.eot"
```
에셋 경로 헬퍼가 사용되는 경우 `$icon-font-path`의 기본값은 `bootstrap/`이며, 그렇지 않은 경우 `../fonts/bootstrap/`입니다.
Compass, Sprockets 또는 Mincer와 함께 bootstrap-sass를 사용할 때는 Bootstrap 자체보다 먼저 관련 경로 헬퍼를 \*\*반드시\*\* 임포트해야 합니다. 예시:
```scss
@import "bootstrap-compass";
@import "bootstrap";
```
## Usage
### Sass
Bootstrap의 모든 스타일, 믹스인, 변수를 가져오려면 Bootstrap을 Sass 파일(예: `application.scss`)에 임포트하세요!
```scss
@import "bootstrap";
```
선택 사항인 Bootstrap 테마를 포함할 수도 있습니다:
```scss
@import "bootstrap/theme";
```
Bootstrap 변수의 전체 목록은 [여기](https://getbootstrap.com/customize/#less-variables)에서 확인할 수 있습니다. 간단히 다음과 같이 재정의할 수 있습니다.

`@import` 지시어 앞에 변수를 재정의합니다. 예시:
```scss
$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;
@import "bootstrap";
```
### Eyeglass
Bootstrap은 [Eyeglass](https://github.com/sass-eyeglass/eyeglass) 모듈로 사용할 수 있습니다. NPM을 통해 Bootstrap을 설치한 후, 다음과 같이 Bootstrap 라이브러리를 임포트할 수 있습니다:
```scss
@import "bootstrap-sass/bootstrap"
```
또는 필요한 Bootstrap 파트만 임포트할 수도 있습니다:
```scss
@import "bootstrap-sass/bootstrap/variables";
@import "bootstrap-sass/bootstrap/mixins";
@import "bootstrap-sass/bootstrap/carousel";
```
## Version
Bootstrap for Sass의 버전은 [PATCH](https://semver.org/spec/v2.0.0.html)라고 불리는 마지막 숫자가 원본(upstream) 버전과 다를 수 있습니다. 패치 버전은 해당하는 원본 마이너 버전보다 앞설 수 있습니다.
이는 Sass 전용 변경 사항을 배포해야 할 때 발생합니다.
v3.3.2 이전에는 Bootstrap for Sass 버전이 Sass 전용 변경 사항에 대한 추가 숫자와 함께 원본 버전을 반영하곤 했습니다. 이는 Bower 및 npm 호환성 문제로 인해 변경되었습니다.
원본 버전과 Bootstrap for Sass 버전의 대응 관계는 다음과 같습니다:
| Upstream | Sass |
|---------:|--------:|
| 3.3.4+ | same |
| 3.3.2 | 3.3.3 |
| <= 3.3.1 | 3.3.1.x |
업그레이드할 때는 항상 [CHANGELOG.md](/CHANGELOG.md)를 참조하세요.
---
## Development and Contributing
bootstrap-sass 자체 개발에 기여하고 싶다면 이 섹션을 읽어보세요.
### Upstream Converter
bootstrap-sass를 Bootstrap의 원본 변경 사항과 동기화 상태로 유지하는 것은 오류가 발생하기 쉽고 시간이 많이 걸리는 수동 작업이었습니다. Bootstrap 3에서는 이를 자동화하는 컨버터를 도입했습니다.
\*\*참고: 단순히 Bootstrap 3를 \*사용\*하려는 경우라면 위의 [installation](#installation) 섹션을 참조하세요.\*\*
이제 Bootstrap 프로젝트의 원본 변경 사항을 `convert` rake 태스크를 사용하여 가져올 수 있습니다.
메인 [twbs/bootstrap](https://github.com/twbs/bootstrap) 저장소에서 master 브랜치를 가져오는 실행 예시는 다음과 같습니다:
rake convert
이렇게 하면 최신 LESS를 Sass로 변환하고 최신 JS로 업데이트합니다.
특정 브랜치나 버전을 변환하려면 첫 번째 태스크 인수로 브랜치 이름이나 커밋 해시를 전달하세요:
rake convert[e8a1df5f060bf7e6631554648e0abde150aedbe4]
최신 컨버터 스크립트는 [여기][converter]에 있으며 다음과 같은 작업을 수행합니다:
\* 원본 Bootstrap LESS 파일을 일치하는 SCSS 파일로 변환합니다.
\* 모든 원본 JavaScript를 `assets/javascripts/bootstrap`, `assets/javascripts/bootstrap-sprockets.js`의 Sprockets 매니페스트, 그리고 `assets/javascripts/bootstrap.js`의 병합 파일로 복사합니다.
\* 모든 원본 폰트 파일을 `assets/fonts/bootstrap`으로 복사합니다.
\* [version.rb][version]의 `Bootstrap::BOOTSTRAP\_SHA`를 브랜치 sha로 설정합니다.
이 컨버터는 기존 LESS를 SCSS로 완전히 변환합니다. 변환은 자동이지만 특정 변환에 대한 지침이 필요합니다(컨버터 출력 참조).
`conversion` 태그가 지정된 GitHub 이슈를 제출해 주세요.
## Credits
bootstrap-sass에는 여러 주요 기여자유가 있습니다:
\* [Thomas McDonald](https://twitter.com/thomasmcdonald\_)
\* [Tristan Harward](http://www.trisweb.com)
\* Peter Gumeson
\* [Gleb Mazovetskiy](https://github.com/glebm)
그리고 [상당수의 다른 기여자들][contrib]이 있습니다.
## You're in good company
bootstrap-sass는 웹 전반의 다음과 같은 멋진 프로젝트들을 구축하는 데 사용됩니다:
[Diaspora](https://diasporafoundation.org/), [rails\_admin](https://github.com/sferik/rails\_admin),
Michael Hartl의 [Rails Tutorial](https://www.railstutorial.org/), [gitlabhq](http://gitlabhq.com/),
[kandan](http://getkandan.com/).
[converter]: https://github.com/twbs/bootstrap-sass/blob/master/tasks/converter/less\_conversion.rb
[version]: https://github.com/twbs/bootstrap-sass/blob/master/lib/bootstrap-sass/version.rb
[contrib]: https://github.com/twbs/bootstrap-sass/graphs/contributors
[antirequire]: https://github.com/twbs/bootstrap-sass/issues/79#issuecomment-4428595
[jsdocs]: https://getbootstrap.com/javascript/#transitions
[sass-precision]:

http://sass-lang.com/documentation/Sass/Script/Value/Number.html#precision%3D-class\_method
[mincer]: https://github.com/nodeca/mincer
[autoprefixer]: https://github.com/postcss/autoprefixer

bootstrap-sass

bootstrap-sass 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

bootstrap-sass

bootstrap-sass 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README