Bootstrap
-
Bootstrap - Optimize(최적화)Bootstrap 2021. 5. 29. 21:10
https://getbootstrap.com/docs/5.0/customize/optimize/ Optimize Keep your projects lean, responsive, and maintainable so you can deliver the best experience and focus on more important jobs. getbootstrap.com 예) Dropdown 컴포넌트 최적화 bundle로 import 하던 것을 Dropdown만 import 하도록 변경 Dropdown 초기화 https://getbootstrap.com/docs/5.0/components/dropdowns/#via-javascript bundle로 import를 하지 않기 때문에 popperjs 모듈 설치 ..
-
Bootstrap - 테마 색상 커스터마이징Bootstrap 2021. 5. 29. 20:55
https://getbootstrap.com/docs/5.0/customize/overview/ Customize Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more. getbootstrap.com // Required @import '../node_modules/bootstrap/scss/functions'; @import '../node_modules/bootstrap/scss/variables'; @import '../node_modules/bootstrap/scss/mixins'; $secondary: yellowgree..
-
Bootstrap - ToolTipBootstrap 2021. 5. 29. 20:37
https://getbootstrap.com/docs/5.0/components/tooltips/ Tooltips Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage. getbootstrap.com 부트스트랩 툴팁은 성능상의 이유로 직접 초기화해야 한다. Tooltip on top Tooltip on right Tooltip on bottom Tooltip on left var tooltipTriggerList = [].slice.call( document.querySel..
-
Bootstrap - 버튼Bootstrap 2021. 5. 29. 17:33
https://getbootstrap.com/docs/5.0/components/buttons/ Buttons Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. getbootstrap.com 기본 버튼 Primary Secondary Success Danger Warning Info Light Dark Link Outline 버튼 Primary Secondary Success Danger Warning Info Light Dark 버튼 크기 btn-lg btn-sm Large button Large button Small but..