Buscar..


Observaciones

Una cosa a tener en cuenta es que uno tiene que mencionar el nombre custom.css después del bootstrap.css principal, de lo contrario, los valores de custom.css no se implementarán realmente.

Anulación de CSS predeterminado

Todo el mundo ama el bootstrap de Twitter , pero a algunos de nosotros no nos gusta su diseño predeterminado. Así que aquí hay una guía simple sobre cómo comenzar a personalizar el diseño de boostrap. El refuerzo de Twitter cuando se clona proporciona un conjunto de archivos css predeterminados que podemos anular.

El archivo css de correo que debemos anular es boostrap.min.css en el directorio boostrap/dist/css .

Para anular el diseño predeterminado de boostrap, siga estos 2 sencillos pasos.

  1. custom.css un custom.css (o puede custom.css nombre que desee) y vincularlo a su index.html

    <html>
    <head>
        <title>Customize Bootstrap</title>
    
        <link rel="stylesheet" type="text/css" href="path/to/bootstrap.min.css">
        <!-- This mus be declared after the bootstrap.min.css -->
        <link rel="stylesheet" type="text/css" href="path/to/your/custom.css">
    </head>
    <body>
        <!-- Do something -->
    </body>
    </html>
    
  2. Empezar a personalizar. Por ejemplo, queremos cambiar el color del botón predeterminado. Si desea utilizar el estilo de botón predeterminado de bootstrap, debe agregar la clase btn en su etiqueta <button class="btn">Sample</button> . Simplemente escriba el siguiente código en su custom.css .

    .btn{
        background-color:red;
    }
    

    El código de arriba producirá algo como esto.

    Defecto :

    introduzca la descripción de la imagen aquí

    Personalizado :

    introduzca la descripción de la imagen aquí

Esta técnica nos evitará reescribir todos los estilos de botones que ya fueron escritos por los colaboradores de boostrap. Esto también nos salvó de escribir nuestra propia clase de css, que para mí es menos tediosa.



Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow