Tunitter Bootstrap Problemas de instalación -- javascript campo con jquery campo con html campo con css campo con twitter-bootstrap camp Relacionados El problema

Twtitter Bootstrap installation issues


0
vote

problema

Español

En primer lugar, me gustaría decir que he buscado alto y bajo, lea múltiples tutoriales y un par de publicaciones en este sitio sobre esto y no ha ayudado, así que decidí hacer mi propio post. < / p>

Estoy tratando de auto-enseñar la administración de desarrollo web / servidor usando Twitter Bootstrap, ya que ya tengo algunos antecedentes en HTML y CSS. He instalado mi pila de lámparas y todas mis dependencias correctamente, por lo que sé.

La estructura de mi archivo se ve así:

  • / var / www /
  • / var / www / icyou /
  • / var / www / icyou / bootstrap

    -Todos los archivos creados al verificar el bootstrap, dejados intactos -

  • / var / www / icyou / site_root /

    index.html

    index.html.save

    testphp.php

Dentro de mi index.html es la plantilla predeterminada de Twitter Bootstrap, que está a continuación:

  <!DOCTYPE html> <html lang="en">   <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>Bootstrap 101 Template</title>      <!-- Bootstrap -->     <link href="css/bootstrap.min.css" rel="stylesheet">      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->     <!--[if lt IE 9]>       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>       <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>     <![endif]-->   </head>   <body>     <h1>Hello, world!</h1>      <a href="#" class="btn"> It works</a>      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>     <!-- Include all compiled plugins (below), or include individual files as needed -->     <script src="js/bootstrap.min.js"></script>   </body> </html>   

Lo único que cambié en el índice.html que no es idéntico a la plantilla es el <a href="#" class="btn"> It works</a> .

Estoy siguiendo un conjunto de tutoriales en YouTube que muestra que el botón debe tener un efecto de ratón, así como el texto en la fuente popular de Bootstrap Sans-Sarif. El mío parece crudo html.

Espero que sea algo tan simple como un problema de dependencia que desconoce. Es realmente muy frustrante, instalando todos estos paquetes. Parece que todos, aparte de mí, tienen un conocimiento innato de la dependencia de la dependencia para que nadie lo mencione.


Editar: También he intentado cambiar los caminos para completar las rutas por el momento:

  <link href="/var/www/icyou/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="/var/www/icyou/bootstrap/dist/js/bootstrap.min.js"></script>   

Original en ingles

First off, I'd like to say that I have searched high and low, read multiple tutorials and a couple posts on this site about this and it has not helped, so I've decided to make my own post.

I'm trying to self-teach web development / server administration using Twitter Bootstrap, as I already have some background in HTML and CSS. I've installed my LAMP stack and all my dependencies correctly as far as I'm aware.

My file structure looks like this:

  • /var/www/
  • /var/www/icyou/
  • /var/www/icyou/bootstrap

    -all of the files created when checking out bootstrap, left untouched-

  • /var/www/icyou/site_root/

    index.html

    index.html.save

    testphp.php

Inside of my index.html is the Twitter Bootstrap's default template, which is below:

<!DOCTYPE html> <html lang="en">   <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>Bootstrap 101 Template</title>      <!-- Bootstrap -->     <link href="css/bootstrap.min.css" rel="stylesheet">      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->     <!--[if lt IE 9]>       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>       <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>     <![endif]-->   </head>   <body>     <h1>Hello, world!</h1>      <a href="#" class="btn"> It works</a>      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>     <!-- Include all compiled plugins (below), or include individual files as needed -->     <script src="js/bootstrap.min.js"></script>   </body> </html> 

The only thing I changed in the index.html that isn't identical to the template is the <a href="#" class="btn"> It works</a>.

I am following a tutorial set on youtube that shows that the button should have at a mouse-over effect as well as the text being in the popular bootstrap sans-sarif font. Mine looks like raw HTML.

I'm hoping it's something as simple as a dependency issue I'm unaware of. It's really very frustrating, installing all these packages. It seems that everyone aside from me has an innate knowledge of dependency scoping so nobody ever mentions it.


Edit: I have also tried changing the paths to complete paths for the time being:

<link href="/var/www/icyou/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="/var/www/icyou/bootstrap/dist/js/bootstrap.min.js"></script> 
              
 
 

Lista de respuestas

2
 
vote

¿Ha revisado los permisos en la carpeta / var / www / icyou / site_root /? También es posible que desee abrir el cuadro de diálogo "Inspeccionar elemento" (si está en Chrome), seguramente dirá lo que está pasando con sus enlaces CSS

 

