[Bootstrap] Radio

2022. 11. 23. 03:35·Framework | Library/Bootstrap
728x90

기본 라디오(세로)

<!-- Default radio -->
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"/>
  <label class="form-check-label" for="flexRadioDefault1"> Default radio </label>
</div>

<!-- Default checked radio -->
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked/>
  <label class="form-check-label" for="flexRadioDefault2"> Default checked radio </label>
</div>

 

기본 라디오(가로)

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" />
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" />
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled />
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

 

토글 버튼 라디오

<div class="btn-group">
  <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked />
  <label class="btn btn-secondary" for="option1">Checked</label>

  <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off" />
  <label class="btn btn-secondary" for="option2">Radio</label>

  <input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" />
  <label class="btn btn-secondary" for="option3">Radio</label>
</div>

'Framework | Library > Bootstrap' 카테고리의 다른 글

[Bootstrap] Validation  (0) 2022.11.23
[Bootstrap] range  (0) 2022.11.23
[Bootstrap] Toggle Switch  (0) 2022.11.23
[Bootstrap] Search(검색창)  (0) 2022.11.23
[Bootstrap] Horizontal alignment(text-center, d-flex, justify-content)  (0) 2022.11.23
'Framework | Library/Bootstrap' 카테고리의 다른 글
  • [Bootstrap] Validation
  • [Bootstrap] range
  • [Bootstrap] Toggle Switch
  • [Bootstrap] Search(검색창)
arajo
arajo
  • arajo
    아라 메모장
    arajo
  • 전체
    오늘
    어제
    • 분류 전체보기 (509)
      • Language (298)
        • HTML (55)
        • CSS (11)
        • JavaScript (70)
        • TypeScript (8)
        • Python (33)
        • Java (119)
        • C (0)
        • C# (2)
      • Programming (92)
        • Programming (14)
        • Web (51)
        • Apache (1)
        • MySQL (23)
        • AWS (3)
      • Framework | Library (26)
        • Framework | Library (3)
        • Vue.js (2)
        • React.js (5)
        • React Native (4)
        • Node.js (1)
        • Ajax (1)
        • Bootstrap (8)
        • Spring (1)
        • Flutter (1)
      • etc (2)
      • 휴식 (19)
        • 책 (13)
        • 일기 (5)
        • 게임 일기 (1)
      • A (71)
        • 공부 (18)
        • 기타 (6)
        • 일 (47)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    제어문
    web
    객체
    타입스크립트
    변수
    Java
    next.js
    파이썬
    TypeScript
    JavaScript
    CSS
    자바스크립트
    array
    react
    MySQL
    event
    Python
    object
    리액트
    HTML
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
arajo
[Bootstrap] Radio
상단으로

티스토리툴바