En Bulma , hay dos tipos de encabezados que son Título y Subtítulo . Estos encabezados simples se utilizan para agregar algo de profundidad a una página web o sitio web. Título y subtítulo están disponibles en muchos tamaños y se pueden utilizar según nuestros requisitos.
Clases de tamaño de título/subtítulo de Bulma:
- is-1: esta clase se usa junto con las clases de «título» o «subtítulo» para el elemento HTML h1.
- is-2: esta clase se usa junto con las clases de «título» o «subtítulo» para el elemento HTML h2.
- is-3: Esta clase se usa junto con las clases de «título» o «subtítulo» para el elemento HTML h3. Este es el tamaño predeterminado para el elemento de título.
- is-4: Esta clase se usa junto con las clases de “título” o “subtítulo” para el elemento HTML h4.
- is-5: Esta clase se usa junto con las clases de “título” o “subtítulo” para el elemento HTML h5. Este es el tamaño predeterminado para el elemento de subtítulo.
- is-6: esta clase se usa junto con las clases de «título» o «subtítulo» para el elemento HTML h6.
Tipos de encabezados en Bulma:
- Título: Cuando necesitamos usar un título, usamos la clase «título».
- Subtítulo: Cuando necesitamos usar un subtítulo, usamos la clase “subtítulo”.
Sintaxis:
<h1 class="title">Title/h1>
<h2 class="subtitle">Subtitle</h2>
<p class="title is-1">
....
</p>
Ejemplo 1: El siguiente ejemplo muestra la clase de título y subtítulo en los encabezados h1 y h2.
HTML
<!DOCTYPE html> <html> <head> <title>Title & Subtitle</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <h1 class="title">GeeksforGeeks</h1> <h2 class="subtitle">GeeksforGeeks</h2> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra los tamaños de título anteriores. La clase Title is-3 es el tamaño predeterminado.
HTML
<!DOCTYPE html> <html> <head> <title>Title & Subtitle</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <h1 class="title is-1">GeeksforGeeks</h1> <h2 class="title is-2">GeeksforGeeks</h2> <h3 class="title is-3">GeeksforGeeks</h3> <h4 class="title is-4">GeeksforGeeks</h4> <h5 class="title is-5">GeeksforGeeks</h5> <h6 class="title is-6">GeeksforGeeks</h6> </body> </html>
Producción:
Tamaños de título
Ejemplo 3: El siguiente ejemplo demuestra los tamaños de subtítulos anteriores. El subtítulo is-5 class es el tamaño predeterminado.
HTML
<!DOCTYPE html> <html> <head> <title>Title & Subtitle</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <h1 class="subtitle is-1">GeeksforGeeks</h1> <h2 class="subtitle is-2">GeeksforGeeks</h2> <h3 class="subtitle is-3">GeeksforGeeks</h3> <h4 class="subtitle is-4">GeeksforGeeks</h4> <h5 class="subtitle is-5">GeeksforGeeks</h5> <h6 class="subtitle is-6">GeeksforGeeks</h6> </body> </html>
Producción:
Tamaños de subtítulos
Nota: No podemos agregar color al título y subtítulo.
Referencia: https://bulma.io/documentation/elements/title/#sizes
Publicación traducida automáticamente
Artículo escrito por portalpirate y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA