¿Cuál es la mejor manera de aprender Bootstrap?

Estoy respondiendo esta pregunta para una persona que tiene un conocimiento básico de HTML y CSS , y él / ella no quiere aprender Bootstrap .

Básicamente, comenzaría mi respuesta diciéndoles que:

  1. Bootstrap es un marco a través del cual haces que un sitio web responda.
  2. Con bootstrap puede hacer buenos diseños para botones, tablas, entradas, selecciones, etc.

☺ Ahora, si está comenzando con el proceso de aprendizaje de Bootstrap , no le llevará más de 10 horas hacer que su primera página web sea receptiva . Esto es lo primero que debe hacer porque es lo más importante.

FirstAsí que primero vaya al sitio Bootstrap y descargue este marco . Extraiga los archivos ‘ bootstrap.css ‘ y ‘ bootstrap.js ‘ y colóquelos en la carpeta de su sitio.

☺Agregue referencia a ‘bootstrap.css’ en el encabezado de la página web y justo antes de la etiqueta final del cuerpo , proporcione la referencia del archivo ‘bootstrap.js’.

Esto completa el proceso de configuración de Bootstrap en su sitio. Más información en – ¿Qué es Bootstrap?

Ahora comience a aplicar bootstrap a las diferentes áreas de su sitio para que responda . Para esto, debe comprender cómo funciona el sistema de cuadrícula Bootstrap . Solo para decirte las cosas importantes al respecto.

►Hay filas y columnas imaginarias en la cuadrícula.

► Puede haber un máximo de 12 columnas por fila.

► Las columnas son float:left , por lo que no aplique float:left en su CSS personalizado.

► Las columnas bajan (se convierte en float:none ) cuando el tamaño de la pantalla se reduce (como en teléfonos inteligentes, tabletas , etc.).

►Puedes hacer que las columnas se aflojen dándoles la clase como ‘ .col-sm-4 ‘, ‘ .col-xs-8 ‘, etc.

No puedo explicar todo sobre la cuadrícula porque es bastante larga, pero definitivamente debe consultar este tutorial para obtener información completa en – Cómo usar Bootstrap .

Ahora puede moverse para que las imágenes, videos, barra de navegación (menú) respondan con Bootstrap. Cómo se hace es bastante simple, consulte este tutorial: Cómo usar Bootstrap para hacer que las imágenes, los videos y la barra de navegación respondan .

♪ Eso es todo amigos, ahora puedes hacer que cualquier tipo de sitio web responda con bootstrap.

Si tiene alguna pregunta, por favor comente para que pueda responder. Si alimentas esta explicación, también será útil para los demás. Luego, comparta esto haciendo clic en el botón para compartir “Facebook y Twitter” a continuación.

♥ Votación a favor ♥ Votación a favor ♥ Votación a favor

* BOOTSTRAP ES FÁCIL *

Hay muchos sitios web disponibles donde puedes aprender fácilmente el bootstrap. Aquí está la lista:

  1. Introducción
  2. Tutorial Bootstrap 3
  3. Tutorial Bootstrap
  4. Una guía definitiva para principiantes
  5. Hacer un sitio web: Bootstrap

Si quieres aprender de los videos, aquí está la lista:

También hay algunos cursos gratuitos disponibles para bootstrap. Aquí está la lista:

Cursos en línea: en cualquier momento y en cualquier lugar | Udemy4

Creación de una interfaz de usuario receptiva con Bootstrap

Introducción a Bootstrap: un tutorial

Bootstrap – Cursos en línea, clases, capacitación, tutoriales sobre Lynda

La mejor manera de aprender Bootstrap es aprender de su sitio web oficial. No necesita ir “allí y dónde” para buscar el tutorial. Vaya a su sitio web oficial CSS · Bootstrap y explore su tutorial. Por favor no vayas a w3schools

La segunda mejor forma de aprender Bootstrap es entender cómo funciona Bootstrap. Cómo funciona su desarrollo web receptivo Magic. En realidad, toda esta magia se debe a Media Query. Media Query está detrás del funcionamiento de bootstrap para controlar su diseño en diferentes pantallas

Eche un vistazo a estos recursos de Bootstrap seleccionados por la comunidad – Aprenda Bootstrap – Los mejores tutoriales de Bootstrap | Hackr.io, revisa los mejores en caso de que necesites más material de aprendizaje.

