Variaciones de botones de interfaz de usuario semántica Botones de igual ancho

El grupo de botones de interfaz de usuario semántica también ofrece una variación de grupo de botones, hay botones de icono, botones de icono etiquetados, botones de grupo mixto, ancho igual, botones de colores, botones básicos, botones de tamaño de grupo, etc.

En este artículo, discutiremos el ancho igual. Equal Width puede tener sus anchos divididos uniformemente, aquí podemos crear un grupo de botones simple que seguirá un ancho fijo de cada botón que será el mismo dentro de ese grupo.

Variaciones de botón de interfaz de usuario semántica Clase de igual ancho:

number*: esta es la variable, puede simplemente colocar el nombre de conteo (en orden alfabético) en el elemento div para dividir el ancho de manera uniforme.

Sintaxis:

<div class="number*ui buttons">
  <button class="ui button">...</button>
  <button class="ui button">...</button>
    ...
</div>

Ejemplo: En este ejemplo, crearemos dos grupos de botones, uno contendrá 2 botones con el mismo ancho, otro contendrá 5 botones, cada ancho de botón será igual entre sí en los grupos.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" />
</head>
 
<body>
    <center>
        <h1>Geeksforgeeks:</h1>
        <strong>Semantic UI Button Variations Equal Width</strong>
    </center>
    <br><br>
    <strong>Equal Width Buttons:</strong>
    <br>
    <div class="ui three buttons">
        <button class="ui button">Like</button>
        <button class="ui button">Share</button>
        <button class="ui button">Subscribe</button>
    </div>
    <br><br>
    <strong>Equal Coloured Width Buttons:</strong>
    <br>
    <div class="ui five green buttons">
        <button class="ui button">Like</button>
        <button class="ui button">Share</button>
        <button class="ui button">Subscribe</button>
        <button class="ui button">Upload</button>
        <button class="ui button">Download</button>
    </div>
</body>
 
</html>

Producción:

Referencia: https://semantic-ui.com/elements/button.html#equal-width

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta