Search

Bootstrap

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

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

β€’
CDN 으둜 μ μš©ν•˜κΈ°
β€’
파일둜 μ μš©ν•˜κΈ°

CDN 으둜 μ μš©ν•˜κΈ°

β€’
CSS ν¬ν•¨ν•˜κΈ°
β€’
JS ν¬ν•¨ν•˜κΈ°

CSS ν¬ν•¨ν•˜κΈ°

head νƒœκ·Έ μ•ˆμ— bootstrap css νŒŒμΌμ„ CDN λ°©μ‹μœΌλ‘œ ν¬ν•¨ν•©λ‹ˆλ‹€.
Bootstrap μ‹œμž‘ν•˜κΈ°

Cheetsheet

Cheetsheet
Layout

Container

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

νŠΉμ§•

β€’
μ»¨ν…Œμ΄λ„ˆλŠ” Bootstrap의 κΈ°λ³Έ λ ˆμ΄μ•„μ›ƒ μš”μ†Œμž…λ‹ˆλ‹€.
β€’
κ·Έλ¦¬λ“œ μ‹œμŠ€ν…œμ„ μ‚¬μš©ν•  λ•Œ ν•„μˆ˜μ μž…λ‹ˆλ‹€.
β€’
λ‚΄λΆ€ μ½˜ν…μΈ λ₯Ό ν¬ν•¨ν•˜κ³  νŒ¨λ”©μ„ μΆ”κ°€ν•˜λ©° 쀑앙에 λ°°μΉ˜ν•©λ‹ˆλ‹€.
β€’
μ»¨ν…Œμ΄λ„ˆλŠ” 쀑첩될 수 μžˆμ§€λ§Œ, λŒ€λΆ€λΆ„μ˜ λ ˆμ΄μ•„μ›ƒμ—μ„œλŠ” 쀑첩이 ν•„μš”ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
Container

Grid

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

κ·Έλ¦¬λ“œ μ‹œμŠ€ν…œμ΄λž€?

Grid

Flex

Flex

Bootstrap은 Flexbox의 λ‹€μ–‘ν•œ κΈ°λŠ₯을 κ°„λ‹¨ν•œ 클래슀 ν˜•νƒœλ‘œ μ œκ³΅ν•©λ‹ˆλ‹€.

Flex μ»¨ν…Œμ΄λ„ˆ μ„€μ •

Flex
μœ μš©ν•œ UI

Header & Offcavas

Header & Offcavas

λ°˜μ‘ν˜• Card View

λ°˜μ‘ν˜• Card View

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

masonry (λ²½λŒμŒ“κΈ°)
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
β€’
Hoverable tables
β€’
Striped tables
β€’
Primary tables
β€’
Dark tables
Table

Image

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