Bootstrap: es un marco CSS de código abierto gratuito que se utiliza para crear sitios web receptivos, es decir, la interfaz de usuario no se distorsionará independientemente de la resolución del tamaño de la pantalla. Puede ser un iPad, una tableta, un móvil o cualquier otro dispositivo en el que el sitio web funcione sin problemas. Para lograr este objetivo, podemos usar las clases integradas del marco y también podemos personalizar las propiedades de la clase usando consultas de medios. A continuación hay una tabla que enumera todos los puntos de interrupción de consulta de medios.
| Tipo de dispositivo | min-ancho en px |
| Dispositivos pequeños como móviles | 576px |
| Dispositivos medianos como tabletas | 768px |
| Dispositivos grandes como computadoras de escritorio | 992px |
| Dispositivos muy grandes o extra grandes como computadoras de escritorio grandes | 1200px |
Ejemplo: el siguiente ejemplo usa consultas de medios y agregará una propiedad para el color de fondo para pantallas muy grandes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
<style>
@media screen and (min-width: 1200px) {
body {
background-color: #bedcfa;
color: black;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h3>Column 1</h3>
<p>
HTML stands for HyperText Markup
Language. It is used to design
web pages using a markup language.
HTML is the combination of
Hypertext and Markup language.
Hypertext defines the link between
the web pages. A markup language
is used to define the text document
within tag which defines the
structure of web pages. HTML is a
markup language that is used by
the browser to manipulate text,
images, and other content to
display it in the required format.
</p>
</div>
<div class="col-sm-6">
<h3>Column 2</h3>
<p>
The term PHP is an acronym for PHP:
Hypertext Preprocessor. PHP is a
server-side scripting language
designed specifically for web
development. PHP can be easily
embedded in HTML files and HTML
codes can also be written in a PHP
file. The thing that differentiates
PHP with client-side language like
HTML is,PHP codes are executed on
the server whereas HTML codes are
directly rendered on the browser.
</p>
</div>
</div>
</div>
</body>
</html>
Producción:
Observación: si el tamaño de la pantalla es superior a 1200 px, el color de fondo es el anterior y si la resolución es inferior a 1200 px, el color de fondo será ninguno.
Publicación traducida automáticamente
Artículo escrito por bunnyram19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA