Diseñar páginas web basadas en Boostrap y Vue
Boostrap:
Vue.js:
Primero, empiezo con un prototipo de la página web que quiero dibujar. Debido a que se trata de la página de inicio de una empresa, la función más importante es presentar los negocios de la empresa y algunas novedades, y luego realizar el diseño preliminar. Una vez completado el diseño inicial, mi prototipo es aproximadamente:
Luego puedo comenzar a intentar implementarlo usando el tutorial de boostrap y Vue.js.
1. Primero, introducimos boostrap y Vue en lt;headgt;
.js, y no cambiamos el orden:
2. Carreras de caballos de el texto superior Efecto de luz:
Luego, en el estilo CSS, establezca el flotador de la noticia y el ancho de la noticia. ancho:
Finalmente, escriba la implementación del marco en js, use un temporizador para desplazarse regularmente y determine si la información copiada llega al lado izquierdo del cuadro para realizar un bucle infinito.
3. Barra de navegación
A continuación, usamos boostrap para implementar la barra de navegación, que generalmente se encuentra en la parte superior de la página.
Podemos usar la clase navbar para crear una barra de navegación estándar y luego usar: navbar-expand-xl|lg|md|sm clase para crear una barra de navegación responsiva (expandir horizontalmente para pantallas grandes, verticalmente para pantallas pequeñas) pila). Puede crear una opción de barra de navegación usando el elemento Puedes usar bg-dark y navbar-dark para darle estilo a la barra de navegación. Establezca el estilo de navegación: Entre ellos, la clase navbar-brand se usa para mostrar el logotipo de la marca. Si usa una imagen, puede usar la clase navbar-brand para configurar la imagen a la que se adapta. la barra de navegación: Efecto como se muestra en la imagen: 4. Gire la imagen: Doblar El efecto es como se muestra en la imagen: 7. Grupo de lista de enlaces El efecto es el siguiente: 8. Finalmente agregue un final de página y luego complete una página de empresa: El efecto es el siguiente. p> El efecto al final de la página es como se muestra en la figura: Finalmente, se realiza toda la página web: [Error en la carga de la imagen... (imagen- 6307a3-1628321072949)] 1. Boosttrap y vue.js proporcionan componentes ricos y fáciles de implementar, sobre los cuales vale la pena aprender más. 2. Vue.js todavía necesita un estudio en profundidad, aquí solo se usa un poco.