Bootstrap4 Tutoriel de base

Bootstrap4 Mise en page Flex Bootstrap4 Surveillance de défilement

Bootstrap4 outils

Bootstrap4 fournissent quelques outils qui nous permettent de réaliser les effets désirés sans écrire de code CSS.

bordure

Utiliser la classe bordure pour ajouter ou supprimer une bordure:

示例

<!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>
　　.bordure　{
　　　　display:　inline-block;
　　　　largeur:　70px;
　　　　hauteur:　70px;
　　　　marge:　6px;
　　}
　　</style>
</<head>
<body>
<div class="container">
　　<h2>bordure</h2>
　　<p>Utiliser la classe bordure pour ajouter ou supprimer une bordure:/p>　
　　<span　class="bordure"></span>
　　<span　class="bordure　bordure-0"></span>
　　<span　class="bordure　bordure-haut-0"></span>
　　<span　class="bordure　bordure-droite-0"></span>
　　<span　class="bordure　bordure-bas-0"></span>
　　<span　class="bordure　bordure-gauche-0"></span>
</div>
</body>
</html>

Voyons un test ‹/›

couleur de bordure

Bootstrap4 fournissent quelques classes pour définir la couleur de la bordure:

示例

<!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>
　　.bordure　{
　　　　display:　inline-block;
　　　　largeur:　70px;
　　　　hauteur:　70px;
　　　　marge:　6px;
　　}
　　</style>
</<head>
<body>
<div class="container">
　　<h2>couleur de bordure</h2>
　　<p>Bootstrap4　fournissent quelques classes pour définir la couleur de la bordure:/p>　
　　<span　class="bordure　bordure-primaire"></span>
　　<span　class="bordure　bordure-secondaire"></span>
　　<span　class="bordure　bordure-succès"></span>
　　<span　class="bordure　bordure-dangereux"></span>
　　<span　class="bordure　bordure-avertissement"></span>
　　<span　class="bordure　bordure-info"></span>
　　<span　class="bordure　bordure-clair"></span>
　　<span　class="bordure　bordure-noir"></span>
　　<span　class="bordure　bordure-blanc"></span>
</div>
</body>
</html>

Voyons un test ‹/›

paramètres de bord arrondi

Utiliser la classe arrondi pour ajouter des bords arrondis:

示例

<!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;
　　　　largeur:　70px;
　　　　hauteur:　70px;
　　　　marge:　6px;
　　　　background-color:　#555;
　　}
　　</style>
</<head>
<body>
<div class="container">
　　<h2>paramètres de bord arrondi</h2>
　　<p>Utiliser la classe arrondi pour ajouter des bords arrondis:/p>　
　　<span　class="arrondi"></span>
　　<span　class="arrondi-haut"></span>
　　<span　class="arrondi-droite"></span>
　　<span　class="arrondi-bas"></span>
　　<span　class="arrondi-left"></span>
　　<span　class="arrondi-circle"></span>
　　<span　class="arrondi-0"></span>
</div>
</body>
</html>

Voyons un test ‹/›

flottant

.flottant-right est utilisé pour positionner l'élément en flottant à droite, .flottant-left positionne l'élément en flottant à gauche, .clartitude　est utilisé pour supprimer le flottement:

示例

<!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>flottant</h2>
　　<p>.flottant-right　est utilisé pour positionner l'élément en flottant à droite, .flottant-left　positionne l'élément en flottant à gauche, .clartitude　est utilisé pour supprimer le flottement:/p>　
　　<div　class="clartitude">
　　　　<span　class="flottant-left">flottant à gauche</span>
　　　　<span　class="flottant-right">flottant à droite</span>
　　</div>
</div>
</body>
</html>

Voyons un test ‹/›

响应式浮动

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

Voyons un test ‹/›

居中对齐

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

Voyons un test ‹/›

宽度

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

Voyons un test ‹/›

高度

元素上使用 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>Outil de hauteur</h1>
　　<p>élément en utilisant h-*　classe (.h-25, .h-5, .h-75, .h-100, .mh-100) pour définir la hauteur :</p>
　　<div style="height:200px;background-color:#ddd">
　　　　<div class="h-25　d-inline-block p-2　bg-warning">Hauteur　25%</div>
　　　　<div class="h-50 d-inline-block p-2　bg-warning">Hauteur　50%</div>
　　　　<div class="h-75　d-inline-block p-2　bg-warning">Hauteur　75%</div>
　　　　<div class="h-100 d-inline-block p-2　bg-warning">Hauteur　100%</div>
　　　　<div class="mh-100 d-inline-block p-2　bg-warning" style="height:500px">Hauteur maximale　100%</div>
　　</div>
</div>
</body>
</html>

Voyons un test ‹/›

Bootstrap4 Mise en page Flex Bootstrap4 Surveillance de défilement