En este artículo, veremos los anchos máximos de Bulma Desktop y Widescreen. A veces, el usuario desea proporcionar un contenedor estrecho en ventanas de visualización más grandes y, para ello, el marco de Bulma proporciona dos clases de modificadores, es decir, is-max-desktop e is-max-widescreen. A continuación, hemos discutido estos dos modificadores con cada uno de sus ejemplos.
Clases de anchos máximos Bulma Desktop y Widescreen:
- is-max-desktop: esta clase se usa para proporcionar un contenedor estrecho como el tamaño de un contenedor de escritorio.
- is-max-widescreen: esta clase se utiliza para proporcionar un contenedor angosto como un contenedor de pantalla ancha.
Sintaxis:
<div class="container is-max-desktop ">
...
</div>
<div class="container is-max-widescreen">
...
</div>
Ejemplo 1: El siguiente ejemplo ilustra el escritorio de Bulma y los anchos máximos de pantalla ancha en Container.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>GFG</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"/> <script src= "https://use.fontawesome.com/releases/v5.15.4/js/all.js"> </script> </head> <body> <div class="content container has-text-centered"> <h1 class="title has-text-success"> GeekforGeeks </h1> <h1 class="subtitle"> Bulma Desktop and Widescreen maximum widths </h1> <div class="container is-max-desktop"> <div class="notification has-background-dark has-text-white"> Container having max-width of $is-max-desktop on widescreen and fullhd. </div> </div><br/> <div class="container is-max-widescreen"> <div class="notification has-background-dark has-text-white"> Container having max-width of $is-max-widescreen on fullhd. </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: el siguiente ejemplo ilustra el escritorio de Bulma y los anchos máximos de pantalla ancha en las imágenes.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>GFG</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"/> <script src= "https://use.fontawesome.com/releases/v5.15.4/js/all.js"> </script> </head> <body> <div class="content container has-text-centered"> <h1 class="title has-text-success"> GeekforGeeks </h1> <h1 class="subtitle"> Bulma Desktop and Widescreen maximum widths </h1> <div class="container is-max-desktop"> <div class="notification has-background-light"> <img src= "https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/GeeksforGeeks.svg/2560px-GeeksforGeeks.svg.png" alt=""/> </div> </div><br/> <div class="container is-max-widescreen"> <div class="notification has-background-light"> <img src= "https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/GeeksforGeeks.svg/2560px-GeeksforGeeks.svg.png" alt=""/> </div> </div> </div> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/layout/container/#desktop-and-widescreen-maximum-widths
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA