Bootstrap表單布局樣式代碼

更新時間：2016年05月31日 14:55:11 作者：勤能補拙

這篇文章主要介紹了Bootstrap表單布局樣式代碼的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下

廢話不多說了，直接給大家貼代碼了。

<form class="form-horizontal" role="form">
<fieldset>
<legend>配置數(shù)據(jù)源</legend>
<div class="form-group">
<label class="col-sm-2 control-label" for="ds_host">主機名</label>
<div class="col-sm-4">
<input class="form-control" id="ds_host" type="text" placeholder="192.168.1.161"/>
</div>
<label class="col-sm-2 control-label" for="ds_name">數(shù)據(jù)庫名</label>
<div class="col-sm-4">
<input class="form-control" id="ds_name" type="text" placeholder="msh"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="ds_username">用戶名</label>
<div class="col-sm-4">
<input class="form-control" id="ds_username" type="text" placeholder="root"/>
</div>
<label class="col-sm-2 control-label" for="ds_password">密碼</label>
<div class="col-sm-4">
<input class="form-control" id="ds_password" type="password" placeholder="123456"/>
</div>
</div>
</fieldset> 
<fieldset>
<legend>選擇相關表</legend>
<div class="form-group">
<label for="disabledSelect" class="col-sm-2 control-label">表名</label>
<div class="col-sm-10">
<select id="disabledSelect" class="form-control">
<option>禁止選擇</option>
<option>禁止選擇</option>
</select>
</div>
</div>
</fieldset>
<fieldset>
<legend>字段名</legend>
<div class="form-group">
<label for="disabledSelect" class="col-sm-2 control-label">表名</label>
<div class="col-sm-10">
<select id="disabledSelect" class="form-control">
<option>禁止選擇</option>
<option>禁止選擇</option>
</select>
</div>
</div>
</fieldset>
</form>

效果圖

以上內(nèi)容是小編給大家介紹的Bootstrap表單布局樣式代碼的相關知識，希望對大家有所幫助！

您可能感興趣的文章:

微信小程序?qū)崿F(xiàn)一鍵登錄
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)一鍵登錄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
JS判斷表單輸入是否為空(示例代碼)
本篇文章主要是對JS判斷表單輸入是否為空的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
JavaScript常用函數(shù)工具集：lao-utils
現(xiàn)在Javascript庫海量，流行的也多，比如jQuery，YUI等，雖然功能強大，但也是不萬能的，功能不可能涉及方方面面，這里給大家分享一個的JS庫是對這些的補充，很多也比較實用，把應用到項目中中去也比較方面，這也是對工作的一些積累，也加深對知識的理解。
2016-03-03
Bootstrap免費字體和圖標網(wǎng)站(值得收藏)
在這篇內(nèi)容中，我們把這套框架上的免費字體圖標做了個整合(當然，以后還會不斷的更新)。大家對bootstrap免費字體圖標有需要的話，可以參考本教程
2017-03-03
JavaScript實現(xiàn)將Word文檔解析成瀏覽器認識的HTML
這篇文章主要為大家詳細介紹了如何使用JavaScript實現(xiàn)將Word文檔解析成瀏覽器認識的HTML,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下
2024-02-02
javascript常用的數(shù)組過濾和查找方法總結(jié)
這篇文章主要介紹了javascript常用的數(shù)組過濾和查找方法的相關資料,這些方法各有特點,適用于不同的數(shù)據(jù)處理場景,大家可以根據(jù)需求選擇不同的方法,需要的朋友可以參考下
2024-12-12
基于Bootstrap3表格插件和分頁插件實例詳解
這篇文章主要介紹了基于Bootstrap3表格插件和分頁插件實例詳解的相關資料,需要的朋友可以參考下
2016-05-05
小議Javascript中的this指針
在全局執(zhí)行環(huán)境中使用this，標識Global對象，在瀏覽器中就是window對象。
2010-03-03
老生常談JS中的繼承及實現(xiàn)代碼
這篇文章主要介紹了js中的繼承及實現(xiàn)代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-07-07
node.js Web應用框架Express入門指南
這篇文章主要介紹了node.js Web應用框架Express入門指南,從安裝到各種技術(shù)的應用,都進行了講解,是一篇不錯的Express入門教程,需要的朋友可以參考下
2014-05-05