Have you checked the permissions on the folder /var/www/icyou/site_root/ ? Also you might want to open up the "inspect element" dialog (if you're in chrome) it will surely say what's going on with your css links

 
 
1
 
vote

Si estoy entendiendo la pregunta correctamente, no está viendo el efecto 'Hover' cuando está mouse-sobre el botón?

Bootstrap maneja varias clases en un solo elemento, por ejemplo, si iba a implementar un botón, haría algo así:

btn-primaria Asigne el color al botón BTN-MD asigna el tamaño del botón. El uso de simplemente 'BTN' te va a dar el mínimo.

Intente agregar algunos atributos de clase adicionales al botón y ver si eso ayuda.

 

If I am understanding question correctly, you are not seeing the 'hover' effect when you mouse-over the button?

Bootstrap handles multiple classes on a single element so for example if I was to implement a button I would do something like:

Btn-primary assign the color to the button Btn-md assigns the size of the button. Using simply 'btn' is going to give you the bare minimum.

Try adding a few additional class attributes to the button and see if that helps.

 
 
0
 
vote

¡Lo descubrí! Ambas respuestas fueron realmente útiles, pero el comentario estaba más cerca de lo que estaba teniendo problemas. Es lo que pensé y un tema de camino relativo. ¡Mi carpeta Bootstrap estaba en el directorio sobre mi raíz del documento Apache, y aparentemente no puede tener una ruta que va más allá del alcance de la raíz del documento!

Nueva ruta parece este <link href="/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

 

I figured it out! Both answers were really helpful, but the comment was closer to what I was having issue with. It's what I thought and a relative path issue. My bootstrap folder was in the directory above my apache document root, and apparently you cannot have a path that goes beyond the scope of the document root!

New path looks like this <link href="/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

 
 

Relacionados problema

7  ¿Cuál es el signo más antes de una función? [duplicar]  ( What is the plus sign before a function ) 
Esta pregunta ya tiene respuestas aquí : Javascript Signo más frente a la expresión de la función ...

0  Mesa de bootstrap desbordando los padres CSS  ( Bootstrap table overflowing parent css ) 
Tengo una fila de bootstrap que contiene entre otras cosas un div con una mesa dentro. Por una razón desconocida, no puedo lograr que la mesa deje de desborda...

2  Las pestañas de Bootstrap, altura izquierda  ( Bootstraps tabs left height ) 
Utilizo las pestañas de Bootstrap con tabs-left6 clase. Sin embargo, si el contenido de un lo suficientemente grande, la frontera entre el menú y el conteni...

-4  Bootstrap Carousel Slider La capacidad de respuesta no funciona  ( Bootstrap carousel slider responsiveness is not working ) 
Hola He usado Bootstrap Carousel Slider en My Slider, pero la capacidad de respuesta móvil no funciona. Aquí está mi código: <div class="mobileimage"> <...

1  Bootstrap Typeahead.js elimina el contenido de los datos existentes en el campo de formulario HTML OnLeave  ( Bootstrap typeahead js deletes content of existing data in html form field onlea ) 
Estoy usando Typeahead en un formulario que ya tiene datos. El problema es: cuando entro y luego deje el campo sin escribir nada, está vaciado por Typehead. ...

12  El menú Bootstrap desaparece después del primer clic, configurando el estilo UL para ninguno  ( Bootstrap menu disappears after first click setting the ul style to none ) 
Estoy tratando de hacer una nueva plantilla de WordPress con bootstrap. El menú desplegable no funciona correctamente. Después del segundo clic, se muestra: N...

3  ¿Cómo puedo personalizar el bootstrap sin perder los cambios?  ( How can i customise bootstrap without losing the changes ) 
Estoy usando Bower para administrar bootstrap y me gustaría hacer algunos cambios (colores, tamaño de fuente, etc.) a la apariencia de bootstrap predeterminad...

0  Crea un diseño de fluido como bootstrap  ( Create fluid layout like bootstrap ) 
Soy nuevo en HTML / CSS, así que probablemente estoy volviendo a bolsa. Estoy usando Bootstrap, pero el primer día lo usa. Estoy tratando de imitar exactament...

0  ¿Cómo crear una barra de navegación con 2 menú de colapso? [duplicar]  ( How to create a navbar with 2 collapse menu ) 
Esta pregunta ya tiene respuestas aquí : consolidate múltiple bootstrap 3 menús de navatura en colap...

0  Twitter Bootstrap - Margen izquierdo y derecho en IE  ( Twitter bootstrap left and right margin in ie ) 
Estoy usando el último bootstrap de Twitter. Estoy en una etapa temprana para diseñar mi sitio. El problema es, cuando veo el sitio en otros navegadores, ex...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos