Este artículo es un artículo espejo de traducción automática, por favor haga clic aquí para saltar al artículo original.

Vista: 2539|Respuesta: 0

[Bootstrap] Obtén una visión rápida de la estructura de contenido de los archivos Bootstrap 5

[Copiar enlace]
Publicado en 25/7/2024 9:18:53 | | | |
Requisitos: Bootstrap nos ayuda a encapsular un gran número de estilos CSS, solo necesitamos referenciarlos en la clase. Cuando usamos un framework de interfaz de usuario front-end (por ejemplo, Angular Material UI, NG-ZORRO, KENDO), ¿QUÉ PASA SI QUEREMOS USAR LOS ESTILOS EN Bootstrap? ¿Cómo convivís con Bootstrap y otros frameworks de interfaz de usuario en vuestro proyecto sin interferir entre vosotros?

Bootstrap es un potente y rico conjunto de herramientas para el front-end. Construye cualquier cosa (desde prototipo hasta producción) en solo unos minutos.

Instala la versión de arranque 5.3.3 usando npm con el siguiente comando:

Una vez instalado, la estructura de directorios de carpetas node_modules\bootstrap es la siguiente:

El número de serie del volumen es AA1B-3F2F
D:.
│ LICENCIA
│ package.json
│ README.md
│  
├─dist
│ ├─css
│ │ bootstrap-grid.css
│ │ bootstrap-grid.css.mapa
│ │ bootstrap-grid.min.css
│ │ bootstrap-grid.min.css.mapa
│ │ bootstrap-grid.rtl.css
│ │ bootstrap-grid.rtl.css.mapa
│ │ bootstrap-grid.rtl.min.css
│ │ bootstrap-grid.rtl.min.css.mapa
│ │ bootstrap-reboot.css
│ │ bootstrap-reboot.css.mapa
│ │ bootstrap-reboot.min.css
│ │ bootstrap-reboot.min.css.mapa
│ │ bootstrap-reboot.rtl.css
│ │ bootstrap-reboot.rtl.css.mapa
│ │ bootstrap-reboot.rtl.min.css
│ │ bootstrap-reboot.rtl.min.css.mapa
│ │ bootstrap-utilities.css
│ │ bootstrap-utilities.css.mapa
│ │ bootstrap-utilities.min.css
│ │ bootstrap-utilities.min.css.mapa
│ │ bootstrap-utilities.rtl.css
│ │ bootstrap-utilities.rtl.css.mapa
│ │ bootstrap-utilities.rtl.min.css
│ │ bootstrap-utilities.rtl.min.css.mapa
│ │ bootstrap.css
│ │ bootstrap.css.mapa
│ │ bootstrap.min.css
│ │ bootstrap.min.css.map
│ │ bootstrap.rtl.css
│ │ bootstrap.rtl.css.mapa
│ │ bootstrap.rtl.min.css
│ │ bootstrap.rtl.min.css.mapa
│  │
│ └─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.mapa
│ bootstrap.min.js
│ bootstrap.min.js.mapa

