구성 요소
프로그래머스는 Bootstrap v4.3.1를 수정하여 사용 중입니다. 부트스트랩 가이드라인 문서를 참고하세요. 모든 UI 요소를 대체할 수는 없지만, 가급적 이곳에서 있는 UI 요소를 재사용하는것을 권장합니다. 프로그래머스는 모든 UI Elements를 최소한으로 만들고, 최대한으로 재사용되는 것을 지향합니다. 특정 기능을 위하여 UI 요소를 새로 제작할 경우, 그 기능이 향후 업그레이드될 상황을 고려하여 레고 블록처럼 쉽게 수정/업데이트할 수 있도록 만듭니다.
Navigation bars
Navigation tabs
Menu 1
일정 구간씩 스크롤을 컨트롤하는 제이쿼리를 만들고 있습니다. animate로 처리하고 있는데 연속으로 클릭하면 animate가 끝나기 전에 다시 이벤트가 시작되어서 구간에 따라 정해놓은 레이아웃이 흐트러집니다. 진행 중인 이벤트를 감지할 수 있다면 preventDefault라도 하고 싶은데 방법을 모르겠습니다.
Menu 2
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
Navigation pills
Menu 1
일정 구간씩 스크롤을 컨트롤하는 제이쿼리를 만들고 있습니다. animate로 처리하고 있는데 연속으로 클릭하면 animate가 끝나기 전에 다시 이벤트가 시작되어서 구간에 따라 정해놓은 레이아웃이 흐트러집니다. 진행 중인 이벤트를 감지할 수 있다면 preventDefault라도 하고 싶은데 방법을 모르겠습니다.
Menu 2
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
Breadcrumbs
Pagination
Buttons
Buttons Theme
Buttons Size
Buttons Width
Buttons Radios
Buttons Vertical Group
Elevation
Blockquote
포스가 함께 하길 바래. (May the Force be with you.)
해리슨 포드가 마크 해밀에게 하던 대사, STAR WARS(1977)
Tables
Table Bordered
| # | table-sm | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
Table Options (Size, Theme, Hover)
| # | table-bordered | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content info | Column content info | Column content info |
| 4 | Column content success | Column content success | Column content success |
| 5 | Column content danger | Column content danger | Column content danger |
| 6 | Column content warning | Column content warning | Column content warning |
| 7 | Column content active | Column content active | Column content active |
Table Responsive
| # | table-responsive | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
Forms
Form Group
Checkbox Size
Input Size
Input Status
Input Group
input Group을 사용하기 위해서는 bootstrap_form gem의 가이드를 준수해 주세요.
Input Status
Checkbox Toggle
Alerts
경고!
계정 삭제를 클릭하시면 지금까지 구매했던 모든 아이템, 친구정보, 즐겨찾기 등 모든 정보가 삭제됩니다. 삭제된 정보는 복원할 수 없습니다. 계정 삭제 안내.
계정 삭제를 클릭하시면 지금까지 구매했던 모든 아이템, 친구정보, 즐겨찾기 등 모든 정보가 삭제됩니다. 삭제된 정보는 복원할 수 없습니다. 계정 삭제 안내.
Labels
Progress bars
Basic
Contextual alternatives
Test resualt
Animated
Striped
Stacked
Collapse
사(賜)야, 너는 내가 많이 배웠다고 해서 다 안다고 생각하고 있느냐?" 자공이 "예. 그렇지 않습니까?"라고 대답(對答)하니 "아니다. 나는 하나로 꿸 뿐이다.
一以貫之
List groups
- 14 Cras justo odio
- 2 Dapibus ac facilisis in
- 1 Morbi leo risus
Modals
Popovers
Tooltips
Cards
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
BUTTON
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
BUTTONLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.