¿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.
Este capítulo presenta cómo mostrar los datos de un modelo en un formulario de formulario después de generar un formulario (generalmente utilizado para editar páginas)
El código es el siguiente (dirección de conexión: https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form4-initdata.html):
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> enlace de datos </title> <meta name = "viewport" content = "width = dispositivo-width, inicial-escale = 1"> <link rel = "stylesheet" href = "../ css/bootstrap.css" estilo-> <link rel = "stylesheet" href = "../ css/sitio.css"> <script src = "../ lib/jQuery.js"> </script> <script src = "../ lib/bootstrap.js"> </script> < src = "../ scripts/global.js"> </script> <!-complemento-> <script src = "../ scripts/plugin.js"> </script> </bead> <body> <div> <div> <label> enlace de datos </label> <botón <botón ID = "btnsubmit"> enviar el formulario </button> </piv> </pel> <viv> <viv> it = "btnsubmit"> Semitar el formulario </botón> </piv> </Divi id = "FormContainer"> </form> </div> <div> <div> <label> Introducción </selabel> </div> <div> <label> Introducción </seleting> </div> <div> <h3> Forma de enlace de datos </h3> <lockquote> <p> Bind JSON Format Model to Form, utilizando datos de modelo simulados aquí. En el entorno real, debe interactuar con el servidor para obtener datos. En el objeto de configuración, se requiere un método de devolución de llamada. Algunas otras operaciones del formulario se pueden realizar en el método de retorno, como agregar verificación de formulario y agregar soporte de complemento de fecha ===== </p> <p> Nota: La fuente de datos de la casilla de verificación está en una forma de matriz </p> </loCLOCKQuote> </div> <script> $ (function () {var eles = [{etiqueta: {text: 'costumbre:' costumbre nombre de usuario: '}, ele: {type:' text ', nombre:' nombre de usuario ', título:' username: ', requerido: true}}, {ele: {type:' radio ', nam E: 'Sex', Título: 'Género:', Elementos: [{texto: 'masculino', valor: 1}, {text: 'femenino', valor: 2}]}}, {ele: {type: 'checkbox', Nombre: 'Planta', Título: 'Uso de la plataforma:', Elementos: [{Text: 'App', Value: 'App'}, {Text: 'Web', Value: 'Web'}]}} ], [{{ele: {tipo: 'seleccionar', nombre: 'provincia', título: 'provincia:', withnull: true, elementos: [{text: 'guangdong', valor: 'gd'}, {text: 'hunan', valor: 'hn'}]}}, {ele: {pre: {text: '<input type = "radio"> '}, type:' text ', name:' displayName ', title:' Display Name: '}}, {ele: {type:' búsqueda ', título:' producto ', id:' productName '}}], [{ele: {type:' dataTime ', name:' fromedate ', title:' validationationationationationationation Período: '}}, {ele: {type:' dateTime ', name:' Todate ', title:' ~ '}},]]]; // Los elementos de forma oculta se usan principalmente para editar. '1,3'}). Render ('formcontainer', function (bf) {var modelo = {primario: 1, nombre de usuario: 'xxg', sexo: 1, planta: ['app', 'web'], provincia: 'GD', DisplayName: 'test', ProductName: 'NoteB OOK ', Fromedate:' 2015-06-10 ', Todate:' 2015-08-08 '}; bf.initformData (modelo);}); $ ("#btnsubmit"). bind (' click ', function () {var postdata = bsform.getformData (); alert ("Los datos de expresión obtenidos son:"+json.stringify (postdata));})}); </script> </body> </html>Aquí, se crea un modelo de tipo JSON usando JS. En el desarrollo real, interactuará con el servidor para obtener un modelo. El modelo se muestra en el formulario Formulario a través del método InitFormData del complemento del formulario.
Las representaciones son las siguientes:
Los datos definidos se muestran con éxito en el formulario
Nota: En caso de selecciones múltiples para casillas de verificación, lo que debe devolverse es una matriz
Lo anterior es la descripción completa del enlace de datos de la página de edición de formulario de formulario de formulario Smart Form Smart Series (VI) de Bootstrap introducido por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!