Blaze UI es un kit de herramientas de interfaz de usuario de código abierto sin marco que utiliza componentes de JavaScript para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene excelentes elementos diferentes para usar para hacer que su sitio web se vea más sorprendente. Este marco nos permite usar varios de sus estilos y propiedades para hacer que un sitio web sea más fácil de usar.
Blaze UI proporciona contenedores para agregar datos con estilos receptivos. Los contenedores proporcionan restricciones de ancho de pantalla de consulta de medios en el contenido. Hay seis tamaños ofrecidos por Blaze UI Containers, xsmall, small, medium, large, xlarge y super.
Los contenedores se basan en las siguientes variables de tamaño de pantalla:
- $screen-width-xsmall: En este, el ancho de la pantalla será de 20em;
- $screen-width-small: En este, el ancho de la pantalla será de 30em;
- $screen-width-medium: En este, el ancho de la pantalla será de 48em;
- $screen-width-large: En este, el ancho de la pantalla será de 64em;
- $screen-width-xlarge: En este, el ancho de la pantalla será de 78em;
- $screen-width-super: En este, el ancho de la pantalla será de 116em;
Clase de contenedor Blaze-UI:
- o-container: esta clase se usa para agregar Blaze UI Container.
- o-container–xsmall: Esta clase se usa para agregar un contenedor con un ancho de 20em.
- o-container–small: Esta clase se usa para agregar un contenedor con un ancho de 30em.
- o-container–medium: Esta clase se usa para agregar un contenedor con un ancho de 48em.
- o-container–large: Esta clase se usa para agregar un contenedor con un ancho de 64em.
- o-container–xlarge: Esta clase se usa para agregar un contenedor con un ancho de 78em.
- o-container–super: esta clase se usa para agregar un contenedor con un ancho de 116em.
Sintaxis:
<div class="o-container o-container-- ... ">...</div>
Ejemplo 1: el siguiente código muestra el contenedor Blaze UI xsmall y small size usando las clases proporcionadas.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<script nomodule="" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
</script>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
<style>
.Logo {
color: green;
}
</style>
</head>
<body>
<h1 class="Logo">
GeeksforGeeks
</h1>
<h2>
Blaze UI xsmall Container
</h2>
<br />
<div class="o-container o-container--xsmall">
In today's digital world, when there are thousands
of online platforms (maybe more than that!) available
over the web, it becomes quite difficult for students
to opt for a quality, relevant and reliable platform
for themselves. Meanwhile, as Computer Science is a
very vast field hence students are required to find
an appropriate platform that can fulfill all their
needs such as - Tutorials and Courses, Placement
Preparation, Interview Experiences, and various others.
And with the same concern, GeeksforGeeks comes in
the picture - a one-stop destination for all
Computer Science students!!
</div>
<h2>
Blaze UI small Container
</h2>
<br />
<div class="o-container o-container--small">
In today's digital world, when there are thousands
of online platforms (maybe more than that!) available
over the web, it becomes quite difficult for students
to opt for a quality relevant and reliable platform
for themselves. Meanwhile, as Computer Science is a
very vast field hence students are required to find
an appropriate platform that can fulfill all their
needs such as - Tutorials and Courses, Placement
Preparation, Interview Experiences, and various others.
And with the same concern, GeeksforGeeks comes in
the picture - a one-stop destination for all
Computer Science students!!
</div>
</body>
</html>
Producción:
Ejemplo 2: el siguiente código demuestra el tamaño mediano y grande del contenedor Blaze UI con las clases proporcionadas.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<script nomodule="" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
</script>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
<style>
.Logo {
color: green;
}
</style>
</head>
<body>
<h1 class="Logo">
GeeksforGeeks
</h1>
<h2>
Blaze UI medium Container
</h2>
<br />
<div class="o-container o-container--medium">
In today's digital world, when there are thousands
of online platforms (maybe more than that!) available
over the web, it becomes quite difficult for students
to opt for a quality, relevant and reliable platform
for themselves. Meanwhile, as Computer Science is a
very vast field hence students are required to find
an appropriate platform that can fulfill all their
needs such as - Tutorials and Courses, Placement
Preparation, Interview Experiences, and various others.
And with the same concern, GeeksforGeeks comes in
the picture - a one-stop destination for all
Computer Science students!!
</div>
<h2>
Blaze UI large Container
</h2>
<br />
<div class="o-container o-container--large">
In today's digital world, when there are thousands
of online platforms (maybe more than that!) available
over the web, it becomes quite difficult for students
to opt for a quality, relevant and reliable platform
for themselves. Meanwhile, as Computer Science is a
very vast field hence students are required to find
an appropriate platform that can fulfill all their
needs such as - Tutorials and Courses, Placement
Preparation, Interview Experiences, and various others.
And with the same concern, GeeksforGeeks comes in
the picture - a one-stop destination for all
Computer Science students!!
</div>
</body>
</html>
Producción:
Ejemplo 3: El siguiente código muestra el contenedor Blaze UI xlarge y super size usando las clases proporcionadas.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<script nomodule="" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
</script>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
<style>
.Logo {
color: green;
}
</style>
</head>
<body>
<h1 class="Logo">
GeeksforGeeks
</h1>
<h2>
Blaze UI xlarge Container -78em
</h2>
<br />
<div class="o-container o-container--xlarge">
In today's digital world, when there are thousands
of online platforms (maybe more than that!) available
over the web, it becomes quite difficult for students
to opt for a quality, relevant and reliable platform
for themselves. Meanwhile, as Computer Science is a
very vast field hence students are required to find
an appropriate platform that can fulfill all their
needs such as - Tutorials and Courses, Placement
Preparation, Interview Experiences, and various others.
And with the same concern, GeeksforGeeks comes in
the picture - a one-stop destination for all
Computer Science students!!
</div>
<h2>
Blaze UI super Container -116em
</h2>
<br />
<div class="o-container o-container--super">
In today's digital world, when there are thousands
of online platforms (maybe more than that!) available
over the web, it becomes quite difficult for students
to opt for a quality, relevant and reliable platform
for themselves. Meanwhile, as Computer Science is a
very vast field hence students are required to find
an appropriate platform that can fulfill all their
needs such as - Tutorials and Courses, Placement
Preparation, Interview Experiences, and various others.
And with the same concern, GeeksforGeeks comes in
the picture - a one-stop destination for all
Computer Science students!!
</div>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/objects/containers/
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA