<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">主機(jī)名</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>選擇相關(guān)表</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表單布局樣式代碼的相關(guān)知識(shí)，希望對(duì)大家有所幫助！

您可能感興趣的文章:

相關(guān)文章

通過JavaScript控制字體大小的代碼
這個(gè)腳本會(huì)改變一個(gè)段落內(nèi)的任何文字的字體大?。?lt;P>標(biāo)簽）。如果你想改變其他標(biāo)簽內(nèi)的文本編輯的getElementsByTagName（"P"）;的一部分。
2011-10-10
js實(shí)現(xiàn)格式化金額,字符,時(shí)間的方法
這篇文章主要介紹了js實(shí)現(xiàn)格式化金額,字符,時(shí)間的方法,實(shí)例分析了javascript轉(zhuǎn)換金額、字符、日期等的常用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
利用JS打造黑客代碼雨效果
window.onload()方法用于在網(wǎng)頁加載完畢后立刻執(zhí)行的操作，即當(dāng) HTML 文檔加載完畢后，立刻執(zhí)行某個(gè)方法。本文將用window.onload()打造黑客代碼雨效果，感興趣的可以嘗試一下
2022-06-06
weakMap為什么是弱引用原理
這篇文章主要為大家介紹了weakMap為什么是弱引用原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
js字符串操作方法實(shí)例分析
這篇文章主要介紹了js字符串操作方法,實(shí)例分析了javascript中slice、substr及substring等方法的使用技巧,需要的朋友可以參考下
2015-05-05
JavaScript通過mouseover()實(shí)現(xiàn)圖片變大效果的示例
下面小編就為大家分享一篇JavaScript通過mouseover()實(shí)現(xiàn)圖片變大效果的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助
2017-12-12
javascript事件冒泡實(shí)例分析
這篇文章主要介紹了javascript事件冒泡實(shí)原理,實(shí)例分析了事件冒泡的定義及實(shí)現(xiàn)技巧,需要的朋友可以參考下
2015-05-05
js實(shí)現(xiàn)本地持久化存儲(chǔ)登錄注冊(cè)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)本地持久化存儲(chǔ)登錄注冊(cè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
JavaScript 注冊(cè)事件代碼
最基本的寫法，然后實(shí)現(xiàn)Js和HTML的分離，然后又實(shí)現(xiàn)對(duì)同一個(gè)元素注冊(cè)多個(gè)事件，期間，我們發(fā)現(xiàn)注冊(cè)事件的兼容性問題。最后我們對(duì)注冊(cè)事件的方法進(jìn)行封裝，方便以后使用。
2011-01-01
利用js來實(shí)現(xiàn)縮略語列表、文獻(xiàn)來源鏈接和快捷鍵列表
本文主要對(duì)利用js來實(shí)現(xiàn)縮略語列表、文獻(xiàn)來源鏈接和快捷鍵列表的方法進(jìn)行詳細(xì)分析介紹。具有很好的參考價(jià)值，需要的朋友一起來看下吧
2016-12-12