Bootstrap4 기본 가이드

Bootstrap4 소형 도구

Bootstrap4 CSS 코드를 작성하지 않고도 원하는 효과를 얻을 수 있는 도구를 제공합니다.

퍼블릭

border 클래스를 사용하여 퍼블릭을 추가하거나 제거할 수 있습니다:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
　<style>
　　.border　{
　　　　display:　inline-block;
　　　　width:　70px;
　　　　height:　70px;
　　　　margin:　6px;
　　}
　　</style>
</head>
<body>
<div　class="container">
　　<h2>퍼블릭</h2>
　　<p>border 클래스를 사용하여 퍼블릭을 추가하거나 제거할 수 있습니다:</p>　
　　<span　class="border"></span>
　　<span　class="border　border-0"></span>
　　<span　class="border　border-top-0"></span>
　　<span　class="border　border-right-0"></span>
　　<span　class="border　border-bottom-0"></span>
　　<span　class="border　border-left-0"></span>
</div>
</body>
</html>

테스트를 보고 보자 ‹/›

퍼블릭 색상

Bootstrap4 하위 클래스를 제공하여 퍼블릭 색상을 설정할 수 있습니다:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
　　<style>
　　.border　{
　　　　display:　inline-block;
　　　　width:　70px;
　　　　height:　70px;
　　　　margin:　6px;
　　}
　　</style>
</head>
<body>
<div　class="container">
　　<h2>퍼블릭 색상</h2>
　　<p>Bootstrap4　하위 클래스를 제공하여 퍼블릭 색상을 설정할 수 있습니다:/p>　
　　<span　class="border　border-primary"></span>
　　<span　class="border　border-secondary"></span>
　　<span　class="border　border-success"></span>
　　<span　class="border　border-danger"></span>
　　<span　class="border　border-warning"></span>
　　<span　class="border　border-info"></span>
　　<span　class="border　border-light"></span>
　　<span　class="border　border-dark"></span>
　　<span　class="border　border-white"></span>
</div>
</body>
</html>

테스트를 보고 보자 ‹/›

모서리 둥글게 설정

rounded 클래스를 사용하여 둥글은 모서리를 추가할 수 있습니다:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
　　<style>
　　span　{
　　　　display:　inline-block;
　　　　width:　70px;
　　　　height:　70px;
　　　　margin:　6px;
　　　　background-color:　#555;
　　}
　　</style>
</head>
<body>
<div　class="container">
　　<h2>모서리 둥글게 설정</h2>
　　<p>rounded 클래스를 사용하여 둥글은 모서리를 추가할 수 있습니다:</p>　
　　<span　class="rounded"></span>
　　<span　class="rounded-top"></span>
　　<span　class="rounded-right"></span>
　　<span　class="rounded-bottom"></span>
　　<span　class="rounded-left"></span>
　　<span　class="rounded-circle"></span>
　　<span　class="rounded-0"></span>
</div>
</body>
</html>

테스트를 보고 보자 ‹/›

浮动

.float-오른쪽 클래스는 요소를 오른쪽으로浮动 설정하기 위해 사용됩니다，.float-왼쪽 설정 요소를 왼쪽으로浮动, .clearfix 클래스는 퍼블릭을 지우기 위해 사용됩니다:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div　class="container">
　　<h2>浮动</h2>
　　<p>.float-오른쪽 클래스는 요소를 오른쪽으로浮动 설정하기 위해 사용됩니다，.float-왼쪽浮动 설정, .clearfix 클래스는 퍼블릭을 지우기 위해 사용됩니다:</p>　
　　<div　class="clearfix">
　　　　<span　class="float-left">왼쪽浮动</span>
　　　　<span　class="float-right">오른쪽浮动</span>
　　</div>
</div>
</body>
</html>

테스트를 보고 보자 ‹/›

响应式浮动

我们看可以设置浮动 (.float-*-left|right - 　* 为 sm, md, lg 或 xl) 的方向依赖于屏幕的大小:<

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div　class="container">
　　<h2>响应式浮动</h2>
　　<p>重置浏览器大小查看效果。</p>
　　<p>我们看可以设置浮动　(.float-*-left|right　-　*　为 sm, md, lg 或 xl) 的方向依赖于屏幕的大小:</p>　
　　<div class="float-sm-right">在大于小屏幕尺寸上右浮动</div><br>
　　<div class="float-md-right">在大于中等屏幕尺寸上右浮动</div><br>
　　<div class="float-lg-right">在大于大屏幕尺寸上右浮动</div><br>
　　<div class="float-xl-right">在大于超大屏幕尺寸上右浮动</div><br>
　　<div class="float-none">没有浮动</div>
</div>
</body>
</html>

테스트를 보고 보자 ‹/›

居中对齐

使用 .mx-auto 类来设置居中对齐:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div　class="container">
　　<h1>水平居中</h1>
　　<p>使用　.mx-auto 类来设置居中对齐::</p>
　　<div class="mx-auto bg-warning" style="width:150px">居中</div>
</div>
</body>
</html>

테스트를 보고 보자 ‹/›

宽度

元素上使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div　class="container">
　　<h1>宽度设置小工具</h1>
　　<p>元素上使用　w-*　类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度:</p>
　　<div class="w-25　bg-warning">宽度　25%%</div>
　　<div class="w-50 bg-warning">宽度　50%</div>
　　<div class="w-75　bg-warning">宽度　75%%</div>
　　<div class="w-100 bg-warning">宽度　100%</div>
　　<div class="mw-100 bg-warning">最大宽度　100%</div>
</div>
</body>
</html>

테스트를 보고 보자 ‹/›

高度

元素上使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 来设置高度:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div　class="container">
　　<h1>높이 소형 도구</h1>
　　<p>요소에 h-*　클래스　(.h-25,　.h-5,　.h-75,　.h-100,　.mh-100)　높이를 설정하려면:</p>
　　<div　style="높이:200px;background-color:#ddd">
　　　　<div　class="h-25　d-inline-block　p-2　bg-warning">높이　25%%</div>
　　　　<div　class="h-50　d-inline-block　p-2　bg-warning">높이　50%</div>
　　　　<div　class="h-75　d-inline-block　p-2　bg-warning">높이　75%%</div>
　　　　<div　class="h-100　d-inline-block　p-2　bg-warning">높이　100%</div>
　　　　<div　class="mh-100　d-inline-block　p-2　bg-warning"　style="높이:500px">최대 높이　100%</div>
　　</div>
</div>
</body>
</html>

테스트를 보고 보자 ‹/›

Bootstrap4 Flex 레이아웃 Bootstrap4 스크롤 리스너