HTML 파일에 Bootstrap을 도입한다. [수시 업데이트]
대상 독자
Bootstrap을 사용하고 싶지만 잘 모르는 사람
공식 문서가 영어로 친풍 캄푼인
이번에 준비하는 것
편집기 (이번에는 Vscode 사용)
HTML 파일 (만드는 방법은 여기)
원래 Bootstrap은 무엇입니까?
htps : // 게이 t보오 tst et al p. 코m/
Twitter사가 개발한 CSS 프레임워크
Laravel과 Ruby on Rails 등도 프레임 워크이지만,
여기서는 CSS에 대한 인식으로 좋습니다.
class명에 Bootstrap이 준비하고 있는, 영어 단어를 넣는 것만으로
멋진 화면을 만들 수 있습니다.
일단 class명을 생각하고 margin이나 padding을 지정하지 않아도 됩니다.
준비
Hello_world.html 파일을 적절하게 만들고 편집기에서 엽니 다.! 를 눌러 그대로 tab 키를 누르면 마음대로 DOCTYPE 선언을 해 줍니다.
필요 없음 meta 태그를 삭제해 둡시다.
hello_world.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
</head>
<body>
</body>
</html>
Bootstrap을 소개합니다.
여기 으로 날아가면 절차가 작성됩니다.
순서대로 써 봅시다.
head 태그 안에 link 태그를 도입한다.
영문입니다만, 『 head 의 태그안에 아래와 같이를 카피 앤 페이스트 해 주세요』라고 쓰고 있습니다. 지시대로 쓰자.
hello_world.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>hello world</title>
</head>
<body>
</body>
</html>
</body> 앞에 script 태그를 도입한다.
그런 다음 </body> 태그 앞에 세 개의 script 태그를 복사하여 붙여 넣습니다.
hello_world.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>hello world</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
위와 같이 붙여넣을 수 있으면 저장합시다!
이것으로 Bootstrap의 도입이 완료되었습니다!
(덤) 실제로 써 본다.
Bootstrap은 공식 문서에서 다양한 클래스 이름을 소개합니다.
복사하고 붙여 넣는 것만으로 간단하게 구현할 수 있습니다.
이번에는 예로서 드롭다운만 소개합니다.
여기 으로 날아가서 Singlebutton을 구현합니다.
이미 견본이 있으므로 코드를 복사하여 붙여 넣으십시오.
hello_world.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>hello world</title>
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
아래와 같이 표시되면 성공입니다.
(덤 덤) 오프라인에서 Bootstrap을 도입하는 방법
수시로 업데이트합니다.
Reference
이 문제에 관하여(HTML 파일에 Bootstrap을 도입한다. [수시 업데이트]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/YutakaYamasaki/items/8d2185da7323802b63af
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
편집기 (이번에는 Vscode 사용)
HTML 파일 (만드는 방법은 여기)
원래 Bootstrap은 무엇입니까?
htps : // 게이 t보오 tst et al p. 코m/
Twitter사가 개발한 CSS 프레임워크
Laravel과 Ruby on Rails 등도 프레임 워크이지만,
여기서는 CSS에 대한 인식으로 좋습니다.
class명에 Bootstrap이 준비하고 있는, 영어 단어를 넣는 것만으로
멋진 화면을 만들 수 있습니다.
일단 class명을 생각하고 margin이나 padding을 지정하지 않아도 됩니다.
준비
Hello_world.html 파일을 적절하게 만들고 편집기에서 엽니 다.! 를 눌러 그대로 tab 키를 누르면 마음대로 DOCTYPE 선언을 해 줍니다.
필요 없음 meta 태그를 삭제해 둡시다.
hello_world.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
</head>
<body>
</body>
</html>
Bootstrap을 소개합니다.
여기 으로 날아가면 절차가 작성됩니다.
순서대로 써 봅시다.
head 태그 안에 link 태그를 도입한다.
영문입니다만, 『 head 의 태그안에 아래와 같이를 카피 앤 페이스트 해 주세요』라고 쓰고 있습니다. 지시대로 쓰자.
hello_world.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>hello world</title>
</head>
<body>
</body>
</html>
</body> 앞에 script 태그를 도입한다.
그런 다음 </body> 태그 앞에 세 개의 script 태그를 복사하여 붙여 넣습니다.
hello_world.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>hello world</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
위와 같이 붙여넣을 수 있으면 저장합시다!
이것으로 Bootstrap의 도입이 완료되었습니다!
(덤) 실제로 써 본다.
Bootstrap은 공식 문서에서 다양한 클래스 이름을 소개합니다.
복사하고 붙여 넣는 것만으로 간단하게 구현할 수 있습니다.
이번에는 예로서 드롭다운만 소개합니다.
여기 으로 날아가서 Singlebutton을 구현합니다.
이미 견본이 있으므로 코드를 복사하여 붙여 넣으십시오.
hello_world.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>hello world</title>
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
아래와 같이 표시되면 성공입니다.
(덤 덤) 오프라인에서 Bootstrap을 도입하는 방법
수시로 업데이트합니다.
Reference
이 문제에 관하여(HTML 파일에 Bootstrap을 도입한다. [수시 업데이트]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/YutakaYamasaki/items/8d2185da7323802b63af
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Hello_world.html 파일을 적절하게 만들고 편집기에서 엽니 다.! 를 눌러 그대로 tab 키를 누르면 마음대로 DOCTYPE 선언을 해 줍니다.필요 없음
meta 태그를 삭제해 둡시다.hello_world.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
</head>
<body>
</body>
</html>
Bootstrap을 소개합니다.
여기 으로 날아가면 절차가 작성됩니다.
순서대로 써 봅시다.
head 태그 안에 link 태그를 도입한다.
영문입니다만, 『 head 의 태그안에 아래와 같이를 카피 앤 페이스트 해 주세요』라고 쓰고 있습니다. 지시대로 쓰자.
hello_world.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>hello world</title>
</head>
<body>
</body>
</html>
</body> 앞에 script 태그를 도입한다.
그런 다음 </body> 태그 앞에 세 개의 script 태그를 복사하여 붙여 넣습니다.
hello_world.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>hello world</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
위와 같이 붙여넣을 수 있으면 저장합시다!
이것으로 Bootstrap의 도입이 완료되었습니다!
(덤) 실제로 써 본다.
Bootstrap은 공식 문서에서 다양한 클래스 이름을 소개합니다.
복사하고 붙여 넣는 것만으로 간단하게 구현할 수 있습니다.
이번에는 예로서 드롭다운만 소개합니다.
여기 으로 날아가서 Singlebutton을 구현합니다.
이미 견본이 있으므로 코드를 복사하여 붙여 넣으십시오.
hello_world.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>hello world</title>
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
아래와 같이 표시되면 성공입니다.
(덤 덤) 오프라인에서 Bootstrap을 도입하는 방법
수시로 업데이트합니다.
Reference
이 문제에 관하여(HTML 파일에 Bootstrap을 도입한다. [수시 업데이트]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/YutakaYamasaki/items/8d2185da7323802b63af
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>hello world</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>hello world</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Bootstrap은 공식 문서에서 다양한 클래스 이름을 소개합니다.
복사하고 붙여 넣는 것만으로 간단하게 구현할 수 있습니다.
이번에는 예로서 드롭다운만 소개합니다.
여기 으로 날아가서 Singlebutton을 구현합니다.
이미 견본이 있으므로 코드를 복사하여 붙여 넣으십시오.
hello_world.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>hello world</title>
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
아래와 같이 표시되면 성공입니다.
(덤 덤) 오프라인에서 Bootstrap을 도입하는 방법
수시로 업데이트합니다.
Reference
이 문제에 관하여(HTML 파일에 Bootstrap을 도입한다. [수시 업데이트]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/YutakaYamasaki/items/8d2185da7323802b63af
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(HTML 파일에 Bootstrap을 도입한다. [수시 업데이트]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/YutakaYamasaki/items/8d2185da7323802b63af텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
