Bootstrap4 Tutoriales básicos

Bootstrap4 Diseño Flex Bootstrap4 Escucha de desplazamiento

Bootstrap4 herramientas pequeñas

Bootstrap4 proporciona algunas herramientas pequeñas que nos permiten lograr el efecto deseado sin escribir código CSS.

borde

Usar la clase borde para agregar o quitar borde:

示例

<!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>
　　.borde {
　　　　display: inline-bloque;
　　　　ancho:　70px;
　　　　altura:　70px;
　　　　margen:　6px;
　　}
　　</style>
</head>
<body>
<div　class="container">
　　<h2>borde</h2>
　　<p>Usar la clase borde para agregar o quitar borde:</p>　
　　<span class="borde"></span>
　　<span class="borde borde-0"></span>
　　<span class="borde borde-arriba-0"></span>
　　<span class="borde borde-derecha-0"></span>
　　<span class="borde borde-abajo-0"></span>
　　<span class="borde borde-izquierda-0"></span>
</div>
</body>
</html>

Prueba y observa ‹/›

colores de borde

Bootstrap4 proporciona algunas clases para configurar colores de borde:

示例

<!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>
　　.borde {
　　　　display: inline-bloque;
　　　　ancho:　70px;
　　　　altura:　70px;
　　　　margen:　6px;
　　}
　　</style>
</head>
<body>
<div　class="container">
　　<h2>colores de borde</h2>
　　<p>Bootstrap4　proporciona algunas clases para configurar colores de borde:/p>　
　　<span class="borde borde-primario"></span>
　　<span class="borde borde-secundario"></span>
　　<span class="borde borde-éxito"></span>
　　<span class="borde borde-peligro"></span>
　　<span class="borde borde-advertencia"></span>
　　<span class="borde borde-información"></span>
　　<span class="borde borde-claro"></span>
　　<span class="borde borde-oscuro"></span>
　　<span class="borde borde-blanco"></span>
</div>
</body>
</html>

Prueba y observa ‹/›

configuración de bordes redondeados

Usar la clase redondeado para agregar bordes redondeados:

示例

<!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-bloque;
　　　　ancho:　70px;
　　　　altura:　70px;
　　　　margen:　6px;
　　　　fondo-color: #555;
　　}
　　</style>
</head>
<body>
<div　class="container">
　　<h2>configuración de bordes redondeados</h2>
　　<p>Usar la clase redondeado para agregar bordes redondeados:</p>　
　　<span class="redondeado"></span>
　　<span class="redondeado-arriba"></span>
　　<span class="redondeado-derecha"></span>
　　<span class="redondeado-abajo"></span>
　　<span class="redondeado-left"></span>
　　<span class="redondeado-circle"></span>
　　<span class="redondeado-0"></span>
</div>
</body>
</html>

Prueba y observa ‹/›

flotar

.flotar-right clase se utiliza para configurar flotamiento a la derecha, .flotar-left flotar elementos, .clearfix clase se utiliza para eliminar flotamiento:

示例

<!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>flotar</h2>
　　<p>.flotar-right clase se utiliza para configurar flotamiento a la derecha, .flotar-left flotar elementos, .clearfix clase se utiliza para eliminar flotamiento:</p>　
　　<div class="claraflotamiento">
　　　　<span class="flotar-left">flotado a la izquierda</span>
　　　　<span class="flotar-right">flotado a la derecha</span>
　　</div>
</div>
</body>
</html>

Prueba y observa ‹/›

响应式浮动

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

Prueba y observa ‹/›

居中对齐

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

Prueba y observa ‹/›

宽度

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

Prueba y observa ‹/›

高度

元素上使用 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>Miniaplicación de altura</h1>
　　<p>elemento usando　h-*　clase　(.h-25,　.h-5,　.h-75,　.h-100,　.mh-100)　para establecer la altura:</p>
　　<div　estilo="altura:200px.Fondo-color:#ddd">
　　　　<div　class="h-25　d-línea-bloque　p-2　bg-aviso">Altura　25%%</div>
　　　　<div　class="h-50　d-línea-bloque　p-2　bg-aviso">Altura　50%</div>
　　　　<div　class="h-75　d-línea-bloque　p-2　bg-aviso">Altura　75%%</div>
　　　　<div　class="h-100　d-línea-bloque　p-2　bg-aviso">Altura　100%</div>
　　　　<div　class="mh-100　d-línea-bloque　p-2　bg-aviso"　estilo="altura:500px">Altura máxima　100%</div>
　　</div>
</div>
</body>
</html>

Prueba y observa ‹/›

Bootstrap4 Diseño Flex Bootstrap4 Escucha de desplazamiento