이 글은 기계 번역의 미러 문서이며, 원본 기사로 바로 이동하려면 여기를 클릭해 주세요.

보기: 2539|회답: 0

[부츠스트랩] Bootstrap 5 파일 콘텐츠 구조에 대한 간단한 개요를 확인하세요

[링크 복사]
게시됨 2024. 7. 25. 오전 9:18:53 | | | |
요구사항: Bootstrap은 많은 CSS 스타일을 캡슐화하는 데 도움을 주며, 단지 클래스에서 참조하기만 하면 됩니다. 프론트엔드 UI 프레임워크(예: Angular Material UI, NG-ZORRO, Kendo UI)를 사용할 때, Bootstrap의 스타일을 사용하고 싶다면 어떻게 해야 할까요? 프로젝트 내에서 Bootstrap과 다른 UI 프레임워크를 서로 간섭하지 않고 공존하는 방법은 무엇인가요?

부트스트랩은 강력하고 기능이 풍부한 프론트엔드 툴킷입니다. 프로토타입부터 양산까지 단 몇 분 만에 무엇이든 만들 수 있습니다.

다음 명령어를 사용하여 npm을 사용하여 부트스트랩 버전 5.3.3을 설치하세요:

설치 후 폴더 node_modules\bootstrap 디렉터리 구조는 다음과 같습니다:

권 일련번호는 AA1B-3F2F입니다
D:.
│ 라이선스
│ package.json
│ README.md
│  
├─ 디스트
│ ├─css
│ │ bootstrap-grid.css
│ │ bootstrap-grid.css.map
│ │ bootstrap-grid.min.css
│ │ bootstrap-grid.min.css.map
│ │ bootstrap-grid.rtl.css
│ │ bootstrap-grid.rtl.css.map
│ │ bootstrap-grid.rtl.min.css
│ │ bootstrap-grid.rtl.min.css.map
│ │ bootstrap-reboot.css
│ │ bootstrap-reboot.css.map
│ │ bootstrap-reboot.min.css
│ │ bootstrap-reboot.min.css.map
│ │ bootstrap-reboot.rtl.css
│ │ bootstrap-reboot.rtl.css.map
│ │ bootstrap-reboot.rtl.min.css
│ │ bootstrap-reboot.rtl.min.css.map
│ │ bootstrap-utilities.css
│ │ bootstrap-utilities.css.map
│ │ bootstrap-utilities.min.css
│ │ bootstrap-utilities.min.css.map
│ │ bootstrap-utilities.rtl.css
│ │ bootstrap-utilities.rtl.css.map
│ │ bootstrap-utilities.rtl.min.css
│ │ bootstrap-utilities.rtl.min.css.map
│ │ bootstrap.css
│ │ bootstrap.css.map
│ │ bootstrap.min.css
│ │ bootstrap.min.css.map
│ │ bootstrap.rtl.css
│ │ bootstrap.rtl.css.map
│ │ bootstrap.rtl.min.css
│ bootstrap.rtl.min.css.map
│  │
│ └─js
│ bootstrap.bundle.js
│ bootstrap.bundle.js.map
│ bootstrap.bundle.min.js
│ bootstrap.bundle.min.js.map
│ bootstrap.esm.js
│ bootstrap.esm.js.map
│ bootstrap.esm.min.js
│ bootstrap.esm.min.js.map
│ bootstrap.js
│ bootstrap.js.map
│ bootstrap.min.js
│ bootstrap.min.js.map

├─js
│ │ index.esm.js
│ │ index.umd.js
│  │
│ ├─dist
│ │ alert.js
│ │ alert.js.map
│ │ │ base-component.js
│ │ base-component.js.map
│ │ │ button.js
│ │ button.js.map
│ │ carousel.js
│ │ carousel.js.map
│ │ collapse.js
│ │ │ collapse.js.map
│ │ dropdown.js
│ │ dropdown.js.map
│ │ │ modal.js
│ │ modal.js.map
│ │ offcanvas.js
│ │ offcanvas.js.map
│ │ │ popover.js
│ │ popover.js.map
│ │ │ scrollspy.js
│ │ scrollspy.js.map
│ │ tab.js
│ │ tab.js.map
│ │ │ toast.js
│ │ toast.js.map
│ │ │ tooltip.js
│ │ tooltip.js.map
│  │  │
│ │ ├─돔
│ │ data.js
│ │ data.js.map
│ │ │ event-handler.js
│ │ event-handler.js.map
│ │ │ manipulator.js
│ │ manipulator.js.map
│ │ │ selector-engine.js
│ │ selector-engine.js.map
│  │  │
│ │ └─util
│ │ backdrop.js
│ │ backdrop.js.map
│ │ component-functions.js
│ │ component-functions.js.map
│ │ config.js
│ │ config.js.map
│ │ focustrap.js
│ │ focustrap.js.map
│ │ index.js
│ │ index.js.map
│ │ sanitizer.js
│ │ sanitizer.js.map
│ │ scrollbar.js
│ │ scrollbar.js.map
│ │ swipe.js
│ swipe.js.map
│ │ template-factory.js
│ │ template-factory.js.map
│  │
│ └─src
│ │ alert.js
│ │ base-component.js
│ │ button.js
│ │ carousel.js
│ │ collapse.js
│ │ dropdown.js
│ │ modal.js
│ │ offcanvas.js
│ │ popover.js
│ │ scrollspy.js
│ │ tab.js
│ │ toast.js
│ │ tooltip.js
│      │
│ ├─돔
│ │ data.js
│ │ event-handler.js
│ │ manipulator.js
│ │ selector-engine.js
│      │
│ └─util
│ backdrop.js
│ component-functions.js
│ config.js
│ focustrap.js
│ index.js
│ sanitizer.js
│ scrollbar.js
│ swipe.js
│ template-factory.js

