Bootstrap의 Range에서 글꼴 크기 변경
개요
여기는 Bootstrapv5입니다.0의 Range 및 jQueryv3을 변경합니다.에서는 5.1을 사용하여 글꼴 크기를 수정하는 방법을 설명합니다.
솔직히 필요한 게 뭔지 모르겠지만 참고할 사람이 있으면 좋겠어요.
Range 정보
코드
index.html
<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Change Font-Size with Range</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/jquery_12.js"></script>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<p>Range: <span id="scale">0%</span></p>
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
$(function () {
$('#customRange1').change(function () {
var n = $('#customRange1').val() / 2.5 + 80 + '%';
$('#scale').text(n);
$('html').css('font-size', `${n}`);
})
})
Folder
├js
│└jquery.js
└index.html
또는 구성에 따라 코드를 덮어쓰십시오.
다시 쓸 곳을 모르면 메시지를 남겨 주세요.
코드 설명
Bootstrap 사이트의 템플릿을 통해 제작되었습니다.
그리고 jquery.jQuery에서 js 파일을 사용할 수 있도록 읽는 중입니다.
방법을 강구하는 곳
바디의 글꼴 사이즈를 바꾸려면탭 부분이 효과가 없기 때문에}의 글꼴 크기를 변경했습니다.
이 관계로 랑의 사이즈도 달라졌기 때문에 정식 환경 등에 설치할 때 디자인을 조금 조정해야 한다고 생각했어요.
또 레인지의 폭이 0%~10%이기 때문에 직접 반영하면 글꼴 크기가 작아지기 때문에 계산 공식은 80~10%가 된다.
Reference
이 문제에 관하여(Bootstrap의 Range에서 글꼴 크기 변경), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/dainaka/articles/16ab29af7361f4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
