En este artículo, aprenderemos sobre Bulma Clearfix . Es un mixin que agrega un pseudo-elemento ::after con una regla clara: ambos . El uso de esta combinación hará que los elementos después del elemento flotante fluyan a su alrededor.
Bulma no da una clase específica para crear una mezcla de botón de reinicio. Necesitamos crear nuestra propia clase y diseñarla usando mixins SASS.
Sintaxis:
.bulma-clearfix-mixin {
@include clearfix;
}
Ejemplo 1: El siguiente ejemplo ilustra la mezcla Bulma Clearfix.
HTML
<!DOCTYPE html> <html lang="en"> <head> <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> <link rel="stylesheet" href="demo.css"> </head> <body> <div class="content container has-text-centered"> <h1 class="title has-text-success"> GeekforGeeks </h1> <h1 class="subtitle">Bulma Clearfix Mixin</h1> </div> <div class="container"> <div class="bulma-clearfix-mixin"> <img height="80" width="80" style="float: left;" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"> <h1 class="subtitle" style="font-weight: bold;"> Welcome to GeeksforGeeks. </h1> </div> <p>Learn Programming, Participate in Contests, apply for jobs, find video tutorials, and more. </p> </div> </body> </html>
CSS
@mixin clearfix() {
clear: both;
content: " ";
display: table;
}
.bulma-clearfix-mixin {
@include clearfix();
}
Producción:
Bulma Clearfix
Ejemplo 2: Otro ejemplo que ilustra la mezcla Bulma Clearfix con alineación correcta.
HTML
<!DOCTYPE html> <html lang="en"> <head> <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> <link rel="stylesheet" href="demo.css"> </head> <body> <div class="content container has-text-centered"> <h1 class="title has-text-success"> GeekforGeeks </h1> <h1 class="subtitle">Bulma Clearfix Mixin</h1> </div> <div class="container"> <div class="bulma-clearfix-mixin has-background-light p-4"> <img height="80" width="80" style="float: right; border-radius: 5rem;" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"> <h1 class="subtitle" style="font-weight: bold;"> GeeksforGeeks </h1> <p>Learn Programming, Participate in Contests, apply for jobs, find video tutorials, and more. </p> </div> </div> </body> </html>
CSS
@mixin clearfix() {
clear: both;
content: " ";
display: table;
}
.bulma-clearfix-mixin {
@include clearfix();
}
Producción:
Bulma Clearfix
Referencia: https://bulma.io/documentation/utilities/mixins/#clearfix
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA