O que é Bootstrap?
O Bootstrap é uma estrutura front-end para o rápido desenvolvimento de aplicativos e sites da Web. O Bootstrap é baseado em HTML, CSS e JavaScript.
história
O Bootstrap foi desenvolvido por Mark Otto do Twitter e Jacob Thornton. O Bootstrap é um produto de código aberto lançado no GitHub em agosto de 2011.
Conteúdo do pacote de bootstrap
Estrutura básica: o bootstrap fornece uma estrutura básica com um sistema de grade, estilo de link e plano de fundo. Isso será explicado em detalhes na seção de estrutura básica do bootstrap.
CSS: O Bootstrap vem com os seguintes recursos: Configurações globais de CSS, definição de estilos básicos de elementos HTML, classe extensível e um sistema de grade avançado. Isso será explicado em detalhes na seção CSS de bootstrap.
Componentes: o Bootstrap contém mais de uma dúzia de componentes reutilizáveis para criar imagens, menus suspensos, navegação, caixas de aviso, caixas pop-up e muito mais. Isso será explicado em detalhes na seção Componentes de layout.
Javascript Plugin: O Bootstrap contém mais de uma dúzia de plugins jQuery personalizados. Você pode incluir todos os plugins diretamente ou um por um. Isso será explicado em detalhes na seção de plug-in bootstrap.
Personalização: você pode personalizar componentes de bootstrap, menos variáveis e plug-ins jQuery para obter sua própria versão.
Vamos ao tópico abaixo. Para detalhes, veja abaixo:
O código é o seguinte (endereço do link: https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form1-basic.html):
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Configuração básica </title> <link Rel = "Stylesheet" href = "../ css/jQuerstrap.css"> <script src = "/bliB/lib/jQuer. src = "../ lib/bootstrap.js"> </script> <!-métodos de ferramenta-> <script src = "../ scripts/global.js"> </script> <!-plug-in-> <script src = "/ scripts/plugin.js "> </script> </head> <bript> <bript> <Body> <BLED> Configuração </elabel> </div> <div> <form action = "#" id = "formContAiner"> </morm> </div> <div> <belt> introdução </crety> </div> <div> <belty> introdução </cret> </div> <div> <div> elementos de formulário incluem: text, text, caixa, check -se, datetimes, datetimes </div> Custom </h3> </div> </div> <cript> $ (function () {var eles=[{ele:{type:'text',name:'UserName',title:'Username:'}},[{ele:{type:'radio',name:'sex',title:'gender:',items:[{text:'male',value:1},{text:'female',value:2}]}},{ele:{type:'checkbox', Nome: 'Plant', Título: 'Plataforma do usuário:', itens: [{text: 'app', valor: 'app'}, {text: 'web', value: 'web'}]}}, ],{ele:{type:'select',name:'province',title:'Province:',withNull:true,items:[{text:'Guangdong',value:'GD'},{text:'Hunan',value:'HN'}]}},{ele:{type:'datetime',name:'FromeDate',title:'Validation Período: '}}, {ele: {type:' search ', nome:' selectName ', title:' Select: '}}, {ele: {type:' textarea ', name:' endereço ', título:' endereço: '}}, {ele: {pre: {text:' <input type = "Radio"}}, {eLe: {pre: {{text: '<input type = "Radio"}}, {ele: {pre: {text:' <input = " Frente: '}}, {ele: {a seguir: {text:' <input type = "Radio" /> '}, digite:' text ', nome:' next ', título:' depois: '}}, {ele: {pre: {text:' <input type = "caixa de seleção" /> '}, Próximo: {Text:' $ '}, TIPO:' Texto ', Nome:' Pre/Próxima ', Título:' Foreol Frente e Back: '}},]; }). Render ('formContainer');}); </sCript> </body> </html>É principalmente a seguinte seção JS e o formulário é gerado através desta seção JS
Renderizações em execução:
Obtenha os resultados mostrados na figura
O exposto acima é a descrição completa da série prática de formulário inteligente de Bootstrap (ii) que o editor apresentou a você. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a tempo. Muito obrigado pelo seu apoio ao site wulin.com!