¿Qué es Bootstrap?
Bootstrap es un marco front-end para el rápido desarrollo de aplicaciones web y sitios web. Bootstrap se basa en HTML, CSS y JavaScript.
historia
Bootstrap fue desarrollado por Mark Otto y Jacob Thornton de Twitter. Bootstrap es un producto de código abierto lanzado en Github en agosto de 2011.
Contenido del paquete de bootstrap
Estructura básica: Bootstrap proporciona una estructura básica con un sistema de cuadrícula, estilo de enlace y fondo. Esto se explicará en detalle en la sección Bootstrap Basic Structure.
CSS: Bootstrap viene con las siguientes características: Configuración global de CSS, definición de estilos básicos de elementos HTML, clase extensible y un sistema de cuadrícula avanzado. Esto se explicará en detalle en la sección Bootstrap CSS.
Componentes: Bootstrap contiene más de una docena de componentes reutilizables para crear imágenes, menús desplegables, navegación, cajas de advertencia, cajas emergentes y más. Esto se explicará en detalle en la sección Componentes de diseño.
JavaScript Plugin: Bootstrap contiene más de una docena de complementos JQuery personalizados. Puede incluir todos los complementos directamente o uno por uno. Esto se explicará en detalle en la sección de complemento Bootstrap.
Personalización: puede personalizar los componentes de Bootstrap, menos variables y complementos jQuery para obtener su propia versión.
Vamos al tema a continuación. Para más detalles, consulte a continuación:
El código es el siguiente (dirección de enlace: https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form1-basic.html):
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Configuración básica </title> <link rel = "stylesheet" href = "../ css/bootstrap.css"> <script src = "../ jQuery.js"> </script> <script> </script> </script> src = "../ lib/bootstrap.js"> </script> <!-Métodos de herramientas-> <script src = "../ scripts/global.js"> </script> <!-complemento-> <script src = "../ scripts/scripts.js"> </script> </head> <body> <viV> <iv> <label> config. Action = "#" id = "FormContainer"> </form> </div> <iv> <label> Introducción </seleting> </div> <viem> eles = [{ele: {type: 'text', name: 'username', title: 'username:'}}, [{ele: {type: 'radio', name: 'sex', title: 'gender:', elementos: [{text: 'masculino', valor: 1}, {text: 'femenino', valor: 2}]}}, {ele: {{{{',', ',', ',', ',', ',', ',', ',', ',', ',', ',', ',', ',', ',', ',', ',', ',', ',', ',', ',', '. Nombre: 'Planta', Título: 'Plataforma de usuario:', elementos: [{Text: 'App', Value: 'App'}, {Text: 'Web', Value: 'Web'}]}}, ], {ele: {type: 'select', nombre: 'provincia', título: 'provincia:', withNull: true, elementos: [{text: 'guangdong', valor: 'gd'}, {text: 'hunan', valor: 'hn'}]}}, {ele: {type: 'dateTime', name: name: fromEdate ', title', title ', title', ' period:'}},{ele:{type:'search',name:'selectName',title:'Select:'}},{ele:{type:'textarea',name:'address',title:'Address:'}},{ele:{pre:{text:'<input type="radio" />'},type:'text',name:'pre',title:'fork front: '}}, {ele: {next: {text:' <input type = "radio" /> '}, type:' text ', name:' next ', title:' After detrás: '}}, {ele: {pre: {text:' <input type = "checkbox" /> '}, siguiente: {text:' $ '}, type:' text, name, name: ',', ', Título, Título, Título,' Frente y espalda: '}},]; // Los elementos de forma oculta se usan principalmente para la edición.Es principalmente la siguiente sección JS, y el formulario se genera a través de esta sección JS
Renderizaciones de ejecución:
Obtenga los resultados que se muestran en la figura
Lo anterior es la descripción completa de la serie práctica de formulario inteligente Bootstrap (ii) que el editor le presentó. Espero que te sea útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!