Bootstrap4 Grund教程

Bootstrap4 Flex-Layout Bootstrap4 Scroll-Überwachung

Bootstrap4 Kleines Werkzeug

Bootstrap4 bietet einige kleine Werkzeuge, mit denen wir ohne CSS-Code die gewünschten Effekte erreichen können.

Kanten

Die Verwendung der Klasse "border" ermöglicht das Hinzufügen oder Entfernen von Kanten:

示例

!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>Kanten</h2>
　　<p>Die Verwendung der Klasse "border" ermöglicht das Hinzufügen oder Entfernen von Kanten:/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>

Testen Sie es heraus ‹/›

Kantenfarbe

Bootstrap4 bietet einige Klassen, um die Kantenfarbe zu setzen:

示例

!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>Kantenfarbe</h2>
　　<p>Bootstrap4　bietet einige Klassen, um die Kantenfarbe zu setzen:/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>

Testen Sie es heraus ‹/›

Einstellungen für die Kantenrunde

Die Verwendung der Klasse "rounded" ermöglicht die Hinzufügung runder Kanten:

示例

!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>Einstellungen für die Kantenrunde</h2>
　　<p>Die Verwendung der Klasse "rounded" ermöglicht die Hinzufügung runder Kanten:</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>

Testen Sie es heraus ‹/›

Floating

.float-right wird verwendet, um das Element rechts浮动 zu setzen, .float-left setzt das Element links浮动, .clearfix Klasse wird verwendet, um das Floating zu bereinigen:

示例

!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>Floating</h2>
　　<p>.float-right　wird verwendet, um das Element rechts浮动 zu setzen,　.float-left　setzt das Element links浮动,　.clearfix　Klasse wird verwendet, um das Floating zu bereinigen:</p>　
　　<div　class="clearfix">
　　　　<span　class="float-left">Links浮动</span>
　　　　<span　class="float-right">Rechts浮动</span>
　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

响应式浮动

我们看可以设置浮动 (.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>

Testen Sie es heraus ‹/›

居中对齐

使用 .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>

Testen Sie es heraus ‹/›

宽度

元素上使用 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>

Testen Sie es heraus ‹/›

高度

元素上使用 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>Höhen-Werkzeug</h1>
　　<p>Elemente verwenden　h-*　Klasse　(.h-25,　.h-5,　.h-75,　.h-100,　.mh-100) um die Höhe zu setzen:</p>
　　<div style="height:200px;background-color:#ddd">
　　　　<div class="h-25　d-inline-block　p-2　bg-warning">Höhe　25%</div>
　　　　<div class="h-50　d-inline-block　p-2　bg-warning">Höhe　50%</div>
　　　　<div class="h-75　d-inline-block　p-2　bg-warning">Höhe　75%</div>
　　　　<div class="h-100　d-inline-block　p-2　bg-warning">Höhe　100%</div>
　　　　<div class="mh-100　d-inline-block　p-2　bg-warning" style="height:500px">Maximale Höhe　100%</div>
　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Bootstrap4 Flex-Layout Bootstrap4 Scroll-Überwachung