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.
Passons au sujet ci-dessous. Pour plus de détails, veuillez consulter ci-dessous:
Le code est le suivant (Adresse du lien: https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form1-basic.html):
<! Doctype html> <html lang = "en"> <éread> <meta charset = "utf-8"> <tight> Configuration de base </ title> <link rel = "Stylesheet" href = "../ css / bootstrap.css"> <script src = "../ lib / jquery.js"> </ script> </ script> src = "../ lib / bootstrap.js"> </ script> <! - Méthodes d'outils -> <script src = "../ scripts / global.js"> </ script> <! - Plug-in -> <script src = "../ div> <v> <label> Configuration de base </ Labe Action = "#" id = "formContainer"> </ form> </ div> <v> <bablow> Introduction </ labe> </div> <div> <vabed> Introduction </ Label> </div> <div> <h3> Les éléments de formulaire pris en charge incluent: texte, sélection, radio, cocher eles = [{ele: {type: 'text', name: 'username', titre: 'nom d'utilisateur:'}}, [{ele: {type: 'radio', nom: 'sex', titre: 'Gender:', items: [{text: 'masculin', valeur: 1}, {text: 'feme Nom: 'Plant', Titre: 'User Platform:', Items: [{Text: 'App', Value: 'App'}, {Text: 'Web', Value: 'Web'}]}}, ], {ele: {type: 'select', nom: 'province', titre: 'province:', withnull: true, items: [{text: 'Guangdong', valeur: 'gd'}, {text: 'hunan', valeur: 'hn'}]]}}, {ele: {type: 'datetime', nom: ' Période: '}}, {ele: {type:' search ', name:' selectName ', title:' select: '}}, {ele: {type:' textarea ', name:' adresse ', title:' adresse: '}}, {ele: {pre: {text:' <entrée Type = "Radio" /> '}, type:' Front: '}}, {ele: {next: {text:' <input type = "radio" /> '}, type:' text ', name:' next ', title:' After Behind: '}}, {ele: {pre: {text:' <entrée type = "Checkbox" /> '}, Titre: {text:'}, Type: 'Text', ', Titre', '$'}, Type: ' Front et arrière: '}},]; // Les éléments de forme cachés sont principalement utilisés pour l'édition.C'est principalement la section JS suivante, et le formulaire de formulaire est généré par cette section JS
Renforts de course:
Obtenez les résultats présentés sur la figure
Ce qui précède est la description complète du bootstrap Smart Form Practical Series (II) que l'éditeur vous a présenté. 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!