Bootstrap4 Tutorial Básico

Bootstrap4 Flexbox Bootstrap4 Escuta de Rolar

Bootstrap4 ferramentas

Bootstrap4 fornece algumas ferramentas, que nos permitem alcançar os efeitos desejados sem escrever código CSS.

borda

Usar a classe borda para adicionar ou remover borda:

示例

<!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>
　　.borda　{
　　　　display:　inline-block;
　　　　width:　70px;
　　　　height:　70px;
　　　　margin:　6px;
　　}
　　</style>
</head>
<body>
<div　class="container">
　　<h2>borda</h2>
　　<p>Usar a classe borda para adicionar ou remover borda:/p>　
　　<span　class="borda">/span>
　　<span　class="borda　borda-0"></span>
　　<span　class="borda　borda-superior-0"></span>
　　<span　class="borda　borda-direita-0"></span>
　　<span　class="borda　borda-inferior-0"></span>
　　<span　class="borda　borda-esquerda-0"></span>
</div>
</body>
</html>

Teste Veja ‹/›

cor da borda

Bootstrap4 fornece algumas classes para definir cor da borda:

示例

<!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>
　　.borda　{
　　　　display:　inline-block;
　　　　width:　70px;
　　　　height:　70px;
　　　　margin:　6px;
　　}
　　</style>
</head>
<body>
<div　class="container">
　　<h2>cor da borda</h2>
　　<p>Bootstrap4　fornece algumas classes para definir cor da borda:/p>　
　　<span　class="borda　borda-primário"></span>
　　<span　class="borda　borda-secundário"></span>
　　<span　class="borda　borda-sucesso"></span>
　　<span　class="borda　borda-perigo"></span>
　　<span　class="borda　borda-aviso"></span>
　　<span　class="borda　borda-informação"></span>
　　<span　class="borda　borda-claro"></span>
　　<span　class="borda　borda-escuro"></span>
　　<span　class="borda　borda-branco"></span>
</div>
</body>
</html>

Teste Veja ‹/›

configuração de cantos arredondados

Usar a classe redonda para adicionar cantos arredondados:

示例

<!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>configuração de cantos arredondados</h2>
　　<p>Usar a classe redonda para adicionar cantos arredondados:/p>　
　　<span　class="redonda">/span>
　　<span　class="redonda">-superior"></span>
　　<span　class="redonda">-direita"></span>
　　<span　class="redonda">-inferior"></span>
　　<span　class="redonda">-left"></span>
　　<span　class="redonda">-circle"></span>
　　<span　class="redonda">-0"></span>
</div>
</body>
</html>

Teste Veja ‹/›

flutuante

.flutuante-right classe usada para definir elemento flutuante direita, .flutuante-left definir elemento flutuante esquerda, .clearfix classe usada para remover flutuamento:

示例

<!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>flutuante</h2>
　　<p>.flutuante-right　classe usada para definir elemento flutuante direita, .flutuante-left　definir elemento flutuante esquerda, .clearfix　classe usada para remover flutuamento:</p>　
　　<div　class="clearfix">
　　　　<span　class="flutuante">-left">direita flutuante</span>
　　　　<span　class="flutuante">-right">esquerda flutuante</span>
　　</div>
</div>
</body>
</html>

Teste Veja ‹/›

响应式浮动

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

Teste Veja ‹/›

居中对齐

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

Teste Veja ‹/›

宽度

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

Teste Veja ‹/›

高度

元素上使用 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>Miniaplicativo de Altura</h1>
　　<p>elemento usar　h-*　classe　(.h-25,　.h-5,　.h-75,　.h-100,　.mh-100)　Para ajustar a altura:</p>
　　<div　style="height:200px;background-color:#ddd">
　　　　<div　class="h-25　d-inline-block　p-2　bg-warning">Altura　25%%</div>
　　　　<div　class="h-50　d-inline-block　p-2　bg-warning">Altura　50%</div>
　　　　<div　class="h-75　d-inline-block　p-2　bg-warning">Altura　75%%</div>
　　　　<div　class="h-100　d-inline-block　p-2　bg-warning">Altura　100%</div>
　　　　<div　class="mh-100　d-inline-block　p-2　bg-warning"　style="height:500px">Altura Máxima　100%</div>
　　</div>
</div>
</body>
</html>

Teste Veja ‹/›

Bootstrap4 Flexbox Bootstrap4 Escuta de Rolar