└─SCSS
    │ bootstrap-grid.scss
    │ bootstrap-reboot.scss
    │ bootstrap-utilities.scsss
    │ bootstrap.scss
    │ _accordion.SCSS
    │ _alert.SCSS
    │ _badge.scss
    │ _breadcrumb.scss
    │ _button-group.scss
    │ _buttons.SCSS
    │ _card.scss
    │ _carousel.SCSS
    │ _close.SCSS
    │ _containers.scss
    │ _dropdown.scss
    │ _forms.SCSS
    │ _functions.scss
    │ _grid.SCSS
    │ _helpers.SCSS
    │ _images.SCSS
    │ _list-group.scss
    │ _maps.scss
    │ _mixins.scss
    │ _modal.scss
    │ _nav.SCSS
    │ _navbar.SCSS
    │ _offcanvas.SCSS
    │ _pagination.SCSS
    │ _placeholders.scss
    │ _popover.SCSS
    │ _progress.scss
    │ _reboot.scsss
    │ _root.scss
    │ _spinners.SCSS
    │ _tables.SCSS
    │ _toasts.scss
    │ _tooltip.scss
    │ _transitions.SCSS
    │ _type.scss
    │ _utilities.scss
    │ _variables-다크.SCSS
    │ _variables.SCSS
    │
    ├─형태
    │ _floating-labels.scss
    │ _form-체크.SCSS
    │ _form-control.scss
    │ _form-range.scss
    │ _form-select.scss
    │ _form-텍스트.SCSS
    │ _input-group.scsss
    │ _labels.SCSS
    │ _validation.SCSS
    │
    ├─도우미들
    │ _clearfix.scss
    │ _color-bg.scss
    │ _colored-링크스.SCSS
    │ _focus-ring.scss
    │ _icon-링크.SCSS
    │ _position.SCSS
    │ _ratio.scss
    │ _stacks.scss
    │ _stretched-링크.scss
    │ _text-절단.SCSS
    │ _visually-hidden.scss
    │ _vr.scss
    │
    ├─믹신
    │ _alert.SCSS
    │ _backdrop.SCSS
    │ _banner.SCSS
    │ _border-반경.scsss
    │ _box-그림자.SCSS
    │ _breakpoints.SCSS
    │ _buttons.SCSS
    │ _caret.scss
    │ _clearfix.scss
    │ _color-mode.scsss
    │ _color-scheme.scsss
    │ _container.scss
    │ _deprecate.SCSS
    │ _forms.SCSS
    │ _gradients.scss
    │ _grid.SCSS
    │ _image.SCSS
    │ _list-group.scss
    │ _lists.scss
    │ _pagination.SCSS
    │ _reset-text.scsss
    │ _resize.scss
    │ _table-변형.scsss
    │ _text-트런케이트.SCSS
    │ _transition.scss
    │ _utilities.scss
    │ _visually-hidden.scss
    │
    ├─ 유틸리티
    │ _api.scss
    │
    └─ 판매자
            _rfs.scss

여기서 dist 폴더는 컴파일된 파일, scss는 js, 소스 코드는 CSS와 JavaScript입니다.

컴파일된 부트스트랩의 css 파일 구조는 다음과 같습니다:



일반적으로, 본인 상황에 따라 인용하라:bootstrap-utilities.min.cssbootstrap-grid.min.css깡통.

참조:하이퍼링크 로그인이 보입니다.





이전의:공유 기억에 대해 두세 가지를 말씀드리자면
다음:[연습] Dapper를 사용해 SQLite 데이터베이스를 운영하세요
면책 조항:
Code Farmer Network에서 발행하는 모든 소프트웨어, 프로그래밍 자료 또는 기사는 학습 및 연구 목적으로만 사용됩니다; 위 내용은 상업적 또는 불법적인 목적으로 사용되지 않으며, 그렇지 않으면 모든 책임이 사용자에게 부담됩니다. 이 사이트의 정보는 인터넷에서 가져온 것이며, 저작권 분쟁은 이 사이트와는 관련이 없습니다. 위 내용은 다운로드 후 24시간 이내에 컴퓨터에서 완전히 삭제해야 합니다. 프로그램이 마음에 드신다면, 진짜 소프트웨어를 지원하고, 등록을 구매하며, 더 나은 진짜 서비스를 받아주세요. 침해가 있을 경우 이메일로 연락해 주시기 바랍니다.

Mail To:help@itsvse.com