Volveré a decir que el sitio web oficial de Bootstrap tiene un buen tutorial. Después de aprender los entresijos de Bootstrap. Debes practicar, ya que la práctica es la única mejor manera de trabajar bien en Bootstrap. Consulte el siguiente enlace para ver el ejemplo de plantilla de Bootstrap e intente aprender con el ejemplo

Primeros pasos · Sección de ejemplos de Bootstrap

Recuerde una cosa: la práctica hace al hombre perfecto

Entonces, después de aprender el marco Bootstrap, explore más ejemplos y créelos que lo ayudarán mucho. puede consultar varias plantillas de bootstrap en el siguiente enlace: Temas de Bootstrap en BootstrapZero

La mejor manera de aprender es el autoaprendizaje a través de sitios web / tutoriales.

Antes de aprender Bootstrap debe tener algún conocimiento de HTML5 y CSS3.

Puede aprender los conceptos básicos de html y css en los Tutoriales web en línea de W3Schools. También hay libros sobre html5 que ayudan, pero prefiero los tutoriales en línea.

Ahora, una vez que haya adquirido los conocimientos básicos sobre el área html, css y javascript / jquery, puede buscar en el sitio web oficial de arranque Bootstrap · El marco front-end más popular del mundo para dispositivos móviles y receptivos. Tienen tutoriales, que pueden tomar algo de tiempo, pero exploran la mayoría de las características del sitio. Puede descargar la última versión del sitio y probar los tutoriales en su máquina local. Una vez que haya completado los tutoriales, el sitio también tiene algunas plantillas predefinidas de diseños de sitios web. Puede usar el código fuente de estos sitios web para analizar las estructuras del sitio web.

¡Ahora tiene la comprensión de cómo funciona Bootstrap, tome cualquiera de los sitios web favoritos, intente comprender el diseño del sitio web y comience a codificar en Bootstrap!

Practica mientras aprendes Bootstrap, intenta desarrollar páginas web con Bootstrap cuando creas que ya has hecho lo suficiente con Bootstrap. Antes de comenzar con Bootstrap, intente comprender qué es Bootstrap y cómo ayuda en el mundo real.

Los desarrolladores de Twitter han creado un marco para reducir la complejidad de escribir CSS para diseñar las páginas web.

Bootstrap es un marco de desarrollo web que los desarrolladores front-end utilizan para diseñar páginas web en menos tiempo. Bootstrap tiene clases predefinidas donde puede aplicar directamente en la etiqueta HTML sin escribir código extenso. Todo lo que necesita hacer es incluir bibliotecas Bootstrap en su proyecto.

Por ejemplo, puede crear botones hermosos simplemente asignando una clase Button a la etiqueta HTML. Si desea realizar cambios en la clase Bootstrap predefinida, puede anular las clases de Bootstrap con su propio CSS.

Si crees que Bootstrap es difícil, entonces revisa las alternativas de Twitter Bootstrap:

Alternativas de Bootstrap:

  • Fundación Zurb
  • HTML5 Boilerplate
  • Pure.CSS
  • Cuadrícula simple, etc.

Hay muchos recursos disponibles en línea, pero puede ser útil para usted Los 10 mejores tutoriales en video para aprender Bootstrap

Bootstrap 4 es excelente, pero la documentación oficial no es muy amigable para principiantes.

Los principiantes a menudo hacen las siguientes preguntas:

  • ¿Cómo recuerdo todas las clases y componentes?
  • ¿Qué es el diseño receptivo y por qué es la mejor opción?
  • ¿Cuál es el flujo de trabajo para seguir el primer diseño móvil?
  • ¿Cómo uso realmente Bootstrap?
  • ¿Cómo hago que mis imágenes respondan a ancho completo y agrego fondos de paralaje?

Creé un tutorial paso a paso para ayudar a los principiantes a ponerse al día rápidamente sin duplicar la documentación oficial. Mi objetivo es llenar los vacíos y explicar Bootstrap en el contexto que juega en el diseño web receptivo.

Puede obtener más información sobre el inicio rápido de Bootstrap 4 y el material de referencia aquí.

La mejor manera de aprender Bootstrap es practicando.

Sugeriría hablar con sus amigos y familiares para ver quién necesita un sitio web . Seguramente encontrarás más de uno.

Luego, sugeriría descargar una plantilla gratuita que se ajuste al propósito del sitio web que desea crear .

Grandes recursos se pueden encontrar en:

  • Bootstrapious – Temas y plantillas de Bootstrap gratuitos,
  • Iniciar Bootstrap
  • o Black Tie – Temas gratis de Bootstrap guapo.

