Search
Duplicate

Bootstrap

λ°˜μ‘ν˜• μ›Ή λ””μžμΈμ„ μ‰½κ²Œ κ΅¬ν˜„ν•  수 μžˆλŠ” CSS, JS ν”„λ ˆμž„μ›Œν¬
Bootstrap5
Bootstrap μ‹œμž‘ν•˜κΈ°

Bootstrap μ‹œμž‘ν•˜κΈ°

β€’
CDN 으둜 μ μš©ν•˜κΈ°
β€’
파일둜 μ μš©ν•˜κΈ°
Bootstrap μ‹œμž‘ν•˜κΈ°

Cheetsheet

Cheetsheet
Layout

Container

μ›Ή νŽ˜μ΄μ§€μ˜ λ‚΄μš©μ„ 감싸고, μ μ ˆν•œ 폭과 여백을 μ§€μ •ν•˜μ—¬ λ ˆμ΄μ•„μ›ƒμ„ μ‘°μ •ν•©λ‹ˆλ‹€.
β€’
νŠΉμ§•
β€’
클래슀
β€’
μ˜ˆμ‹œμ½”λ“œ
β—¦
κΈ°λ³Έ μ»¨ν…Œμ΄λ„ˆ
β—¦
λ°˜μ‘ν˜• μ»¨ν…Œμ΄λ„ˆ
Container

Grid

λ°˜μ‘ν˜• λ ˆμ΄μ•„μ›ƒμ„ κ΅¬μΆ•ν•˜κΈ° μœ„ν•œ κ·Έλ¦¬λ“œ μ‹œμŠ€ν…œμ„ μ œκ³΅ν•©λ‹ˆλ‹€.
β€’
κ·Έλ¦¬λ“œ μ‹œμŠ€ν…œμ΄λž€?
β€’
κ΅¬μ„±μš”μ†Œ
β€’
λ°˜μ‘ν˜• λ””μžμΈ
Grid

Flex

Flexbox μœ ν‹Έλ¦¬ν‹° ν΄λž˜μŠ€λŠ” Flexbox λ ˆμ΄μ•„μ›ƒμ„ μ‰½κ²Œ μ μš©ν•˜κ³  μ‘°μ •ν•  수 μžˆλ„λ‘ λ„μ™€μ€λ‹ˆλ‹€.

Flex

Flex Layout 은 Flexible Box Layout 을 λ§ν•˜λ©°, 말 κ·ΈλŒ€λ‘œ μœ μ—°ν•œ λ°•μŠ€ λ ˆμ΄μ•„μ›ƒμž…λ‹ˆλ‹€.
λ°•μŠ€(Container) μ•ˆμ—μ„œ μš”μ†Œ(item)듀을 1μ°¨μ›μœΌλ‘œ μœ μ—°ν•˜κ²Œ λ°°μΉ˜ν•˜λŠ” 것을 μ‰½κ²Œ ν•΄μ€λ‹ˆλ‹€.
Flex
μœ μš©ν•œ UI

Header & Offcavas

Header & Offcavas

λ°˜μ‘ν˜• Card View

λ°˜μ‘ν˜• Card View

masonry (λ²½λŒμŒ“κΈ°)

masonry (λ²½λŒμŒ“κΈ°)
Util

Sizing

크기 쑰정을 μœ„ν•œ μœ ν‹Έλ¦¬ν‹° 클래슀λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€.
Sizing

Spacing

μ—¬λ°± 쑰정을 μœ„ν•œ μœ ν‹Έλ¦¬ν‹° 클래슀λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€.
Spacing

Flex

κ·Έλ¦¬λ“œ μ‹œμŠ€ν…œμ—μ„œ μ—΄(column)을 μ •μ˜ν•˜μ—¬ λ‚΄μš©μ„ λ°°μΉ˜ν•©λ‹ˆλ‹€.
Flex

Background

μ—΄κ³Ό μ—΄ μ‚¬μ΄μ˜ 간격을 μ‘°μ •ν•©λ‹ˆλ‹€.
Background
Components

Buttons

λ²„νŠΌ μš”μ†Œλ₯Ό λ””μžμΈν•©λ‹ˆλ‹€.

기본 클래슀

λ²„νŠΌ λ””μžμΈμ„ μ μš©ν•˜λŠ” κΈ°λ³Έ 클래슀 속성값은 btn μž…λ‹ˆλ‹€.
Buttons

Navbars

μ—¬λ°± 쑰정을 μœ„ν•œ μœ ν‹Έλ¦¬ν‹° 클래슀λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€.
Navbars

