Bootstrap 온라인 편집기

Code

Result

Bootstrap CDN 사이트

다음 Bootstrap CDN 주소를 사용하여 코드 내 Bootstrap 버전을 교체할 수 있습니다:

https://cdn.bytedance.com/?query=bootstrap&version=5.1.2
https://www.bootcdn.cn/twitter-bootstrap/

Bootstrap 온라인 편집기를 어떻게 사용합니까?

간단한 3단계

왼쪽 코드 편집기에서 Bootstrap 코드를 작성하거나 붙여넣으세요.
"실행" 버튼을 클릭하여 Bootstrap 코드를 실행하세요.
결과 창에 오른쪽에 실행 결과가 표시됩니다.

Bootstrap 온라인 편집기란 무엇입니까?

Bootstrap 온라인 편집기를 사용하면 웹 서버 없이도 온라인으로 Bootstrap 코드를 실행할 수 있으며, 컴퓨터에서 텍스트 편집기를 사용하여 Bootstrap 파일을 편집할 필요가 없습니다.

이렇게 하면 Ace 편집기를 사용하여 Bootstrap 실행 결과를 빠르고 편리하게 확인할 수 있으며, 코드 오류나 경고를 자동으로 식별하고 명확하고 직관적인 피드백을 제공하여 코드 성능을 향상시킬 수 있습니다. 다음처럼 Bootstrap 코드를 작성하거나 붙여넣을 수 있습니다:

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 온라인 편집기</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>안녕, 세계</h1>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap 온라인 편집기의 기능

간편한 Bootstrap 온라인 편집기 또는 테스터
키워드 자동 완성 기능
다양한 디자인 테마 제공