¿Hay alguna manera de crear un sitio web con HTML CSS bootstrap en dos idiomas?

Sí tu puedes.

Todo realmente depende de qué tan grande es el sitio. Si es un sitio de una página o menos de 20 páginas, es muy diferente a un sitio corporativo gigante. Asumiré que son menos de 20 páginas. Además, si se trata de varios idiomas, las cosas pueden ponerse feas: las soluciones pueden funcionar, pero el código comienza a ser un desastre.

Supongamos que desea mostrar el idioma preferido de los visitantes de forma predeterminada, pero le da la opción de verlo en el otro idioma. Esto requiere leer el encabezado del navegador Detectar la preferencia de idioma del navegador con el encabezado Aceptar – mobiForge. Esto se puede hacer con un redireccionamiento de Apache; consulte la sección de contenido dependiente del navegador aquí: Redireccionamiento y reasignación con mod_rewrite en lugar del agente de usuario en el ejemplo, use HTTP_ACCEPT_LANGUAGE. Una vez hecho esto, hay un par de formas de tratar con las páginas a las que está redirigiendo.

También puede usar php para leer HTTP_ACCEPT_LANGUAGE y redirigir. Y / o puede usar javascript para leer la URL y cambiar el idioma para que coincida (consulte el número 2).

A menos que esté contento de confiar en Google Translate para transmitir perfectamente el mensaje de su marca, tendrá que escribir una copia en los idiomas que va a mostrar. Este es un dolor en el culo para manejar, no importa cómo lo hagas.

Las dos soluciones “feas” de Joni Giuro son en realidad formas viables de tratar con los datos del lenguaje. Miremos esos y exploremos un poco más.

  1. Tener páginas separadas e idénticas con diferentes idiomas humanos que hacen referencia a la misma hoja de estilo. Esto sería un poco complicado ya que cada edición de código html tendría que realizarse dos veces. Puede tener las páginas en dos subdirectorios diferentes, lo que requiere el código de redireccionamiento mínimo (simplemente cambiando el directorio de destino).
  2. Poner ambos idiomas en el html y usar la visibilidad para controlar lo que se ve. Esta es una solución extremadamente viable que no tiene que ser un desastre total si organiza e indenta bien su código. Una de las ventajas de esto es que si alguien bloquea CSS por alguna razón, verá ambos idiomas. Además, si un bot analiza la página, leerá ambos idiomas (pero eso no es muy diferente de que un bot lea ambos conjuntos de páginas separadas).

    Bootstrap usa javascript y menos. Puede administrar la visibilidad de uno u otro texto (o inyectarlo desde su código de JavaScript, ¡qué asco!) Utilizando técnicas de manipulación DOM de javascripts. JavaScript DOM HTML.

    Javascript tiene problemas para acceder a HTTP_ACCEPT_LANGUAGE de alguna manera útil para este propósito. Pero hay maneras de hacer que esto funcione que sería relativamente fácil.

    Aquí está lo más simple desde una perspectiva total de código:

    Ponga los archivos de su sitio en un subdirectorio. SSL en su servidor y cree enlaces simbólicos a ese subdirectorio donde se almacenan sus archivos que indican sus idiomas.

    Algo como esto:

ln -s / var / www / yourhtml / var / www / es
ln -s / var / www / yourhtml / var / www / it

Use su servidor web para leer HTTP_ACCEPT_LANGUAGE y redirigir a estos “subdirectorios diferentes” de acuerdo con el valor de idioma que proporciona.

Ahora puede usar la ventana window.location.href de Javascript para obtener su URL y usarla en condicionales para identificar de manera confiable el idioma preferido.

url_string = window.location.href;
if (url_string = “https://fiddle.jshell.net/_display/”) {
document.getElementById (“page-wrapper”). className = “italiano”;
}

Aquí hay un ejemplo usando el código de Joni:

Editar violín – JSFiddle

Me he quedado sin tiempo. ¡Espero que esto ayude!

¡¡¡Buena suerte!!!

Puede hacerlo, pero deberá crear todos los sitios dos veces, uno para cada idioma.

Por lo general, la localización se realiza en el lado del servidor, lo que significa que debe usar un lenguaje de programación de fondo como python, ruby, java, php, …

Hay muchos marcos que hacen este tipo de cosas, pero no será sencillo.

Otro enfoque (feo) sería tener ambos idiomas en su código html y luego ocultar uno u otro idioma de acuerdo con una clase de cuerpo.

Ejemplo (comparten el mismo código, solo cambia la clase en el contenedor):

  • inglés: Editar violín – JSFiddle
  • italiano: Editar violín – JSFiddle

HTML y CSS son dos idiomas. Sin embargo, su sitio probablemente se construirá en PHP o Ruby, con HTML para definir el contenido y CSS para controlar el estilo y los elementos visuales. Bootstrap es solo un archivo CSS preconstruido para darle un comienzo en el diseño de su sitio.

Comience a aprender aquí: HTML y CSS