Bootstrap4 Tutoriales básicos

Bootstrap4 Tutoriales

Bootstrap es la biblioteca de componentes front-end más popular a nivel mundial, utilizada para desarrollar proyectos de WEB que priorizan la adaptabilidad a dispositivos móviles.

Bootstrap4 Esta es la versión más reciente de Bootstrap, una colección de herramientas de código abierto para el desarrollo de HTML, CSS y JS. Utilizando nuestras variables Sass, una gran cantidad de mixins, un sistema de rejilla responsive, componentes predefinidos extensibles y un sistema de plugins potente basado en jQuery, puedes desarrollar rápidamente prototipos o construir aplicaciones enteras.

¿Quién es adecuado para leer este tutorial?

Si tienes conocimientos básicos de HTML y CSS, puedes leer este tutorial y desarrollar tu propio sitio web. Después de completar este tutorial, alcanzarás un nivel intermedio en el uso de Bootstrap para desarrollar proyectos web.

Conocimientos necesarios antes de leer este tutorial:

Antes de comenzar a leer este tutorial, debes tener conocimientos básicos de HTML, CSS y JavaScript. Si aún no estás familiarizado con estos conceptos, te recomendamos que leas nuestros siguientes tutoriales:

Bootstrap4 Ejemplo

Ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap4　实例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
　　<h1>Mi primera página de Bootstrap</h1>
　　<p>¡Ajusta el tamaño del navegador para ver los efectos! inaugu/p>　
</div>
　
<div class="container">
　　<div class="row">
　　　　<div class="col-sm-4">
　　　　　　<h3>Primera columna</h3>
　　　　　　<p>Manual básico</p>
　　　　　　<p>Estudiar los fundamentos, ¡solo así puedes avanzar más lejos!!!</p>/p>
　　　　</div>
　　　　<div class="col-sm-4">
　　　　　　<h3>Segunda columna</h3>
　　　　　　<p>Manual básico..</p>
　　　　　　<p>Estudiar los fundamentos, ¡solo así puedes avanzar más lejos!!!</p>/p>
　　　　</div>
　　　　<div class="col-sm-4">
　　　　　　<h3>Tercera columna</h3>　
　　　　　　<p>Manual básico..</p>
　　　　　　<p>Estudiar los fundamentos, ¡solo así puedes avanzar más lejos!!!</p>/p>
　　　　</div>
　　</div>
</div>
</body>
</html>

Prueba y ve‹/›

Bootstrap4 　con Bootstrap3

Bootstrap4 es la última versión de Bootstrap, compatible con Bootstrap3 Tiene más clases específicas y ha convertido algunas partes relacionadas en componentes relevantes. Al mismo tiempo, el volumen de Bootstrap.min.css se ha reducido4más del 0%.

Bootstrap4 ha renunciado al soporte para IE8 y iOS 6 soporte, ahora solo admite IE9 y iOS 7 versiones de navegador. Si necesitas usar navegadores anteriores, por favor usa Bootstrap3.

Nota: Por defecto, Bootstrap 4Utilizará el método de prioridad móvil para la respuesta. Bootstrap 4.3es la versión más reciente y más estable de Bootstrap. Todos los principales navegadores modernos admiten Bootstrap 4por ejemplo, Google Chrome, Firefox, Safari, Internet Explorer 10y versiones más recientes, etc.

Bootstrap4 Instalación y uso