======Bootstrap Buttons====== * description : Bootstrap Buttons * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-25 \\ =====Button Styles===== Bootstrap은 다양한 스타일의 버튼을 제공합니다.\\ {{:wiki:bootstrap:bootstrap_note:button-styles.png?600|}}\\ 출처: [[https://www.w3schools.com/bootstrap/bootstrap_buttons.asp|W3Schools.com - Bootstrap Buttons]]\\ \\ 상기 스타일의 버튼을 얻기 위해, Bootstrap에는 다음과 같은 클래스가 있습니다.\\ * ''.btn'' * ''.btn-default'' * ''.btn-primary'' * ''.btn-info'' * ''.btn-warning'' * ''.btn-danger'' * ''.btn-link'' 하기 예제에서 다양한 버튼 스타일에 대한 코드를 확인하겠습니다.\\ ====예제====

Button Styles

\\ button 클래스는 ''%%%%'', ''%% \\ **링크의 href 속성에 #을 입력하는 이유는 무엇입니까?** \\ 링크할 페이지가 없고 "404" 메시지를 받고 싶지 않기 때문에, 예제에서 #을 링크로 넣었습니다.\\ 특정 페이지에 대한 실제 URL를 href 속성에 입력해야 합니다.\\ \\ =====Button Sizes===== Bootstrap은 4가지 버튼 크기를 제공합니다:\\ 다른 크기를 정의하는 클래스는 다음과 같습니다:\\ * ''%%.btn-lg%%'' * ''%%.btn-sm%%'' * ''%%.btn-xs%%'' \\ 하기 예제는 다양한 버튼 크기에 대한 코드를 보여줍니다.\\ ====예제====

Button Sizes

\\ =====Block Level Buttons===== 블록 레벨 버튼은 부모 요소의 전체 너비에 걸쳐 있습니다.\\ \\ ''%%.btn-block%%'' 클래스를 추가하여 블록 레벨 버튼을 만듭니다.\\ ====예제====

Block Level Buttons

Large Block Level Buttons

Small Block Level Buttons

\\ =====Active/Disabled Buttons(활성/비활성 버튼)===== 버튼은 활성(누른 것처럼 보임) 또는 비활성화(클릭 할 수 없음) 상태로 설정할 수 있습니다.\\ \\ ''%%.active%%'' 클래스는 버튼이 눌린 것처럼 보이게 하고 ''%%.disabled%%'' 클래스는 버튼을 클릭 할 수 없게 만듭니다.\\ ====예제====

Button States

{{tag>오션 Bootstrap Buttons}}