Estos temas usan Bootstrap “correctamente” y su sintaxis es agradable y clara.

Y luego, simplemente experimente con la plantilla , vea cómo funciona todo y doble la plantilla como desee.

Estoy seguro de que lo logrará, realmente no hay nada demasiado complicado sobre Bootstrap.

Algunos excelentes recursos para revisar también serían:

  • Documentos oficiales de Bootstrap – Primeros pasos · Bootstrap
  • Bootstrap linter (verifique si su código tiene una sintaxis incorrecta) – Bootlint Online
  • Tutoriales de Bootstrap en Bootstrapious – Tutoriales de Bootstrap + codificación | Tutoriales paso a paso de Bootstrapious
  • Tutoriales de Bootstrap sobre Scotch Web Development – Scotch Web Development
  • Tutoriales CSS , en caso de que seas un verdadero principiante en diseño web – Tutorial CSS

La creación de sitios web receptivos se ha convertido en una necesidad en el mundo de hoy, donde los dispositivos vienen en todas las formas y tamaños. Desde computadoras de escritorio hasta computadoras portátiles e incluso relojes inteligentes, hay tantos dispositivos que los desarrolladores ahora deben tener en cuenta. Bootstrap anhela simplificar este gran problema.

Introducción a Bootstrap 4 – Sam Dias – Medio

También tengo un Tutorial GRATUITO para ti.

Por favor visite el siguiente enlace para comenzar.

Aprenda el desarrollo de Bootstrap mediante proyectos de construcción | Proyectos de Bootstrap

Aprenda Bootstrap, el mejor marco multiplataforma, creando 10 proyectos únicos en este curso de Desarrollo de Bootstrap.

Con todos estos proyectos a sus espaldas, puede construir casi cualquier cosa con Bootstrap. Entonces haga clic en el botón Inscribirse y nos vemos en el otro lado.

Saludos,

Acosar

Así es como lo hice. Primero, asegúrese de comprender los conceptos básicos de HTML y CSS. Eso ayudaría con la mayoría de sus códigos de arranque. Lo mejor de bootstrap es que puede modificar el código para adaptarlo a lo que tiene en mente. Lo que de otro modo tomaría un tiempo para escribir su propio código CSS se puede hacer realmente rápido a través de bootstrap, pero no puede seguir adelante a menos que comprenda CSS.

W3 Schools es un excelente sitio web para aprender bootstrap. Bootstrap 3 Tutorial. La mejor manera de mejorar es simplemente implementarlo en su código e intentar crear algunos sitios web receptivos (con o sin JS según su comodidad). Personalmente, ver la mejora en los diseños del sitio web después de aprender bootstrap fue una gran ventaja.

PD. El diseño de la cuadrícula es excepcionalmente útil en la mayoría de las aplicaciones.

Font Awesome, la fuente icónica y el kit de herramientas CSS: ¡esta es una gran colección de Glyphicons!

Domina Bootstrap 4 y crea 5 temas del mundo real mientras aprendes semántica HTML5, CSS3 y Sass

Enlace del curso: aprende Bootstrap 4 desde cero con 5 proyectos: domina Bootstrap 4 y crea 5 temas del mundo real

Descripción del curso Por instructor del curso: Brad Traversy (Full Stack Web Developer & Programmer):

Este curso lo llevará literalmente de no saber nada sobre Bootstrap 3 o 4 a aprender todas las utilidades, componentes, widgets y cuadrículas y crear temas y sitios web del mundo real. NO necesita saber Bootstrap 3 para este curso. Incluso si ya conoce Bootstrap 4, omita las secciones de aprendizaje y vaya directamente a la sección 6 para crear el flujo de trabajo personalizado y comenzar los proyectos. ¡Todo es completamente modular!

Caja de arena de Bootstrap personalizada

He creado un entorno de aprendizaje HTML completamente personalizado para las primeras secciones de este curso. Cada conferencia tiene una página html asociada y tiene un estado de inicio. A medida que avanzamos a través de las conferencias, usted codifica junto con mí aprendiendo todo lo que Bootstrap 4 ofrece, incluidos ayudantes / utilidades, componentes, widgets, flexbox y más.

Paquete de inicio Bootstrap

Una vez que pase por el sandbox, configuraremos el paquete de inicio que también creé para este curso. Esto nos dará un flujo de trabajo de desarrollo real para compilar Bootstrap 4 desde la fuente y compilar Sass. Incluso nos dará un servidor de desarrollo con carga automática. Esto es lo que usaremos para los 5 proyectos

