La clase de contenedor
La clase w3-recipiente es la más importante de las clases W3.CSS.
La clase w3-contenedor se utiliza para todo tipo de elementos contenedores HTML como:
<Div>, <header>, <pie de página>, <artículo>, <section>, <blockquote>, <form>, y mucho más.
Esta cabecera es verde.
Este pie es de color rojo.
Este artículo es de color gris claro y el texto es de color marrón.
Contenedores facilite la igualdad
La clase W3-contenedor es importante para proporcionar la igualdad:
- márgenes comunes
- rellenos comunes
- alineaciones verticales comunes
- alineaciones horizontales comunes
- fuentes comunes
- Los colores más comunes
Ejemplo
<div class="w3-container">
<p>London is the most populous city in the United Kingdom.</p>
</div>
Inténtalo tú mismo " Para añadir un color, basta con añadir una clase de color w3-:
Ejemplo
<div class="w3-container w3-red">
<p>London is the most populous city in the United Kingdom.</p>
</div>
Inténtalo tú mismo " Encabezados y pies de pagina
La clase W3-contenedor puede ser utilizado con el estilo de un encabezado:
Título 1
La clase W3-contenedor puede ser utilizado con el estilo de un pie de página:
Ejemplo
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Inténtalo tú mismo " Artículos y Secciones
La clase W3-contenedor puede ser utilizado para el estilo <article> y <sección> elementos:
Ejemplo
<article class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</article>
<section class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</section>
<div class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div> Inténtalo tú mismo "  | Muchas páginas web utiliza elementos <div> en lugar de <artículo> y <sección> elementos. |
|---|
Notas, paneles y Cotizaciones
La clase W3-contenedor se puede utilizar para mostrar todo tipo de notas:
Ejemplo
<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div> Inténtalo tú mismo " La clase W3-contenedor se puede utilizar para mostrar todos los tipos de paneles:
Londres es la capital de Inglaterra. Es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 13 millones de habitantes.
Ejemplo
<div class="w3-container w3-light-grey w3-border">
<p>London is the
most populous city in the United Kingdom,
with a metropolitan area
of over 13 million inhabitants.</p>
</div> Inténtalo tú mismo " La clase W3-contenedor se puede utilizar para mostrar todo tipo de citas:
Ejemplo
<div class="w3-container w3-leftbar w3-light-grey">
<p><i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</div>
Inténtalo tú mismo " Ir al capítulo W3.CSS fronteras para aprender más sobre las notas que muestran, los paneles y cotizaciones.
combinaciones
Encabezamiento
Un coche es un vehículo de motor con ruedas, con alimentación propia para el transporte. La mayoría de las definiciones del término especifican que los coches están diseñados para funcionar principalmente en las carreteras. (Wikipedia)
Ejemplo de uso de HTML elementos <div>
<div class="w3-container w3-red">
<h1>Header</h1>
</div>
<img src="img_car.jpg" alt="Car" style="width:100%">
<div
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</div>
<div class="w3-container
w3-red">
<h5>Footer</h5>
</div> Inténtalo tú mismo " Ejemplo de uso de elementos semánticos del HTML
<header class="w3-container w3-red">
<h1>Header</h1>
</header>
<img src="img_car.jpg" alt="Car" style="width:100%">
<article
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</article>
<footer class="w3-container
w3-red">
<h5>Footer</h5>
</footer> Inténtalo tú mismo " Relleno de contenedores
La claseW3-contenedor tiene una 16px por defecto a la izquierda y relleno derecho, y sin parte superior o inferior de relleno:
Ejemplo
<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>
Inténtalo tú mismo " Normalmente, usted no tendrá que cambiar el relleno por defecto de un contenedor, porque párrafos y partida se márgenes que simularán el acolchado.
Estoy rúbrica 1
Soy un párrafo.
Ejemplo
<div class="w3-container w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
Inténtalo tú mismo " contenedor de seccionamiento
La claseW3-contenedor tiene ninguna parte superior predeterminado o el margen inferior.
Dos contenedores se mostrarán wothout un margen entre ellos:
Estoy rúbrica 1
Soy un párrafo.
Estoy rúbrica 1
Soy un párrafo.
La clasede sección w3 se puede utilizar para separar los contenedores.Tiene 16px superior y margen inferior:
Estoy rúbrica 1
Soy un párrafo.
Estoy rúbrica 1
Soy un párrafo.
Ejemplo
<div class="w3-container w3-section w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
<div class="w3-container w3-section
w3-green">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
Inténtalo tú mismo " Ocultación de Contenedores (cierre)
Ocultando o el cierre de un contenedor es fácil:
Para cerrar este contenedor, haga clic en la X en la esquina superior derecha.
Ejemplo
<div class="w3-container w3-red">
<span class="w3-closebtn" onclick="this.parentElement.style.display='none'">X</span>
<p>To close this container, click on the X in the upper right corner.</p>
</div>
Inténtalo tú mismo " Contenedores de apertura
La apertura de recipientes cerrados es fácil:
Ejemplo
<div id="id01"class="w3-container w3-margin-top w3-green" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn">X</span>
<p>London is the capital city of
England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
Inténtalo tú mismo "