GaramX

사용자 도구

사이트 도구

현재 위치: home » bootstrap » svg
추적: • css
bootstrap:svg

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

다음 판		이전 판
bootstrap:svg [2021/11/13 11:23] – 만듦 taekgubootstrap:svg [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
줄 1: 줄 1:
 +====== CSP 및 임베디드 SVG ======
 +
 +  * 닫기 버튼 (경고 및 모달에서 사용)
 +<code html>
 +<button type="button" class="close" aria-label="Close">
 +  <span aria-hidden="true">&times;</span>
 +</button>
 +</code>
 +  * 사용자 정의 체크박스 및 라디오 버튼
 +<code html>
 +<div class="custom-control custom-checkbox">
 +  <input type="checkbox" class="custom-control-input" id="customCheck1">
 +  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
 +</div>
 +</code>
 +<code javascript>
 +$('.your-checkbox').prop('indeterminate', true)
 +</code>
 +  * [[https://getbootstrap.com/docs/4.6/components/forms/#switches|폼 스위치]]
 +<code html>
 +<div class="custom-control custom-switch">
 +  <input type="checkbox" class="custom-control-input" id="customSwitch1">
 +  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
 +</div>
 +<div class="custom-control custom-switch">
 +  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
 +  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
 +</div>
 +</code>
 +  * [[https://getbootstrap.com/docs/4.6/components/forms/#validation|양식 유효성 검사 아이콘]]
 +<code html>
 +<form class="needs-validation" novalidate>
 +  <div class="form-row">
 +    <div class="col-md-6 mb-3">
 +      <label for="validationCustom01">First name</label>
 +      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
 +      <div class="valid-feedback">
 +        Looks good!
 +      </div>
 +    </div>
 +    <div class="col-md-6 mb-3">
 +      <label for="validationCustom02">Last name</label>
 +      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
 +      <div class="valid-feedback">
 +        Looks good!
 +      </div>
 +    </div>
 +  </div>
 +  <div class="form-row">
 +    <div class="col-md-6 mb-3">
 +      <label for="validationCustom03">City</label>
 +      <input type="text" class="form-control" id="validationCustom03" required>
 +      <div class="invalid-feedback">
 +        Please provide a valid city.
 +      </div>
 +    </div>
 +    <div class="col-md-3 mb-3">
 +      <label for="validationCustom04">State</label>
 +      <select class="custom-select" id="validationCustom04" required>
 +        <option selected disabled value="">Choose...</option>
 +        <option>...</option>
 +      </select>
 +      <div class="invalid-feedback">
 +        Please select a valid state.
 +      </div>
 +    </div>
 +    <div class="col-md-3 mb-3">
 +      <label for="validationCustom05">Zip</label>
 +      <input type="text" class="form-control" id="validationCustom05" required>
 +      <div class="invalid-feedback">
 +        Please provide a valid zip.
 +      </div>
 +    </div>
 +  </div>
 +  <div class="form-group">
 +    <div class="form-check">
 +      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
 +      <label class="form-check-label" for="invalidCheck">
 +        Agree to terms and conditions
 +      </label>
 +      <div class="invalid-feedback">
 +        You must agree before submitting.
 +      </div>
 +    </div>
 +  </div>
 +  <button class="btn btn-primary" type="submit">Submit form</button>
 +</form>
 +
 +<script>
 +// Example starter JavaScript for disabling form submissions if there are invalid fields
 +(function() {
 +  'use strict';
 +  window.addEventListener('load', function() {
 +    // Fetch all the forms we want to apply custom Bootstrap validation styles to
 +    var forms = document.getElementsByClassName('needs-validation');
 +    // Loop over them and prevent submission
 +    var validation = Array.prototype.filter.call(forms, function(form) {
 +      form.addEventListener('submit', function(event) {
 +        if (form.checkValidity() === false) {
 +          event.preventDefault();
 +          event.stopPropagation();
 +        }
 +        form.classList.add('was-validated');
 +      }, false);
 +    });
 +  }, false);
 +})();
 +</script>
 +</code>
 +  * [[https://getbootstrap.com/docs/4.6/components/forms/#select-menu|사용자 지정 선택 메뉴]]
 +<code html>
 +<select class="custom-select">
 +  <option selected>Open this select menu</option>
 +  <option value="1">One</option>
 +  <option value="2">Two</option>
 +  <option value="3">Three</option>
 +</select>
 +</code>
 +  * [[https://getbootstrap.com/docs/4.6/components/carousel/#with-controls|Carousel controls(캐러셀 컨트롤)]]
 +<code html>
 +<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
 +  <div class="carousel-inner">
 +    <div class="carousel-item active">
 +      <img src="..." class="d-block w-100" alt="...">
 +    </div>
 +    <div class="carousel-item">
 +      <img src="..." class="d-block w-100" alt="...">
 +    </div>
 +    <div class="carousel-item">
 +      <img src="..." class="d-block w-100" alt="...">
 +    </div>
 +  </div>
 + <button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
 +    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
 +    <span class="sr-only">Previous</span>
 +  </button>
 +  <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
 +    <span class="carousel-control-next-icon" aria-hidden="true"></span>
 +    <span class="sr-only">Next</span>
 +  </button>
 +</div>
 +</code>
 +  * Navbar 토글 버튼
 +<code html>
 +<nav class="navbar navbar-expand-lg navbar-light bg-light">
 +  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
 +    <span class="navbar-toggler-icon"></span>
 +  </button>
 +  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
 +    <a class="navbar-brand" href="#">Hidden brand</a>
 +    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
 +      <li class="nav-item active">
 +        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
 +      </li>
 +      <li class="nav-item">
 +        <a class="nav-link" href="#">Link</a>
 +      </li>
 +      <li class="nav-item">
 +        <a class="nav-link disabled">Disabled</a>
 +      </li>
 +    </ul>
 +    <form class="form-inline my-2 my-lg-0">
 +      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
 +      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
 +    </form>
 +  </div>
 +</nav>
 +</code>
 +
 +=== External content ===
 +[[https://getbootstrap.com/docs/4.6/components/navbar/#external-content|External content]]
 +<code html>
 +<div class="fixed-top">
 +  <div class="collapse" id="navbarToggleExternalContent">
 +    <div class="bg-dark p-4">
 +      <h5 class="text-white h4">Collapsed content</h5>
 +      <span class="text-muted">Toggleable via the navbar brand.</span>
 +    </div>
 +  </div>
 +  <nav class="navbar navbar-dark bg-dark">
 +    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
 +      <span class="navbar-toggler-icon"></span>
 +    </button>
 +  </nav>
 +</div>
 +</code>
  

문서 도구