5 proyectos reales / temas

Utilizaremos el paquete de inicio para crear 5 temas del mundo real, incluidos

  • LoopLap: un tema de interfaz de usuario social
  • Mizuxe – Un tema de exhibición de libros / productos
  • Blogen: una interfaz de usuario del área de administración del blog
  • Glozzom: un tema de varias páginas con un carrusel y algunos scripts de terceros
  • Portfoligrid: un tema de portafolio que utiliza la cuadrícula, flexbox y el widget de colapso

¿Quién es el público objetivo?

Cualquiera que quiera aprender y dominar Bootstrap 4 y construir temas del mundo real

¿Que aprenderás?

  • Aprende y crea increíbles temas y UIs de Bootstrap 4 de alta calidad desde cero
  • Aprenda las utilidades, clases, componentes y widgets JS de Bootstrap 4 utilizando un entorno de sandbox personalizado
  • Cree un flujo de trabajo profesional y un servidor de desarrollo para construir desde la fuente y compilar Sass
  • Aprenda HTML5 semántico y técnicas modernas de CSS3
  • Requisitos
  • Debe tener conocimientos básicos de HTML y CSS.
  • NO necesitas saber ningún Bootstrap 3

Aprende Bootstrap 4 desde cero con 5 proyectos: domina Bootstrap 4 y crea 5 temas del mundo real

Comience con Bootply: es un editor / área de juegos que creé que proporciona acceso a todas las clases de Bootstrap CSS y componentes JS. También hay muchos fragmentos y ejemplos compartidos por otros usuarios.

Para comenzar, simplemente seleccione una plantilla de la barra lateral izquierda. El código CSS, HTML y JavaScript de la plantilla se puede editar, previsualizar y guardar para su uso posterior.

Es una forma sencilla de jugar con los diferentes elementos de Bootstrap y crear un diseño.

Bootstrap es un marco front-end gratuito para un desarrollo web más rápido, fácil y receptivo que incluye plantillas HTML y CSS predefinidas para todos los elementos.

Uno puede aprender Bootstrap fácilmente de numerosas maneras:

  • Tutorial de Bootstrap 3 de W3Schools
  • Tutoriales Point Bootstrap Tutorial
  • Tutorial de Derek Banas Tutorial de Bootstrap
  • Tutoriales de KudVenkat tutorial de arranque para principiantes
  • The Newboston Tutorials Tutoriales de Bootstrap para principiantes Lista de reproducción

  • Una vez que tenga una idea de cómo funciona bootstrap, puede consultar el sitio web oficial de Twitter Bootstrap para obtener su documentación CSS · Bootstrap

Feliz aprendizaje..!!!

No te preocupes demasiado. Te garantizo que si pones las horas, puedes hacerlo.

Si te pones cómodo (quiero decir, realmente cómodo) con la position (especialmente absolute y relative ), la display y la float , te ahorrarás una cantidad increíble de tiempo. Con su escala de tiempo, esto podría significar dedicar unas pocas horas todos los días a leer y experimentar además de cualquier trabajo que esté haciendo.

Aprenda bootstrap aquí: https://hackr.io/tutorials/learn

Centrarse en un solo concepto a la vez también ayuda mucho. Obtenga una idea para un diseño (p. Ej., Una galería), escriba el CSS mínimo para lograr ese diseño y pase a lo siguiente que desea comprender. (Un encabezado, tal vez). De esa manera, está eliminando cualquier malentendido que pueda tener en la raíz. También está practicando buenos patrones de diseño al enfocarse en poner solo lo esencial en las clases que está escribiendo. (En mi opinión, si está poniendo una regla estética como un fondo en clases estructurales, lo está haciendo mal).

Ayuda a tomar esto en serio. No hago mucho por CSS en estos días, pero definitivamente hago nuevos conceptos de programación. Documento lo que he aprendido en los comentarios y guardo el directorio como si fuera un tutorial para el consumo de otra persona. A menudo hago referencia a estos si ha pasado un tiempo desde que hice algo. La calidad de repetición estructurada y espaciada realmente lo graba en mi cerebro.

Sinceramente, creo que si te tomas esto muy en serio, tendrás suficiente conocimiento de CSS para usar Bootstrap de manera efectiva en solo una o dos semanas. Sin embargo, no hay sustituto para el sudor y las lágrimas. Y una vez que te sientas cómodo con lo básico, quizás ni siquiera te importe usar Bootstrap.

