Bienvenidos a algunos de nosotros, video, obtuvimos la configuración de la aplicación de blog creada en nuestro modelo de blog y agregamos la
plantilla de índice en este video.
En realidad, no agregaremos nuevas rutas por el momento.
Esto será muy rápido, pero queremos agregar nuestro encabezado y pie de página Parshall's.
Y luego quiero incluir UI semántica también.
Y finalmente, agregaremos una barra de navegación realmente simple en la parte superior.
Así que empecemos, queremos crear nuestro encabezado y pie de página que Ejay como archivos.
Y eso debería estar adentro si se visualizan los directorios.
Así que haremos un directorio de make use slash Las vistas táctiles de Parshall cortan la barra de Parshall Hetter que nos usa y
luego tocan las vistas para cortar el pie de página E. J. Estupendo.
Ahora vamos a abrirlos.
Comencemos con encabezado.
Y por qué el esqueleto básico no era tan HD como un título de cabeza de metal.
Lo llamaremos aplicación de blog y luego necesitamos nuestro cuerpo así y lo trasladaremos al pie
de página para que podamos cortarlo de vez en cuando solo para que sepamos que está funcionando.
vemos que en cada página sabrá que lo hicimos correctamente.
Agreguemos solo un párrafo en la parte superior que dice desde el archivo de encabezado y si
Ahora vamos a abrir el pie de página pegar esto y podemos hacer lo
mismo desde el ahorro de pie de página.
Ahora tenemos que vincular esto y hagámoslo en nuestro índice para comenzar.
Entonces, en la parte superior necesitamos tener nuestra inclusión y nuestra ruta es que estamos en lugar de utilizarla en el archivo de índice.
Así que solo queremos un punto de corte en el encabezado de barra de Parshall.
Y luego, lo mismo aquí abajo, el ataque de Parshall.
Vamos a probarlo, no hay problema hasta ahora y nos sale del archivo de encabezado desde el pie o cinco.
Estupendo.
Ahora agreguemos en la UI semántica.
Así que tengo este sitio web de IU semántica semántica abierta Dasch you dot com.
Y al igual que el arranque, podemos descargar los archivos o podemos incluir un CDN semántico de CDN.
Simplemente haga clic en este primer ejemplo y verá que
hay muchos archivos diferentes que podemos elegir.
de arranque, si lo
que quieres es una sección o solo quieres los formularios, puedes tomar esa barra de componentes de componente único que nos forma.
Y eso es porque la manera en que se organiza la interfaz de usuario semántica de la forma en que está diseñada es que, a diferencia de la rutina
SS Así que no necesitas todo, lo
que es una de las críticas de bootstrap es que si solo quieres una pieza pequeña, tienes que llevar toda la biblioteca.
Pero queremos toda la biblioteca.
Entonces, si te desplazas
hacia abajo en todos estos modismos, quieres uno que diga semántica, CDN, que si solo haces una búsqueda o
semántica, reevalúa cuál está justo aquí, es difícil de encontrar si no sabes o estás buscando, pero solo haz una búsqueda.
En realidad, no tome una versión fied en minutos para hacer las cosas más rápido.
Entonces, es semántico que los hombres vean evaluar y
copiamos que Erl pasó y lo vamos a poner arriba en nuestro archivo de cabecera dentro de la cabeza.
Es una etiqueta de longitud.
Y queremos que sea un enlace y, a continuación, ref igual que allí.
Sí Sí.
Y también deberíamos agregar que en el estilo de hoja de estilo rel es igual a la barra de texto.
C Ss Así que ahora guardamos y reiniciamos el servidor nuevamente.
igual que cuando instalamos por primera vez la fuente, la fuente cambia un poco.
Eche un vistazo a nuestra página de inicio y verá algunos pequeños cambios al
DE ACUERDO.
Eso
significa que lo tenemos funcionando, deshagamos nuestros párrafos en el encabezado y el pie de página y, en su lugar, agreguemos una barra de navegación simple en la cola.
Ahora, por supuesto, se llaman menús.
Si vamos aquí, haga clic en
el menú de todos los componentes y queremos encontrar el menú que se encuentra debajo del menú de la colección.
Puede ver que hay bastantes tipos diferentes de menús.
Hay un menú que es lo que ves aquí.
Hay un menú de Poynting, hay una maginación vertical de texto tabular.
Y hay bastantes más todo lo que necesitamos, sin embargo, es hacer que la
parte superior de nuestro cuerpo sea un div y logremos esto correctamente.
Kate hace clases iguales a ti.
Lo arreglé y haremos un menú invertido que simplemente cambia el color al igual que en bootstrapped.
Podrías decir en verso y luego dentro de allí necesitamos otro div.
Y este tendrá una clase igual a tu contenedor que es como un contenedor bootstrapped.
Y luego, en lugar de allí, tendré otro div y este tendrá una clase igual al elemento de Hetter.
Y esto es como la marca de barra de navegación en bootstrap.
Así que todo lo que queremos es blog de niños o lo que sea que queremos que se llame nuestra aplicación.
Y luego agregaremos una etiqueta de anclaje para la página de inicio y la
llamaremos "home" y agregaremos en clase el mismo elemento y luego haremos lo mismo, excepto que en lugar de ir a "barrer" lo haremos ir
a los registros de barra de barras nueva que todavía no existe y se abrirá en Nueva publicación o Nuevo blog.
Ese será el texto que vemos.
OK para que no esté arreglado el menú invertido.
Un contenedor en lugar de eso.
Y luego, dentro del contenedor, deberíamos tener todo este pequeño error de mi parte.
Entonces queremos que eso esté allí también.
Está todo en el contenedor.
Y luego tenemos nuestro encabezado y luego tenemos dos elementos anclados en Tex.
Echemos un vistazo a eso ahora.
Y obtenemos nuestra simple barra de matemática.
Sí, tenemos un problema aquí con un poco de espacio.
Lo solucionaremos en solo un momento, pero ahora tenemos un lugar donde funciona bien.
Agreguemos un ícono simple que en semántica se le acaba de llamar iconos.
Hay un montón de ellos en el que utilicé.
Se llama Código.
Intenta encontrarlo aquí y simplemente haz una búsqueda.
Ahí está.
Pero siéntase libre de elegir su propio comentario si le gusta.
La idea era que era un blog basado en código, pero podría haber algo más.
También me gusta la idea.
De todos modos, hay un montón de ellos.
Lo que es bueno es que también tienen un grupo de iconos para las empresas que es útil.
En el fondo creo que los tienen y vamos a toneladas de diferentes marcas
y compañías comunes a las que se habría vinculado en su aplicación.
DE ACUERDO.
Así que es un nombre de código para el ícono y lo voy a agregar aquí, junto al encabezado del blog.
Así que aquí tenía su artículo y todo lo que necesitamos es una etiqueta de ojo.
Y necesita tener una clase de código y un ícono.
Tan simple como el nombre del icono y
luego el ícono de clase, guarde la actualización y tenemos un pequeño código.
Voy para allá.
Hagamos un pequeño cambio para que este icono sea un poco más grande.
Para hacer eso, podríamos simplemente escribir una etiqueta
de estilo aquí, pero en lugar de hacerlo, usemos el directorio público que configuramos.
Todavía tenemos que hacer el directorio.
Pero establecemos el hecho de que se está sirviendo.
Así que haremos slash de hojas de estilo y lo llamaremos apt C Ss aún no existe.
Entonces, debemos hacer un directorio público y luego crear hojas de estilo
de barra diagonales públicas y finalmente tocar las hojas de estilo de barra diagonal Dotsie SS, que también queremos abrir para que
las hojas de estilo públicas Aptos, la ficha SS complete definitivamente sea su amigo allí.
Y para hacer todos los iconos un poco más grandes.
específico, configuraremos los BEEM IEM de tamaño de
fuente igual al doble del tamaño del contenedor o el tamaño doble del guardado primario.
Bueno, en realidad, en lugar de todos los íconos y iconos stewe que tienen esa clase de ícono solo para ser un poco más
Bien, ahora comenzamos la copia de seguridad del servidor y actualizamos la página.
Deberíamos ver que el ícono aumenta, que es solo una cuestión de preferencia personal.
Pero creo que se ve un poco mejor cuando es más grande.
DE ACUERDO.
Ahora que lo hemos hecho, hemos terminado con todo lo que teníamos que hacer en este video.
nuestro propio archivo CSSA personalizado a pesar de que es solo una línea
ahora podemos agregar fácilmente CSSA personalizado a cada archivo en cada plantilla y quería mostrarle cómo podemos incluir UI semántica.
Así que solo quería configurar la barra de navegación agregada en los archivos de encabezado de pie de página agregar en
De acuerdo, tomaremos el siguiente video con nuevo y crearemos para que podamos crear nuevos blogs.