├─js
│ │ index.esm.js
│ │ index.umd.js
│  │
│ ├─dist
│ │ │ │ alert.js
│ │ │ alert.js.mapa
│ │ │ base-component.js
│ │ │ base-component.js.mapa
│ │ │ button.js
│ │ │ button.js.mapa
│ │ │ carousel.js
│ │ │ carousel.js.mapa
│ │ │ collapse.js
│ │ │ collapse.js.mapa
│ │ │ dropdown.js
│ │ │ dropdown.js.mapa
│ │ │ modal.js
│ │ │ modal.js.mapa
│ │ │ offcanvas.js
│ │ │ offcanvas.js.mapa
│ │ │ popover.js
│ │ │ popover.js.mapa
│ │ │ scrollspy.js
│ │ │ scrollspy.js.mapa
│ │ │ │ tab.js
│ │ │ tab.js.mapa
│ │ │ toast.js
│ │ │ toast.js.mapa
│ │ │ tooltip.js
│ │ │ tooltip.js.mapa
│  │  │
│ │ ├─dom
│ │ │ data.js
│ │ │ data.js.mapa
│ │ │ event-handler.js
│ │ │ event-handler.js.mapa
│ │ │ manipulator.js
│ │ │ manipulator.js.mapa
│ │ │ selector-engine.js
│ │ │ selector-engine.js.mapa
│  │  │
│ │ └─util
│ │ backdrop.js
│ │ backdrop.js.mapa
│ │ component-functions.js
│ │ component-functions.js.mapa
│ │ config.js
│ │ config.js.mapa
│ │ focustrap.js
│ │ focustrap.js.mapa
│ │ index.js
│ │ index.js.mapa
│ │ sanitizer.js
│ │ sanitizer.js.mapa
│ │ scrollbar.js
│ │ scrollbar.js.mapa
│ │ swipe.js
│ │ swipe.js.mapa
│ │ template-factory.js
│ │ template-factory.js.mapa
│  │
│ └─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
│      │
│ ├─dom
│ │ 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.scss
    │ 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.scss
    │ _root.scss
    │ _spinners.scss
    │ _tables.scss
    │ _toasts.scss
    │ _tooltip.scss
    │ _transitions.scss
    │ _type.scss
    │ _utilities.scss
    │ _variables-dark.scss
    │ _variables.scss
    │
    ├─formas
    │ _floating-labels.scss
    │ _form-check.scss
    │ _form-control.scss
    │ _form-rango.scss
    │ _form-select.scss
    │ _form-text.scss
    │ _input-group.scss
    │ _labels.scss
    │ _validation.scss
    │
    ├─ayudantes
    │ _clearfix.scss
    │ _color-bg.scss
    │ _colored-links.scss
    │ _focus-ring.scss
    │ _icon-link.scss
    │ _position.scss
    │ _ratio.scss
    │ _stacks.scss
    │ _stretched-link.scss
    │ _text-truncación.scss
    │ _visually-hidden.scss
    │ _vr.scss
    │
    ├─mixinas
    │ _alert.scss
    │ _backdrop.scss
    │ _banner.scss
    │ _border-radius.scss
    │ _box-shadow.scss
    │ _breakpoints.scss
    │ _buttons.scss
    │ _caret.scss
    │ _clearfix.scss
    │ _color-mode.scss
    │ _color-scheme.scss
    │ _container.scss
    │ _deprecate.scss
    │ _forms.scss
    │ _gradients.scss
    │ _grid.scss
    │ _image.scss
    │ _list-group.scss
    │ _lists.scss
    │ _pagination.scss
    │ _reset-text.scss
    │ _resize.scss
    │ _table-variants.scss
    │ _text-truncate.scss
    │ _transition.scss
    │ _utilities.scss
    │ _visually-hidden.scss
    │
    ├─utilidades
    │ _api.scss
    │
    └─Vendedor
            _rfs.scss

donde la carpeta dist es el archivo compilado, scss es el js y el código fuente es CSS y JavaScript.

La estructura de archivos css para Bootstrap compilado es la siguiente:



En general, según tu propia situación, cito:bootstrap-utilities.min.cssbootstrap-grid.min.cssEnlatar.

Referencia:El inicio de sesión del hipervínculo es visible.





Anterior:Dos o tres cosas sobre Memoria Compartida
Próximo:[Práctica] Usa Dapper para operar bases de datos SQLite
Renuncia:
Todo el software, materiales de programación o artículos publicados por Code Farmer Network son únicamente para fines de aprendizaje e investigación; El contenido anterior no se utilizará con fines comerciales o ilegales; de lo contrario, los usuarios asumirán todas las consecuencias. La información de este sitio proviene de Internet, y las disputas de derechos de autor no tienen nada que ver con este sitio. Debes eliminar completamente el contenido anterior de tu ordenador en un plazo de 24 horas desde la descarga. Si te gusta el programa, por favor apoya el software genuino, compra el registro y obtén mejores servicios genuinos. Si hay alguna infracción, por favor contáctanos por correo electrónico.

Mail To:help@itsvse.com