Learning Bootstrap tiene todo el contenido que necesitas dominar en el framework Bootstrap . Te enseña desde los conceptos más básicos y va a los temas más avanzados.

Su aplicación de Android tiene todo el contenido almacenado sin conexión para que pueda aprender en cualquier momento y en cualquier lugar. Además de tener texto, tiene un conjunto de PDF de fama mundial y algunos videos de conferencias diseñados especialmente para su comprensión práctica.

Sitio web – Learning Bootstrap – Tutorial Bootstrap: Aplicación de Android

Aplicación de Android – Aprendizaje Bootstrap – Tutorial – Aplicaciones de Android en Google Play

Conozca la versión más reciente de Bootstrap, la versión 4 de Eduonix TV

Incluye

Introducción y primeros pasos

Tipografía y Utilidades

Componentes CSS

Sistema de cuadrícula y Flexbox

Widgets de JavaScript

Configuración del paquete de inicio Bootstrap

Proyecto 1 – Tema social de LoopLab

Proyecto 2 – Tema del libro Mizuxe

Proyecto 3 – Blogen Admin UI

Proyecto 4 – Tema Glozzom de páginas múltiples

Proyecto 5 – Portfoligrid

Haga clic en: Crear temas del mundo real con el tutorial de Bootstrap 4

Use el código de cupón EDUDEE para una suscripción gratuita

Bootstrap es un desarrollo web de marco front-end. Se basa en HTML, CSS y JavaScript. Si tiene conocimientos básicos de HTML y CSS, puede usar Bootstrap en su aplicación. Utiliza estilos y configuraciones globales que puede aprender aquí Bootstrap. Como se trata de un marco front-end y está basado en CSS 3, los conocimientos básicos de CSS 3 definitivamente serán útiles, como el uso de consultas de medios.

Como utiliza los preprocesadores less y saas, será útil tener conocimiento de ellos.

Para usarlo, puede descargarlo o usarlo directamente usando CDN

Bootstrap es muy fácil de aprender.

Cree sitios web receptivos rápidamente con este increíble kit de herramientas front-end. Con Google dando preferencia a los sitios web móviles sobre los tradicionales de escritorio, los sitios web progresivos ya no son solo una opción, sino una necesidad. Echemos un vistazo a lo que realmente es bootstrap. Echa un vistazo a la siguiente infografía:

Un informativo sobre el desarrollo de Bootstrap

Puede aprender absolutamente bootstrap en línea, ya que hay muchos materiales disponibles en Internet. Te sugeriré una plataforma de este tipo donde puedes juntar todo. Por favor, consulte el siguiente enlace:

Cursos Bootstrap

Aquí encontrarás muchos cursos de bootstrap, algunos son pagados y otros son GRATUITOS. Te sugiero que sigas el enlace anterior e inscribas en cualquiera de los cursos para probarlo.

Espero que te ayude. Buena suerte..!

Saludos

Sam Dias

La mejor manera de aprender Bootstrap es desde Bootstrap · El marco front-end más popular del mundo para dispositivos móviles y receptivos.

Enseña paso a paso y toma mucho menos tiempo en comparación con los videos. Además, si enfrenta algunos problemas de comprensión, puede preferir los Tutoriales web en línea de W3Schools para Bootstrap, ya que también enseñan de manera muy detallada con las instalaciones de ejecución de código en línea.

Déjame darte una forma astuta de mandar Bootstrap en minutos. Ir a LayoutIt! – Interface Builder para Bootstrap y tener todo lo de arrastrar y soltar.

PD: te sugiero que uses LayoutIt! – Interface Builder para Bootstrap solo cuando tenga alguna práctica práctica en Bootstrap por su cuenta o de lo contrario le faltará entender los códigos en el futuro.

La mejor manera de aprender bootstrap es usar varios tutoriales. Una gran cantidad de tutoriales de arranque disponibles en línea. Después de aprender uno o dos componentes de bootstrap, intente reflejar este componente en su diseño. La mejor manera de aprender algo haciendo.

lista de sitio web que proporciona tutorial de arranque

Hacer un sitio web: Bootstrap

Tutorial Bootstrap 3

Tutorial Bootstrap

Introducción a Bootstrap: un tutorial

Gracias por el A2A.

Feliz codificación

Tutorial Bootstrap 3

Si conoce HTML básico, bootstrap será fácil. Incluye los archivos CSS en HTML y juega con los componentes · Bootstrap