1

Estoy usando NetBeans y Bootstrap.

Como ven todo está gris y no se aplican los estilos:

introducir la descripción de la imagen aquí

Aquí coloqué los estilos, pero no los carga como ya intenté Ctrl + F5:

introducir la descripción de la imagen aquí

body {
    background-image:   url('../img/ep_naturalblack.png') !important;
}

.jumbotron {
    background-color: #07121e !important;
}
   

    <!DOCTYPE html>
    <html lang="es">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
    
            <title>Easter Eggs</title>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        </head>
        <body>   
            <nav class="navbar-default navbar-static-top">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Este botón despliega la barra de navegación</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">Easter Eggs</a>
                    </div>
                    <div id="navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li><a href="#">Entradas</a></li>
                            <li><a href="#">Favoritos</a></li>
                            <li><a href="#">Autores</a></li>
                        </ul>
                        <u1 class="nav navbar-nav navbar-right">
                            <li><a href="#">Iniciar sesion</a></li>
                            <li><a href="#">Registro</a></li>
                        </u1>
                    </div>
                </div> 
            </nav>
            
            <div class="container">
                <div class="panel-body"></div>
            </div>
    
            <div class="container">
                <div class="jumbotron">
                    <h1>Easter Eggs</h1>
                    <p>
                        Web dedicada a descubrir y compartir los Easter Eggs de los Videojuegos
                    </p>
                </div>        
            </div>
    
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span> Busqueda
                                    </div>
                                    <div class="panel-body">
                                        <div class="form-group">
                                            <input type="search" class="form-control" placeholder="Que buscas?">
                                        </div>
                                        <button class="form-control">Buscar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <span class="glyphicon glyphicon-filter" aria-hidden="true"></span> Filtro
                                    </div>
                                    <div class="panel-body">
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> Archivo
                                    </div>
                                    <div class="panel-body">
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Ultimas entradas
                            </div>
                            <div class="panel-body">
                                <p>Todavia no hay entradas que mostrar</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    
        </body>
    </html>

3
  • No podemos ayudarte si no aportas el código que estás utilizando, por favor revisa este enlace sobre cómo preguntar correctamente en este sitio: es.stackoverflow.com/help/mcve También revisa: es.stackoverflow.com/help/how-to-ask Commented el 27 nov. 2018 a las 21:21
  • Listo amigo ya agregue el codigo. Commented el 27 nov. 2018 a las 21:48
  • 1
    En vez de editar tu código para añadir la solución que te dieron, déjalo como estaba y acepta la respuesta ya que te ha ayudado a resolver tu problema, así otras personas pueden beneficiarse de la información que te han dado...
    – user108089
    Commented el 28 nov. 2018 a las 15:10

2 respuestas 2

2

La clase dentro del css se escribe .jumbotron con el punto por delante. No es una etiqueta propia de HTML, es una clase de Bootstrap, por eso debe anteponerse el punto . como indicador.

body {
    background-image:   url('https://img.freepik.com/foto-gratis/textura-fondo_1404-93.jpg?size=626&ext=jpg') !important;
}

.jumbotron {
    background-color: #07121e!important;
}
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Easter Eggs</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>   
        <nav class="navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Este botón despliega la barra de navegación</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Easter Eggs</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Entradas</a></li>
                        <li><a href="#">Favoritos</a></li>
                        <li><a href="#">Autores</a></li>
                    </ul>
                    <u1 class="nav navbar-nav navbar-right">
                        <li><a href="#">Iniciar sesion</a></li>
                        <li><a href="#">Registro</a></li>
                    </u1>
                </div>
            </div> 
        </nav>

        <div class="container">
            <div class="panel-body"></div>
        </div>

        <div class="container">
            <div class="jumbotron">
                <h1>Easter Eggs</h1>
                <p>
                    Web dedicada a descubrir y compartir los Easter Eggs de los Videojuegos
                </p>
            </div>        
        </div>

        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span> Busqueda
                                </div>
                                <div class="panel-body">
                                    <div class="form-group">
                                        <input type="search" class="form-control" placeholder="Que buscas?">
                                    </div>
                                    <button class="form-control">Buscar</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <span class="glyphicon glyphicon-filter" aria-hidden="true"></span> Filtro
                                </div>
                                <div class="panel-body">

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> Archivo
                                </div>
                                <div class="panel-body">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Ultimas entradas
                        </div>
                        <div class="panel-body">
                            <p>Todavia no hay entradas que mostrar</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

    </body>
</html>

0

Listo encontré la solución, solo tuve que agregar una linea de código en el <head>, le agregue <link rel="StyleSheet" type="text/css" href="css/estilos.css" /> y listo me los cargo el netbeans, en el href="coloquen la ruta de sonde se encuentran sus estilos" en vez de esto css/estilos.css ya que es la ruta donde yo tenia los estilos.

3
  • Si ya estás usando los estilos de Bootstrap, no me parece una buena práctica (ni lógico) crear otra hoja de estilos cuyo contenido sean las mismas clases de Bootstrap y les apliques !important. Commented el 28 nov. 2018 a las 16:42
  • Entonces cual seria la manera correcta de darle estilo a una pagina web? Y lo de '!important' si no lo agrego no aplica los estilos. Commented el 28 nov. 2018 a las 17:31
  • 1
    No es que sea incorrecta, pues a fin de cuentas te funciona como lo estás haciendo. Puedes usar las hojas de estilo que desees en tu proyecto, el problema es cuando creas redundancia entre ellas y quieres solucionarlo aplicando la regla !important. Por ejemplo, Bootstrap tiene la clase jumbotron dentro de su librería, con unos atributos que ya están definidos. Cuál es el objetivo entonces de crear otra hoja de estilos en la que estás forzando los mismas propiedades que ya trae Bootstrap? Aconsejo visites: librosweb.es/libro/css/capitulo-13/… Commented el 28 nov. 2018 a las 17:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.