Spectre Divider se usa para crear un divisor entre tipos similares de componentes si diseña inicio de sesión y registro en la página pero desea dividirlos uno al lado del otro vertical u horizontalmente, entonces podemos hacerlo.
Clase de divisor de espectro:
- divisor: Esta clase se utiliza para dividir los contenidos.
- divider-vert: esta clase se utiliza para crear un divisor vertical entre los contenidos.
Atributo del divisor de espectro:
- contenido de datos: este atributo contiene el valor de texto que desea mostrar en la línea divisoria.
Sintaxis:
<div class="divider">
....
</div>
- Elemento con texto:
<div class="divider text-center" data-content="OR"> .... </div>
Los siguientes ejemplos ilustran el Spectre Divider.
Ejemplo 1: En este artículo lo veremos sin texto y con el divisor de texto.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>Spectre Divider Class</strong> <br> </center> <strong>Spectre CSS:</strong> <div class="divider"></div> <p> Spectre is a lightweight, responsive, and modern CSS framework, which provides the extensible with faster development. It facilitates the responsive layout system based on the flexbox property, along with providing the basic elements & typography stylings. It solves many problems that we had once like the cross-browser compatibility issue. In the current scenario, the websites are perfect for all the browsers (IE, Firefox, and Chrome) and for all sizes of screens (Desktop, Tablets, Phablets, and Phones). </p> <br> <strong>Can Spectre Replace Bootstrap</strong> <p> Spectre is much more lighter than the Bootstrap but there are few drawback in this frameworks. There are few classes used in bootstrap that can not be done in spectre. If you can avoid those things then yes it can other wise not. </p> <!-- divider element with text --> <div class="divider text-center" data-content="OR"></div> <strong>Can Spectre Replace Tailwind</strong> <p> In my opinion, no, Spectre can not replace the Tailwind. Tailwind CSS is the future of designing of websites. </p> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, veremos la clase divisor-vert .
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>Spectre Divider Class</strong> <br> </center> <!-- vertical divider element with text --> <div class="columns"> <div class="column"> <strong>Can Spectre Replace Bootstrap</strong> <p> Spectre is much more lighter than the Bootstrap but there are few drawback in this frameworks. There are few classes used in bootstrap that can not be done in spectre. If you can avoid those things then yes it can other wise not. </p> </div> <div class="divider-vert" data-content="OR"> </div> <div class="column"> <strong>Can Spectre Replace Tailwind</strong> <p> In my opinion no, Spectre can not replace the Tailwind. Tailwind CSS is the future of designing of websites. </p> </div> </div> </body> </html>
Producción:
Referencia: https://picturepan2.github.io/spectre/utilities/divider.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA