Las clases de utilidad receptivas ayudan a crear diseños web receptivos fácilmente. Puede ocultar o mostrar el contenido de su elección en la página web. Tienes que definir el tamaño de la pantalla para la que estás ocultando o mostrando el contenido.
Las clases de utilidad sensibles se definen para cinco tipos diferentes de tamaños:
- xs: Denota la pantalla extra pequeña, cuyo ancho será inferior a 576px.
- sm: La pantalla de tamaño pequeño con un ancho mayor o igual a 576px .
- md: Denota una pantalla de tamaño mediano con un ancho mayor o igual a 768px .
- lg: Dispositivos grandes de ancho mayor o igual a 992px.
- xl: Los dispositivos Extra grandes con un ancho mayor o igual a 1200px.
Aquí está la lista de clases de utilidad receptivas:
- .d-none: esta clase se usa para ocultar el contenido en todos los dispositivos de diferentes tamaños de pantalla.
- .d-none .d-sm-block: esta clase se usa para ocultar el contenido solo en dispositivos extra pequeños .
- .d-sm-none .d-md-block: esta clase se usa para ocultar el contenido solo en dispositivos pequeños .
- .d-md-none .d-lg-block: esta clase se usa para ocultar el contenido solo en dispositivos de tamaño mediano .
- .d-lg-none .d-xl-block: esta clase se usa para ocultar el contenido solo en dispositivos grandes .
- .d-xl-none .d-xxl-block: esta clase se usa para ocultar el contenido solo en dispositivos extragrandes .
- .d-block: esta clase se utiliza para mostrar el contenido en todos los dispositivos de diferentes tamaños de pantalla.
- .d-block .d-sm-none: esta clase se usa para mostrar el contenido solo en dispositivos extrapequeños .
- .d-none .d-sm-block .d-md-none: esta clase se usa para mostrar el contenido solo en dispositivos pequeños .
- .d-none .d-md-block .d-lg-none: esta clase se usa para mostrar el contenido solo en dispositivos de tamaño mediano .
- .d-none .d-lg-block .d-xl-none: esta clase se usa para mostrar el contenido solo en dispositivos grandes .
- .d-none .d-xl-block .d-xxl-none: esta clase se usa para mostrar el contenido solo en dispositivos extragrandes .
// Visible only for small size devices
<div class=".d-none .d-sm-block .d-md-none">
// Hidden only for medium size devices
<div class=".d-md-none .d-lg-block">
<!---content of div tag--->
</div>
</div>
Los siguientes ejemplos demuestran el uso de clases de utilidad receptivas:
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<!-- Bootstrap cdn to link the bootstrap
with HTML document -->
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous" />
<style>
.green {
background-color: green;
color: white;
border: 2px solid black;
}
</style>
<title>Responsive utility classes in Bootstrap</title>
</head>
<body>
<div class="container">
<div class="row">
<span class="col d-md-block green">
Text 1 of first container
</span>
<span class="col d-md-none">
Text 2 of first container
</span>
<span class="col d-md-block green">
Text 3 of first container
</span>
</div>
<div class="row">
<span class="col d-md-none">
Text 1 of second container
</span>
<span class="col d-md-block green">
Text 2 of second container
</span>
<span class="col d-md-none">
Text 3 of second container
</span>
</div>
</div>
<!-- Bootstrap jQuery link -->
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
integrity=
"sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
integrity=
"sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous">
</script>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<!-- Bootstrap cdn to link the bootstrap
with HTML document -->
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous" />
<style>
.green {
background-color: green;
color: white;
border: 2px solid black;
}
</style>
<title>Responsive utility classes in Bootstrap</title>
</head>
<body>
<div class="container">
<div class="row">
<span class="col d-sm-none green">
Text 1 of first container
</span>
<span class="col d-sm-block">
Text 2 of first container
</span>
<span class="col d-sm-none green">
Text 3 of first container
</span>
</div>
<div class="row">
<span class="col d-sm-block">
Text 1 of second container
</span>
<span class="col d-sm-none green">
Text 2 of second container
</span>
<span class="col d-sm-block">
Text 3 of second container
</span>
</div>
</div>
<!-- Bootstrap jQuery link -->
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
integrity=
"sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
integrity=
"sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous">
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por abhisheksainiaggarwal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA