Bootstrap es un marco de front-end HTML, CSS y JS que se utiliza para desarrollar proyectos receptivos y móviles en la web. Es el marco que presenta términos predefinidos, lo que le brinda la posibilidad de usar estos códigos en lugar de tener que crear los códigos desde cero. Es una colección de código HTML, CSS y JS que está diseñado para ayudar a construir componentes de interfaz de usuario. Tiene varias versiones, la última es la 4.4.1 lanzada el 28 de noviembre de 2019.
Bootstrap es fácil de usar, ya sea que lo descarguemos del sitio web oficial usando este enlace o simplemente podemos copiar el código escrito del sitio web oficial proporcionado de forma gratuita.
Bootstrap CDN es la red pública de entrega de contenido que permite a los usuarios cargar CSS o js e imágenes de forma remota desde su servidor. Bootstrap CDN contiene las siguientes características:
- Fácil de usar con conocimientos básicos del HTML, podemos empezar a utilizar Bootstrap.
- Integración simple: Bootstrap se puede integrar fácilmente junto con otras plataformas y marcos distintos, en sitios existentes y nuevos también y una cosa más, también puede utilizar elementos particulares de Bootstrap junto con su CSS actual.
- Gran sistema de cuadrícula: Bootstrap se basa en cuadrículas, diseños y componentes receptivos de 12 columnas. Ya sea que necesite una cuadrícula fija o receptiva, solo es cuestión de algunos cambios.
Ejemplo: el código de muestra para dividir una página web en tres columnas donde se usa el arranque directamente sin crear nuevos métodos que están disponibles en el sitio web oficial. (fuente: https://getbootstrap.com/docs/4.4/getting-started/introduction/ )
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity= "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div class="col-md"> n One of three columns </div> <!-- Dividing the website into three columns --> <div class="col-md"> One of three columns </div> <div class="col-md"> One of three columns </div> </div> </div> </body> </html>
Producción:
Problemas con el arranque: habrá una gran cantidad de anulación de archivos donde se dedica más tiempo al diseño de un sitio web. necesitamos dedicar un poco más de tiempo a crear un diseño; de lo contrario, la mayoría de las páginas web tienen el mismo aspecto. JS está vinculado a jquery y es una de las bibliotecas comunes que, por lo tanto, deja sin usar la mayoría de los complementos.
Introducción a Bootstrap-Theme: los temas de Bootstrap son paquetes de HTML, CSS y js que proporcionan estilo, componentes de interfaz de usuario y diseños de página para usar en un proyecto web. Las plantillas ya están escritas por el desarrollador que se utiliza para adaptar el guión y facilitar el aprendizaje de un individuo para crear un nuevo sitio web.
Características: el tema Bootstrap incluye botones, menú desplegable, barra de navegación, barra de progreso, paneles. Las clases de términos nos permiten acceder a elementos específicos de CSS y JS a través de selectores de clase. Las clases en los botones que están predefinidos ahorran mucho tiempo y se pueden personalizar. Los temas utilizados para establecer la altura de la cuadrícula y el color de fondo de la página web con diferentes estilos de formato del texto y con el contenido y la altura del texto podemos establecer el relleno de la cuadrícula. Container-fluid para crear diseños fluidos para utilizar el 100 % del ancho de la ventana gráfica en todos los dispositivos.
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<style>
/* Remove the navbar's default margin-bottom
and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Add a gray background color and some
padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
.carousel-inner img {
width: 100%;
/* Set width to 100% */
margin: auto;
min-height: 200px;
}
/* Hide the carousel text when the screen
is less than 600 pixels wide */
@media (max-width: 600px) {
.carousel-caption {
display: none;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button"
class="navbar-toggle"
data-toggle="collapse"
data-target="#myNavbar">
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<a class="navbar-brand"
href="#">Logo</a>
</div>
<div class="collapse navbar-collapse"
id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">
<span class="glyphicon glyphicon-log-in">
</span> Login</a></li>
</ul>
</div>
</div>
</nav>
<div id="myCarousel"
class="carousel slide"
data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel"
data-slide-to="0"
class="active"></li>
<li data-target="#myCarousel"
data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img alt="Image">
<div class="carousel-caption">
<h3>SomeText</h3>
<p>content.</p>
</div>
</div>
<div class="item">
<img alt="Image">
<div class="carousel-caption">
<h3>Mo</h3>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control"
href="#myCarousel"
role="button"
data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"
aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control"
href="#myCarousel"
role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"
aria-hidden="true">
</span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container text-center">
<h3>What We Do</h3>
<br>
<div class="row">
<div class="col-sm-4">
<img class="img-responsive"
style="width:100%"
alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-4">
<img class="img-responsive"
style="width:100%"
alt="Image">
<p>Project 2</p>
</div>
<div class="col-sm-4">
<div class="well">
<p>Some text..</p>
</div>
<div class="well">
<p>Some text..</p>
</div>
</div>
</div>
</div>
<br>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
Producción:
Problemas con el tema de Bootstrap: los términos deben recordarse al escribir el código; no se mostrarán errores, debemos volver a verificar el código para obtener el resultado correcto. Cada término debe especificarse para diseñar un sitio web.
Diferencia: el marco Bootstrap.css se usa para diseñar una página web básica con algo de contexto y diseños predefinidos. El estilo del sitio web se realiza importando el enlace CSS en el sitio web oficial. Como en bootstrap-theme.css se usa para menús desplegables, barras de navegación, barras de progreso, botones con diferentes estilos, podemos agregarlos llamando a los atributos de clase en el código. Formateo del texto con diferentes estilos, deslizamiento de texto en el sitio web.
Podemos agregar animaciones a las imágenes en el sitio web y los botones de redes sociales mediante íconos para compartir el contenido en el sitio web. tenemos clases predefinidas en el paquete que necesitamos para llamar a los atributos para el estilo de los botones.
Publicación traducida automáticamente
Artículo escrito por karanamsaipranav y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA