Creando La Página WEB Con Bootstrap

PÁGINA CON BOOTSTRAP
1.- Descarga la aplicación bootstrap, graba los archivos en una carpeta aparte.
Página WEB bootstrap
https://getbootstrap.com/docs/4.0/getting-started/download/
Clic en el botón DOWNLOAD
CLIC EN DESCARGAR
Al descomprimir los archivos tendrás algo como esto:

2. Inicia el programa sublime text.
- Abra un documento nuevo, cambie el tipo por HTML y grábalo con el nombre de
plantilla.html.
- Escriba: html:5 y luego presione la tecla de tabulador.
- Aparecerá el código HTML básico
Nota
Para saber más acerca de la instalación de los paquetes html para sublime text
visita:
https://franyerverjel.com/blog/como-instalar-plugins-en-sublime-text/
2. Cambia los datos básicos

- <title>Plantilla página web</title>
- <html lang="es">
3. Pega el código de los estilos que utilizaras en la web y los que se utilizaran localmente,
después de la etiqueta <meta charset="UTF-8">.


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">

<link rel="stylesheet" type="text/css" href="./css/estilos.css">
4. Crea la hoja de estilos.
- Haz un archivo nuevo.
- Cambia el tipo de archivo por CSS.
- Graba el archivo con el nombre de: estilos.css
- Escribe el siguiente código:
body {
padding: 2px;
background-color: yellow;
}
Los navegadores modernos soportan 140 colores con nombre, que se enumeran a
continuación. Úsalos en el código HTML y CSS por nombre, código Hex o el valor RGB.
https://htmlcolorcodes.com/es/nombres-de-los-colores/
5. Escribe el código, para que bootstrap se adapte a los dispositivos móviles:


<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6. Escriba después de body lo siguiente:
- div.
- Presione la tecla de tabulador.
- Escriba el siguiente código.


<div class="wrapper">
</div>
- En el archivo estilos.css escribe el siguiente código.
.wrapper {
display: flex;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 2px;
flex: 1 100%;
}
7. Para la cabecera utilice este código en la página.

<header class="header">Header</header>
El código CSS para la Cabecera es el siguiente:
.header {
background: tomato;
}
8. Para poner un menú copie y pegue el código HTML:


<menu class="menu">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">Carousel</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-
controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</menu>
Y el código CSS es el siguiente
.menu{
background: deepskyblue;
padding: 0px;
margin: 0px;
}
9. Código Para publicar contenido en la Página HTML y el pie.

<article class="main">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</article>
<aside class="aside aside-1">Aside 1</aside>
<aside class="aside aside-2">Aside 2</aside>
<footer class="footer">Footer</footer>
Este es el código CSS faltante.
.footer {
background: lightgreen;
}
.main {
text-align: left;
background: deepskyblue;
}
.aside-1 {
background: gold;
}
.aside-2 {
background: hotpink;
}
10. Para terminar incluir este código en la hoja de estios.css, esto permitirá que se
visualice las secciones según el tamaño de la venta o dispositivo.
@media all and (min-width: 600px) {

.aside { flex: 1 auto; }
}
@media all and (min-width: 800px) {

.main { flex: 3 0px; }
.menu { order: 2;}
.aside-1 { order: 3; }
.main { order: 4; }
.aside-2 { order: 5; }
.footer { order: 6; }
}

Creando La Página WEB Con Bootstrap

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Creando La Página WEB Con Bootstrap

Încărcat de

Drepturi de autor:

Formate disponibile

PÁGINA CON BOOTSTRAP

Página WEB bootstrap

Clic en el botón DOWNLOAD

Al descomprimir los archivos tendrás algo como esto:

2. Cambia los datos básicos

5. Escribe el código, para que bootstrap se adapte a los dispositivos móviles:

6. Escriba después de body lo siguiente:

- En el archivo estilos.css escribe el siguiente código.

El código CSS para la Cabecera es el siguiente:

8. Para poner un menú copie y pegue el código HTML:

Y el código CSS es el siguiente

Este es el código CSS faltante.

@media all and (min-width: 600px) {

@media all and (min-width: 800px) {

S-ar putea să vă placă și