Bootstrap
부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다
사용법
기본적으로 해당 사이트에 필요한
link href를 복사해서 붙여야한다.
예시
ex)
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<h1 class="" >난 중앙에 배치되고 싶어</h1>
</body>
</html>현재 h1태그는 중앙에 배치되지 않는 상황이고
<link href="..."를 통해 필요한 Bootstrap을 이용 할 수 있다.
ex 수정)
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<h1 class="mt-5 text-center" >난 중앙에 배치되고 싶어</h1>
</body>
</html>해당 태그의 클래스에
mt-5 text-center를 추가함으로써 margintop을 5정도 거리두고 text-center를 이용해 중앙정렬을 시킬 수 있다.
Progress
필요에 따라
진행 바와 같은 것도 검색해서 바로 사용하게 가져올 수 있다.
ex)
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<h1 class="mt-5 text-center" >난 중앙에 배치되고 싶어</h1>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</body>
</html>이에 따라 필요한 html 및 css를 찾아 복사할 수 있다.
출처
나의 하루를 가능한 기억하고 즐기고 후회하지말자