02-sitio web con php y mysql

Seguidamente vamos a crear un menu de navegacion

Entonces entre las etiquetas body , arrida de todo, tecleamos el seguiente:

bs5 y si tienes la extension de bootstrap5 instalado, te saldra un desplegable con las diversas opciones de diseno

...

escoguemos la seguinte: bs5-navbar-minimal-ul y le damos enter, se nso desplaguera el seguiente codigo:

<nav class="navbar navbar-expand navbar-light bg-light">
<ul class="nav navbar-nav">
    <li class="nav-item">
        <a class="nav-link active" href="#" aria-current="page"
        >Nav 1 <span class="visually-hidden">(current)
        </span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Nav 2</a>
    </li>
</ul>
</nav>
    

---

Esto es nuestra barra de navegacion, nos sirvira para movernos entre las diferentes paginas del proyecto.

Modificando la aparencia del navbar

Para modificar un poco la aparencia del navbar, le vamos a quitar el link active para que ese eenlace see muestre ejactamente como los demas

Ademas vamos a acrecentar dos en laces mas, uno de libros que es onde va a mostrar los libros, ya que esta web va a tratar de venta de libros

y un apartado para ablar de nosotros, ond pondremos informacion sobre nosotros.

quedando de esta forma el codigo

<nav class="navbar navbar-expand navbar-light bg-light">
<ul class="nav navbar-nav">
    <li class="nav-item">
        <a class="nav-link " href="#" >FrioyElectronica</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Inicio</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Libros</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Nosotros</a>
    </li>
 </ul>
</nav>
    

---

El Contenedor "Container"

despues de creado el menu, vamos a necessitar de un contenedor onde pondremos lo que queramos manejar

Asi que por debajo del navbar pondremos el seguiente codigo:

<div class="container">
<div class="row">

    //Aqui va el contenido de la pagina        
</div>
</div>
    

---

Cuerpo del documento

adentro de nuestro container y nuestra linea <div class="row"> vamos a poner a titulo de ejemplo un elemento de bootstrap que se llama jumbotran

Esta parte servira para poner una bienvenida o cualquier otra cosa que se nos ocurra

Como tenemos la extencion de bootstrap, para crear este elemento basta con que teclemos el seguinte:

bs5-jumbotron-default y se nos creara este codigo:

<div class="row align-items-md-stretch">
<div class="col-md-6">
    <div
        class="h-100 p-5 text-white bg-primary border rounded-3">
        <h2>Change the background</h2>
        <p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then,
            mix and match with additional component themes and more.</p>
        <button class="btn btn-outline-primary" type="button">Example button</button>
    </div>
</div>
<div class="col-md-6">
    <div
        class="h-100 p-5 bg-primary border rounded-3">
        <h2>Add borders</h2>
        <p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure
            to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both
            column's content for equal-height.</p>
        <button class="btn Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then,
            mix and match with additional component themes and more." type="button">Example button</button>
    </div>
</div>
</div>

---

Footer

Al final de la pagina,pero despues de la etiqueta body creamos nuestro footer o dicho de otra forma pie de pagina

El codigo es el seguiente:

<div class="alerta-oscura footer">
<p>Pagina creada por Frioyelectronica.blogspot.com </p>
<p>Copyright derechos reservados 2022</p>
</div>

---

---