Barra de navegación estática
Aplica la clase .navbar-static-top para crear una barra de navegación que ocupa toda la anchura del elemento en el que se encuentra, pero que a diferencia de las clases .navbar-fixed-*, sí que desaparece al hacer scroll en la página. Aquí el ejemplo del código en HTML para su elaboración para sus sitios web.
<div class="container">
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target=".navbar-ex6-collapse">
<span class="sr-only"><i class="fa fa-bars"></i></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logotipo</a>
</div>
<div class="navbar-collapse navbar-ex6-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><i class="fa fa-home"></i>
Principal</a></li>
<li><a href="#"><i class="fa fa-user"></i>Contacto</a></li>
<li><a href="#"><i class="fa fa-folder-o"></i>Proyecto</a></li>
<li><a href="#"><i class="fa fa-cog"></i>Ajustes</a></li>
<li><a href="#"><i class="fa fa-table"></i>Tablas</a></li>
</ul>
</div>
</nav>
</div>
Barra de navegacion (Codigo css)
Aquí el ejemplo del código Codigo css para su elaboración para sus sitios web
Fontawesome
Es una gran fuente basada en íconos que se empareja muy a menudo con proyectos web basados en Bootstrap. Tiene una biblioteca de 605 íconos, más grande que los 200 glifos nativos de Bootstrap 3, y también puede desbloquear características únicas como íconos volteados, apilados o girados (y mucho más). ¿No sabes cómo configurar Font Awesome? Consulte la guía de inicio oficial, o simplemente incluya esta línea en su etiqueta <head> tag:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Libreria Bootstrap 3 del plugin collapse de javascrip
La barra de navegación responsive requiere el uso del plugin collapse de JavaScript incluido en Bootstrap 3,Bootstrap es un conjunto de herramientas de código abierto para desarrollar con HTML, CSS y JS. Realice rápidamente un prototipo de sus ideas o construya su aplicación completa con nuestras variables y mixins de Sass, sistema de cuadrícula sensible, extensos componentes precompilados y potentes complementos creados en jQuer.Copia y pega esa etiqueta en tu archivo HTML <link href=//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css rel="stylesheet">
Libreria jQuery de JavaScript
Para usar el CDN de jQuery, simplemente haga referencia al archivo en la etiqueta de script directamente desde el dominio de CDN de jQuery. Puede obtener la etiqueta de secuencia de comandos completa, incluido el atributo Integridad de sub-recurso, visitando https://code.jquery.com y haciendo clic en la versión del archivo que desea usar. Copia y pega esa etiqueta en tu archivo HTML, <link href="//code.jquery.com/jquery-3.4.1.min.js" rel="stylesheet">.
Viewport una etiqueta imprescindible para el diseño responseve
Viewport es la etiqueta que mejor representa la web en movilidad, ya que nos permite indicar cómo se verá un proyecto web en los dispositivos móviles. Apple la creó para decirle al iPhone como debería renderizar el documento, convirtiéndose desde entonces en un estándar que ya está soportado por la mayoría de dispositivos.
Como definición rápida, diremos que viewport podría traducirse como vista o ventana y nos sirve para definir qué área de pantalla está disponible al renderizar un documento, nivel de escalado y el zoom que debe mostrar inicialmente. Todo ello, con parámetros que le damos a la propia etiqueta META.
Entender Viewport Se trata de un concepto bastante sencillo, ya que corresponde con el área que está disponible en la pantalla del navegador, o lo que es lo mismo, el viewport es el área útil donde se mostrará la página web. Cuando accedemos a una página optimizada para ordenadores de escritorio y que no tiene definida ninguna etiqueta viewport, las páginas suelen mostrar contenidos reducidos para conseguir que se ajusten al espacio de la ventana del navegador.
Bien, pues el viewport está realizando una emulación en pixels para que se muestre la pantalla completa en un área inferior al ancho que tiene el dispositivo, algo que resulta totalmente necesario si queremos que nuestra página se vea correctamente en dispositivos de movilidad. copia y pega esta etiqueta en tu archivo HTML <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0"> <
Barra de navegación (navbar)
Las barras de navegación son componentes adaptados al diseño web responsive y que se utilizan como elemento principal de navegación tanto en las aplicaciones como en los sitios web.En los dispositivos móviles se muestran inicialmente minimizadas y al pulsar sobre ellas, se despliegan todas sus opciones. Si la anchura del dispositivo aumenta hasta un nivel suficiente, las barras de navegación muestran todos sus contenidos horizontalmente. La barra de navegación normal. Ejemplo:
Así se ve navbar en tu navegador cuando el dispositivo es grande:
Así se ve navbar en tu navegador cuan es pequeño
Barra de navegacion statica con Temas
Cities & Maiki le muestra ejemplos sensillos de temas personalizados para su elaboración para sus sitios web con una personalización adatables para Desarrollo webs con diseño de materiales adaptables para dispositivos moviles, webs corporativas, marketing. Empesamos con ( tem-white-nav ) tema blanco para personalizar el fondo Blanco acompañado con ( tem-white-font ) que prsonaliza las fonts de color oscuro que por lo normal es el tema por defecto
Temas personalizados
/*
*
* Temas para na-vb-ar
*
*/
/*=== tem-white-nav ====*/
.tem-white-nav {
background: #f5f5f5;
}
.navbar-defa-ult .nav-bar-nav .link-it .tem-white-font {
color: #232323;
}
.navbar-defa-ult .nav-bar-bra-nd.tem-white-font {
color: #232323;
}
/*=== Fin de tem-white-nav ====*/
/*=== tem-dark-nav ====*/
.tem-dark-nav {
background: #232323;
}
.navbar-defa-ult .nav-bar-nav .link-it .tem-dark-font {
color: #666;
}
.navbar-defa-ult .nav-bar-bra-nd.tem-dark-font {
color: #666;
}
/*=== Fin de tem-grey-nav ====*/
/*=== tem-grey-nav ====*/
.tem-grey-nav {
background: rgb(158, 158, 158);
}
.navbar-defa-ult .nav-bar-nav .link-it .tem-grey-font {
color: #f5f5f5;
}
.navbar-defa-ult .nav-bar-bra-nd.tem-grey-font {
color: #f5f5f5;
}
/*=== Fin de tem-grey-nav ====*/
/*=== tem-ligth-blue-nav ====*/
.tem-ligth-blue-nav {
background: rgb(1, 87, 155);
}
.navbar-defa-ult .nav-bar-nav .link-it .tem-ligth-blue-font {
color: #f5f5f5;
}
.navbar-defa-ult .nav-bar-bra-nd.tem-ligth-blue-font {
color: #f5f5f5;
}
/*=== Fin de tem-ligth-blue-nav ====*/
/*=== tem-blue-gray-nav ====*/
.tem-blue-gray-nav {
background: rgb(55, 71, 79);
}
.navbar-defa-ult .nav-bar-nav .link-it .tem-blue-gray-font {
color: #f5f5f5;
}
.navbar-defa-ult .nav-bar-bra-nd.tem-blue-gray-font {
color: #f5f5f5;
}
/*=== Fin de tem-blue-gray-nav ====*/
/*
*
* Fin Temas para na-vb-ar
*
*/
Temas para barra de navegacion estatica
Estamos en un mundo de de tecnologia que se esta actualizando asi mismo como el desarrodo web y cualquier persona con interés por el mundo digital necesita contar con una página web, tanto para su marca personal como para ofrecer sus servicios o su negocio. Visto este aumento del nicho de mercado interesado en contar con un propio sitio web, se han creado numerosas plataformas que prometen una web maravillosa.
El problema es que esto no es tan cierto como parece y realmente es necesario contar con un mínimo de conocimientos sobre diseño. Por ejemplo, ¿sabes cómo combinar colores web? Puedes ser un hacha en programación, pero no tener ni un ápice de estilo estético. Crear una web requiere jugar con las tonalidades, los matices y los colores complementarios.
Pero no te preocupes, Cities & Maiki te ofreze todas las claves de estilos para combinar los colores de forma correcta y te muestra una serie de generadores y de tablas de colores como colores de diseño plano, diseño de materiales, colores bew seguros y gamas de color. Tabla de colores
