En este artículo, aprendemos principalmente sobre la historia, las características, los usos de Boostrap y por qué se eligió Boostrap para desarrollar nuestros proyectos web.
Puntos clave para el aprendizaje:
1. Descripción general de Bootstrap
2. Características de Bootstrap
3. Estructura de bootstrap
4. Crea la primera página
5. Varios preparativos para el aprendizaje
1. Descripción general de la bootstrap
Bootstrap es un marco de código abierto basado en HTML, CSS y JavaScript desarrollado por dos ingenieros técnicos de Twitter (el Weibo más grande del mundo). El código de marco es simple y visualmente hermoso, y se puede utilizar para crear requisitos de página web de manera rápida y simplemente basada en PC y dispositivos móviles.
En junio de 2010, los ingenieros dentro de Twitter resolvieron el problema de la colaboración y la unificación en las tareas de desarrollo front-end. Después de varias soluciones, Bootstrap finalmente se confirmó y lanzó en agosto de 2011. Después de un largo período de iteración y actualización, el proyecto original dirigido por CSS se ha convertido en un marco de código abierto con un front-end web multifuncional con muchos complementos e iconos de JavaScript integrados.
La parte más importante de Bootstrap es su diseño receptivo, que puede ser compatible con el acceso a la página en PC, PAD y teléfonos móviles.
Descarga y demostración de bootstrap:
Sitio web oficial de traducción de documentos nacionales: http://www.bootcss.com
Sitio web oficial del Piaocheng Web Club: http://www.ycku.com
2. Características de bootstrap
Bootstrap es muy popular gracias a sus características y características muy prácticas. Las funciones principales principales son las siguientes:
(1). Servicio cruzado, navegador cruzado
Es compatible con todos los navegadores modernos, incluidos los más criticados IE7 y 8. Por supuesto, este curso ya no considera los navegadores por debajo de IE9.
(2). Diseño receptivo
No solo puede admitir pantallas en varias resoluciones en el lado de la PC, sino que también admite pantallas de conmutación receptivas de almohadilla móvil, teléfono móvil y otras pantallas.
(3). Componentes integrales proporcionados
Bootstrap proporciona componentes altamente prácticos, que incluyen: navegación, etiquetas, barras de herramientas, botones y otros componentes, que son convenientes para los desarrolladores.
(4). JQuery enchufado incorporado
Bootstrap proporciona muchos complementos de jQuery prácticos, que facilitan a los desarrolladores implementar varios efectos especiales generales en la web.
(5). Apoyo a HTML5 y CSS3
Las etiquetas semánticas HTML5 y las propiedades CSS3 están bien compatibles.
(6). Apoya un estilo menos dinámico
Menos usa variables, anidación y operaciones para escribir CSS más rápido y más flexible. Funciona bien con Bootstrap.
3. Estructura de bootstrap
En primer lugar, si desea comprender la estructura de documentos de Boostrap, debe descargarla localmente en el sitio web oficial. La dirección de descarga de Bootstrap es la siguiente:
Dirección de descarga de Bootstrap: http://v3.bootcss.com/ (Seleccione el entorno de producción, v3.3.4)
Después de la descompresión, el directorio presenta una estructura como esta:
oreja/
├── CSS/
│├── bootstrap.css
│├── bootstrap.css.map
│├── bootstrap.min.css
│├── bootstrap-theme.css
│├─se bootstrap-theme.css.map
│└── bootstrap-theme.min.css
├── JS/
│├── bootstrap.js
│└── bootstrap.min.js
└iqute Fonts/
├── Glyphons-Halflings-Regular.Eot
├── Glyphons-Halflings-Regular.svg
├── Glyphons-Halflings-Regular.ttf
├── Glyphons-Halflings-Regular.Woff
└── Glyphics-Halflings-Regular.Woff2
Se divide principalmente en tres directorios centrales: CSS (estilo), JS (script) y fuentes (fuente) .
1. Hay cuatro archivos con sufijo CSS en el directorio CSS. Los que contienen la palabra min son versiones comprimidas, que generalmente se usan; Los que no contienen son archivos sin compresión, y puede aprender a comprender el código CSS; Mientras que el archivo con sufijo MAP es una tabla de mapeo de código fuente CSS, que se utiliza en algunas herramientas específicas del navegador.
2.JS El directorio contiene dos archivos, que son archivos JS sin comprimir y comprimidos.
3. El directorio de Fonts contiene archivos de fuentes con diferentes sufijos.
4. Crea la primera página
Creamos una página HTML5, introducimos el archivo central de Bootstrap y luego probamos si se muestra normalmente.
// La primera bootstrap
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> bootstrap introduction </title> <link rel = "stylesheet" href = "css/bootstrap.min.css"> </head> <fody> <botin> bootstrap </button> </button> </script <script> src = "js/jQuery.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> </body> </html>
5. Varios preparativos para el aprendizaje
1. Herramientas de desarrollo . Utilizamos Text3 Sublime como la herramienta de desarrollo para Bootstrap e instalamos el complemento de generación de código EMMET;
2. Las herramientas de prueba , además de los navegadores modernos convencionales, son en segundo lugar como herramientas de prueba móviles. Utilizamos Opera Mobile Emulator y las herramientas de prueba web móvil de Chrome.
3. La base requerida es al menos la base del primer curso de la temporada HTML5. Bootstrap tiene muchos complementos de jQuery incorporados. Aunque es mucho más simple de usar que jQuery o JS en sí mismo, si tiene la base de los cursos JQuery y JS, tendrá una comprensión más profunda de su aprendizaje;
4. Resolución del curso : cursos básicos, usamos 1024 x 768 para registrar, pero algunas partes especiales, como los cursos receptivos y de proyectos, requieren una grabación de alta resolución, y usarán 1440 x 900 para registrar.
Si aún desea aprender en profundidad, puede hacer clic aquí para aprender y adjuntarle un tema maravilloso: Tutorial de aprendizaje de arranque Tutorial Practical Bootstrap
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.