Qu'est-ce que Bootstrap?
Bootstrap est un cadre frontal pour le développement rapide d'applications Web et de sites Web. Bootstrap est basé sur HTML, CSS et JavaScript.
histoire
Bootstrap a été développé par Mark Otto de Twitter et Jacob Thornton. Bootstrap est un produit open source publié sur GitHub en août 2011.
Contenu du package bootstrap
Structure de base: Bootstrap fournit une structure de base avec un système de grille, un style de liaison et un arrière-plan. Cela sera expliqué en détail dans la section de base de base de bootstrap.
CSS: Bootstrap est livré avec les fonctionnalités suivantes: paramètres CSS globaux, définition des styles d'élément HTML de base, classe extensible et système de grille avancé. Cela sera expliqué en détail dans la section Bootstrap CSS.
Composants: Bootstrap contient plus d'une douzaine de composants réutilisables pour créer des images, des menus déroulants, une navigation, des boîtes d'avertissement, des boîtes contextuelles, etc. Cela sera expliqué en détail dans la section des composants de mise en page.
Plugin JavaScript: Bootstrap contient plus d'une douzaine de plugins jQuery personnalisés. Vous pouvez inclure tous les plugins directement ou un par un. Cela sera expliqué en détail dans la section du plug-in bootstrap.
Personnalisation: vous pouvez personnaliser les composants bootstrap, moins de variables et les plug-ins jQuery pour obtenir votre propre version.
Ce chapitre présente comment afficher un modèle de données dans un formulaire de formulaire après avoir généré un formulaire (généralement utilisé pour modifier les pages)
Le code est le suivant (adresse de connexion: https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form4-initdata.html):
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <tight> liaison des données </tape> <meta name = "Viewport" content = "width = device-width, initial-scale = 1"> <lin rel = "Stylesheet" href = "../ css / site.css"> <script src = "../ lib / jQuery.js"> </ script> <script src = "../ lib / bootstrap.js"> </ script> <! - Méthodes d'outils -> <script src = ".. scripts / global.js"> </ script> <! src = "../ scripts / plugin.js"> </ script> </ head> <body> <div> <div> <vabed> liaison de données </vabe> <div> <Button id = "btnsubmit"> Soumettez le formulaire </utton> </div> </div> <v> <form action = "#" ID = "FormContainer"> </ Form> </ Div> <div> <div> <Belle> Introduction </BeL> </div> <div> <Belle> Introduction </ Labote> </div> <div> <H3> Formulaire de liaison des données </h3> <lockQuote> <p> Modèle de format JSON à former, en utilisant les données du modèle simulées ici. Dans l'environnement réel, il devrait interagir avec le serveur pour obtenir des données. Dans l'objet de configuration, une méthode de rappel est requise. Certaines autres opérations du formulaire peuvent être effectuées dans la méthode de retour, telles que l'ajout de vérification du formulaire et d'ajouter la prise en charge du plug-in de date ==== </p> <p> Remarque: La source de données de la case est dans un formulaire de tableau </p> </lockquote> </div> <cript> $ (function () {var eles = [[{label: {text: 'personnalisée personnalisée:' Personnalités personnalisé nom d'utilisateur: '}, ele: {type:' text ', nom:' username ', titre:' nom d'utilisateur: ', obligatoire: true}}, {ele: {type:' radio ', nam E: 'Sex', titre: 'Gender:', éléments: [{texte: 'mâle', valeur: 1}, {texte: 'femelle', valeur: 2}]}}, {ele: {type: 'Checkbox', Nom: 'Plant', titre: 'Utilisation de la plate-forme:', éléments: [{texte: 'app ", valeur:' app '}, {text:' web ', valeur:' web '}]}} ], [{ele: {type: 'select', nom: 'province', titre: 'province:', withnull: true, item type = "radio"> '}, type:' text ', nom:' affichename ', titre:' affichage name: '}}, {ele: {type:' search ', title:' product ', id:' productName '}}], [{ele: {type:' datetime ', nom:' FromEdate ', title:' Validation: 'Validation:' Période: '}}, {ele: {Type:' DateTime ', nom:' todate ', titre:' ~ '},]]; // Les éléments de forme cachés sont principalement utilisés pour l'édition. '1,3'}). Render ('formContainer', fonction (bf) {var modèle = {primaireKey: 1, nom d'utilisateur: 'xxg', sexe: 1, plante: ['app ",' web '], province:' gd ', affichage:' test ', productName:' noteb Ook ', FromEdate:' 2015-06-10 ', Todate:' 2015-08-08 '}; bf.initFormData (modèle);}); $ ("# btnsubmit"). bind (' click ', fonction ("Ici, un modèle de type JSON est créé à l'aide de JS. Dans le développement réel, vous interagirez avec le serveur pour obtenir un modèle. Le modèle est affiché sous la forme de la forme via la méthode initformData du plug-in de formulaire.
Les rendus sont les suivants:
Les données définies sont affichées avec succès sous la forme
Remarque: En cas de sélections multiples pour les cases à cocher, ce qui doit être renvoyé est un tableau
Ce qui précède est la description complète de la liaison de données de la page de montage de formulaire Smart Form Bootstrap Smart Practical Series (VI) vous a présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!