Accordion

μ•„μ½”λ””μ–Έ ν˜•μ‹μ˜ μš”μ†Œλ₯Ό λ§Œλ“­λ‹ˆλ‹€.
Accordion

Badge

뱃지 μš”μ†Œλ₯Ό λ§Œλ“­λ‹ˆλ‹€.
Badge

Card

μΉ΄λ“œ ν˜•μ‹μ˜ 컨텐츠λ₯Ό λ””μžμΈν•©λ‹ˆλ‹€.
Card

Collapse

μ ‘κΈ°/펼치기 κΈ°λŠ₯을 μ œκ³΅ν•©λ‹ˆλ‹€.
Collapse

Dropdowns

λ“œλ‘­λ‹€μš΄ 메뉴λ₯Ό λ§Œλ“­λ‹ˆλ‹€.
Dropdowns

List group

리슀트 그룹을 μƒμ„±ν•©λ‹ˆλ‹€.
List group

Modal

λͺ¨λ‹¬ λŒ€ν™”μƒμžλ₯Ό λ§Œλ“­λ‹ˆλ‹€.
Modal

Offcanvas

μ˜€ν”„μΊ”λ²„μŠ€(Offcanvas) νŒ¨λ„μ„ λ§Œλ“­λ‹ˆλ‹€.
Offcanvas

Pagination

νŽ˜μ΄μ§€λ„€μ΄μ…˜μ„ μΆ”κ°€ν•©λ‹ˆλ‹€.
Pagination

Placeholders

μ—΄κ³Ό μ—΄ μ‚¬μ΄μ˜ 간격을 μ‘°μ •ν•©λ‹ˆλ‹€.
Placeholders

Popovers

νŒμ˜€λ²„ μš”μ†Œλ₯Ό μΆ”κ°€ν•©λ‹ˆλ‹€.
Popovers

Scrollspy

μ—΄κ³Ό μ—΄ μ‚¬μ΄μ˜ 간격을 μ‘°μ •ν•©λ‹ˆλ‹€.
Scrollspy

Spinners

λ‘œλ”© μŠ€ν”Όλ„ˆλ₯Ό μΆ”κ°€ν•©λ‹ˆλ‹€.
Spinners

Toasts

ν† μŠ€νŠΈ λ©”μ‹œμ§€λ₯Ό ν‘œμ‹œν•©λ‹ˆλ‹€.
Toasts

Tooltips

νˆ΄νŒμ„ μΆ”κ°€ν•©λ‹ˆλ‹€.
Tooltips
UI

Header

μ›Ή νŽ˜μ΄μ§€μ˜ 헀더λ₯Ό λ””μžμΈν•©λ‹ˆλ‹€.
Header

Footer

μ›Ή νŽ˜μ΄μ§€μ˜ ν‘Έν„°λ₯Ό λ””μžμΈν•©λ‹ˆλ‹€.
Footer

Sidebar

μ‚¬μ΄λ“œλ°”λ₯Ό λ§Œλ“­λ‹ˆλ‹€.
Sidebar

Dropdown

λ“œλ‘­λ‹€μš΄ 메뉴λ₯Ό μƒμ„±ν•©λ‹ˆλ‹€.
Dropdown

Modal

λͺ¨λ‹¬ λŒ€ν™”μƒμžλ₯Ό λ§Œλ“­λ‹ˆλ‹€.
Modal

Badge

뱃지 μš”μ†Œλ₯Ό μΆ”κ°€ν•©λ‹ˆλ‹€.
Badge

Button

λ²„νŠΌ μš”μ†Œλ₯Ό λ””μžμΈν•©λ‹ˆλ‹€.
Button

Card View

μΉ΄λ“œ ν˜•μ‹μ˜ λ·°λ₯Ό μƒμ„±ν•©λ‹ˆλ‹€.
Card View

Jumbotron

μ£Όμš” μ½˜ν…μΈ λ₯Ό κ°•μ‘°ν•˜λŠ” Jumbotron을 μΆ”κ°€ν•©λ‹ˆλ‹€.
Jumbotron? : λŒ€ν˜• μ „κ΄‘νŒ
Jumbotron

Table

ν…Œμ΄λΈ”μ„ λ””μžμΈν•©λ‹ˆλ‹€.
β€’
Simple tables
β€’
Bordered tables
β€’
Small tables
Table

Image

이미지 μš”μ†Œλ₯Ό μŠ€νƒ€μΌλ§ν•©λ‹ˆλ‹€.
Image