본문 바로가기

부트스트랩

(7)

[부트스트랩] Content - Tables https://getbootstrap.com/docs/5.1/content/tables/ Tables Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap. getbootstrap.com .table .table --bs-table-bg: transparent; --bs-table-accent-bg: transparent; --bs-table-striped-color: #212529; --bs-table-striped-bg: rgba(0, 0, 0, 0.05); --bs-table-active-color: #212529; --bs-table-a..

[부트스트랩] content - images https://getbootstrap.com/docs/5.1/content/images/ Images Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them—all via classes. getbootstrap.com .img-fluid max-width: 100%; height: auto; .container style="width: 100vh;height:30vh;" 수정 후 확인 .img-thumbnail 1px 둥근 테두리도 렌더링 padding: 0.25rem; background-..

[부트스트랩] Content - Typography https://getbootstrap.com/docs/5.1/content/typography/ Typography Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more. getbootstrap.com .text-muted $text-muted: $gray-600; .text-muted --bs-text-opacity: 1; color: #6c757d!important; Class .text-muted .display-* $display-font-sizes: ( 1: 5rem, 2: 4.5rem, 3: 4rem, 4: 3.5rem, 5: 3rem, 6..

[부트스트랩] Layout - Gutters https://getbootstrap.com/docs/5.1/layout/gutters/ Gutters Gutters are the padding between your columns, used to responsively space and align content in the Bootstrap grid system. getbootstrap.com 수평 거터 .gx-* 클래스 사용(g: gutter, x: x축 left & right) 속성: --bs-gutter-x: 값(*) *(0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 3rem) 6이상은 없음 .gx-6일 때 .gx-4처럼 보이는 것은 .row 클래스 속성이 --bs-gutter-x: 1.5rem 이..

[부트스트랩] Layout - Columns https://getbootstrap.com/docs/5.1/layout/columns/ Columns Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system. Plus, see how to use column classes to manage widths of non-grid elements. getbootstrap.com 수직 정렬 row align-items-start row align-items-center row align-items-end .container 1 2 3 1 2 3 1 2 3 align-self-start al..

[부트스트랩] Layout - Grid https://getbootstrap.com/docs/5.1/layout/grid/ Grid system Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes. getbootstrap.com 그리드 옵션 xs(초소형), sm(소형), md(중형), lg(대형), xl(특대형), xxl(특특대형) 아래 테스트는 브라우저의 너비가 변경될 때 container의 너비와 컬럼의 너비의 변화를 보여줌..

[부트스트랩] Layout - Containers https://getbootstrap.com/docs/5.1/layout/containers/ Containers Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport. getbootstrap.com HTML .container .container-sm .container-md .container-lg .container-xl .container-xxl .container-fluid CSS .themed-container { /*padding: .75rem;*/ margin-bottom: 1.5rem; background-..

이전 1 다음

티스토리툴바