BootStrap 智能表單實戰(zhàn)系列(二)BootStrap支持的類型簡介
什么是 Bootstrap？
Bootstrap 是一個用于快速開發(fā) Web 應用程序和網站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
歷史
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發(fā)的。Bootstrap 是 2011 年八月在 GitHub 上發(fā)布的開源產品。
Bootstrap 包的內容
基本結構：Bootstrap 提供了一個帶有網格系統(tǒng)、鏈接樣式、背景的基本結構。這將在 Bootstrap 基本結構 部分詳細講解。
CSS：Bootstrap 自帶以下特性：全局的 CSS 設置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網格系統(tǒng)。這將在 Bootstrap CSS 部分詳細講解。
組件：Bootstrap 包含了十幾個可重用的組件，用于創(chuàng)建圖像、下拉菜單、導航、警告框、彈出框等等。這將在 布局組件 部分詳細講解。
JavaScript 插件：Bootstrap 包含了十幾個自定義的 jQuery 插件。您可以直接包含所有的插件，也可以逐個包含這些插件。這將在 Bootstrap 插件 部分詳細講解。
定制：您可以定制 Bootstrap 的組件、LESS 變量和 jQuery 插件來得到您自己的版本。
下面進入正題，詳細介紹請看下文：
代碼如下(鏈接地址：https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form1-basic.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基礎配置</title>
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../lib/jquery.js"></script>
<script src="../lib/bootstrap.js"></script>
<!--工具方法-->
<script src="../scripts/global.js"></script>
<!--插件-->
<script src="../scripts/plugin.js"></script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading"><label>基礎配置</label></div>
<div class="panel-body">
<form action="#" id="formContainer" class="form form-horizontal"></form>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"><label>介紹</label></div>
<div class="panel-body">
<h3>支持的表單元素包括:text、select、radio、checkbox、datetime、search、textarea、自定義</h3>
</div>
</div>
<script>
$(function () {
var eles=[
{ele:{type:'text',name:'UserName',title:'用戶名:'}},
[
{ele:{type:'radio',name:'sex',title:'性別:',items:[{text:'男',value:1},{text:'女',value:2}]}},
{ele:{type:'checkbox', name:'plant',title:'使用平臺:',items:[{text:'APP',value:'app'},{text:'web',value:'web'}]}},
],
{ele:{type:'select',name:'province',title:'省份:',withNull:true,items:[{text:'廣東',value:'GD'},{text:'湖南',value:'HN'}]}},
{ele:{type:'datetime',name:'FromeDate',title:'有效期:'}},
{ele:{type:'search',name:'selectName',title:'選擇:'}},
{ele:{type:'textarea',name:'address',title:'地址:'}},
{ele:{pre:{text:'<input type="radio" />'},type:'text',name:'pre',title:'叉前面:'}},
{ele:{next:{text:'<input type="radio" />'},type:'text',name:'next',title:'叉后面:'}},
{ele:{pre:{text:'<input type="checkbox" />'},next:{text:'$'},type:'text',name:'pre&next',title:'前后皆叉:'}},
];
//隱藏表單元素主要用于編輯時候后臺可以區(qū)別開來
var hides = [{ id: 'GUID' }];
var bsForm = new BSForm({ eles: eles, hides: hides, autoLayout:true }).Render('formContainer');
});
</script>
</body></html>
主要是下面的js那一塊，通過該段js生成form表單
運行效果圖：
得到如圖所示的結果
以上所述是小編給大家介紹的BootStrap 智能表單實戰(zhàn)系列(二)BootStrap支持的類型簡介的全部敘述，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
- jfinal與bootstrap的登錄跳轉實戰(zhàn)演習
- php bootstrap實現(xiàn)簡單登錄
- 基于Bootstrap+jQuery.validate實現(xiàn)表單驗證
- Bootstrap表單布局樣式代碼
- Bootstrap3.0建站教程(一)之bootstrap表單元素排版
- BootStrap智能表單實戰(zhàn)系列(六)表單編輯頁面的數據綁定
- BootStrap 智能表單實戰(zhàn)系列(十)自動完成組件的支持
- Bootstrap中的表單驗證插件bootstrapValidator使用方法整理（推薦）
- 第七篇Bootstrap表單布局實例代碼詳解(三種表單布局)
- Bootstrap實現(xiàn)登錄校驗表單(帶驗證碼)
相關文章
腳本分析、壓縮、混淆工具 JSA新版本發(fā)布，壓縮效率提高大約10％
腳本分析、壓縮、混淆工具 JSA新版本發(fā)布，壓縮效率提高大約10％...2007-05-05
Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關系進行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應的靜態(tài)資源，這篇文章主要介紹了JavaScript中Webpack的使用,需要的朋友可以參考下2021-10-10
video控件是微信小程序提供的系統(tǒng)組件之一,用于實現(xiàn)播放視頻的功能,這篇文章主要給大家介紹了關于微信小程序之video組件視頻播放的相關資料,需要的朋友可以參考下2022-04-04
這篇文章給大家分享了javascript中UMD規(guī)范的代碼推演的相關的知識點內容，有興趣的朋友們學習下。2018-08-08
JS題解leetcode去掉最低工資和最高工資后的工資平均值
這篇文章主要為大家介紹了JS題解leetcode去掉最低工資和最高工資后的工資平均值，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
本篇文章主要介紹了webpack源碼之loader機制詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了JavaScript繼承定義與用法,結合實例形式分析了JavaScript面向對象程序設計中基類的定義、原型繼承以及調用父類構造函數等相關操作技巧,需要的朋友可以參考下2018-05-05
本文主要講解javascript 的正則表達式中的分組匹配與前瞻匹配的，需要對正則的有基本認識，本人一直對兩種匹配模棱不清，還有不清楚的朋友跟隨腳本之家小編一起看看吧2018-05-05
這篇文章主要介紹了js中settimeout方法加參數的使用,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了JavaScript 如何計算文本的行數的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09