分享Bootstrap簡(jiǎn)單表格、表單、登錄頁面
更新時(shí)間：2017年08月04日 14:33:39 作者：朝花夕拾y
本文給大家分享Bootstrap簡(jiǎn)單表格、表單、登錄頁面的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧
1.表格
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>條紋狀表格</h1>
<table class="table table-striped">
<thead>
<tr>
<th>編號(hào)</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>八戒</td>
<td>男</td>
<td>1000</td>
<td>高老莊</td>
</tr>
<tr>
<td>1002</td>
<td>悟空</td>
<td>男</td>
<td>2000</td>
<td>水簾洞</td>
</tr> <tr>
<td>1001</td>
<td>八戒</td>
<td>男</td>
<td>1000</td>
<td>高老莊</td>
</tr>
<tr>
<td>1002</td>
<td>悟空</td>
<td>男</td>
<td>2000</td>
<td>水簾洞</td>
</tr> <tr>
<td>1001</td>
<td>八戒</td>
<td>男</td>
<td>1000</td>
<td>高老莊</td>
</tr>
</tbody>
</table>
<h1>帶邊框表格 鼠標(biāo)懸停 緊縮表格</h1>
<table class="table table-bordered table-hover table-condensed">
<thead>
<tr>
<th>編號(hào)</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>八戒</td>
<td>男</td>
<td>1000</td>
<td>高老莊</td>
</tr>
<tr>
<td>1002</td>
<td>悟空</td>
<td>男</td>
<td>2000</td>
<td>水簾洞</td>
</tr> <tr>
<td>1001</td>
<td>八戒</td>
<td>男</td>
<td>1000</td>
<td>高老莊</td>
</tr>
<tr>
<td>1002</td>
<td>悟空</td>
<td>男</td>
<td>2000</td>
<td>水簾洞</td>
</tr> <tr>
<td>1001</td>
<td>八戒</td>
<td>男</td>
<td>1000</td>
<td>高老莊</td>
</tr>
</tbody>
</table>
<h1>狀態(tài)類</h1>
<table class="table ">
<thead>
<tr class="active">
<th>編號(hào)</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1001</td>
<td>八戒</td>
<td>男</td>
<td>1000</td>
<td>高老莊</td>
</tr>
<tr class="info">
<td>1002</td>
<td>悟空</td>
<td>男</td>
<td>2000</td>
<td>水簾洞</td>
</tr>
<tr class="warning">
<td>1001</td>
<td>八戒</td>
<td>男</td>
<td>1000</td>
<td>高老莊</td>
</tr>
<tr class="danger">
<td>1002</td>
<td>悟空</td>
<td>男</td>
<td>2000</td>
<td>水簾洞</td>
</tr> <tr>
<td>1001</td>
<td>八戒</td>
<td>男</td>
<td>1000</td>
<td>高老莊</td>
</tr>
</tbody>
</table>
</body>
</html>
2.表單
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表單</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<input type="text" name="" class=" form-control" placeholder="請(qǐng)輸入">
<div class="form-group has-success has-feedback ">
<label class="control-label">姓名：</label>
<input type="text" name="" class=" form-control input-lg " placeholder="input-lg">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-success has-feedback ">
<label class="control-label">姓名：</label>
<input type="text" name="" class=" form-control input-sm " placeholder="input-sm">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<hr/>
<h3>文本域</h3>
<textarea class="form-control" rows="5" ></textarea>
<h3>多選和單選框</h3>
多選:<br/>
<div class="checkbox">
<label>
<input type="checkbox" value=""/>
看電影
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value=""/>
看小說
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value=""/>
玩游戲
</label>
</div>
單選:<br/>
<div class="radio">
<label>
<input type="radio" name="sex" value="保密"/>保密
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="sex" value="男"/>男
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="sex" value="女"/>女
</label>
</div>
<br/>
一行顯示：<br/>
多選:<br/>
<div class=" checkbox-inline">
<label>
<input type="checkbox" value=""/>
看電影
</label>
</div>
<div class="checkbox-inline">
<label>
<input type="checkbox" value=""/>
看小說
</label>
</div>
<div class="checkbox-inline">
<label>
<input type="checkbox" value=""/>
玩游戲
</label>
</div>
單選:<br/>
<div class="radio-inline">
<label>
<input type="radio" name="sex" value="保密"/>保密
</label>
</div>
<div class="radio-inline">
<label>
<input type="radio" name="sex" value="男"/>男
</label>
</div>
<div class="radio-inline">
<label>
<input type="radio" name="sex" value="女"/>女
</label>
</div>
下拉列表：
<select class="form-control">
<option>請(qǐng)選擇</option>
<option>技術(shù)部</option>
<option>研發(fā)部</option>
<option>后勤部</option>
</select>
</div>
</body>
</html>
登錄1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登錄</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script src="js/jQuery-1.9.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="Container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<h1 class="page-header">用戶登錄</h1>
<form role="form">
<div class="form-group">
<label for="userId">用戶名：</label>
<input type="text" class="form-control" placeholder="請(qǐng)輸入賬號(hào)" id="userId" name="userId">
</div>
<div class="form-group">
<label for="password">密 碼：</label>
<input type="password" class="form-control" placeholder="請(qǐng)輸入密碼" id="password" name="password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"/>記住密碼
</label>
<br/>
<input type="submit" value="登錄" class="btn"/>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登錄</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1 class="page-header">用戶登錄</h1>
<form class="form-inline" role="form">
<div class="form-group">
<div class="input-group" >
<div class="input-group-addon">@</div>
<input type="text" class="form-control" placeholder="請(qǐng)輸入賬號(hào)" id="userId" name="userId">
</div>
</div>
<div class="form-group">
<label for="password" class="sr-only">密 碼：</label>
<input type="password" class="form-control" placeholder="請(qǐng)輸入密碼" id="password" name="password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"/>記住密碼
</label>
<input type="submit" value="登錄" class="btn"/>
</div>
</form>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登錄</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class=" container">
<div class="row">
<div class="col-md-6">
<h2>用戶登錄</h2>
<form class="form-horizontal" role="form">
<div class="form-group has-success ">
<label class="col-md-3 control-label" for="userId">賬號(hào)：</label>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="請(qǐng)輸入賬號(hào)" id="userId" name="userId">
</div>
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-error">
<label class="col-md-3 control-label" for="password">密碼：</label>
<div class="col-md-6">
<input type="password" class="form-control" placeholder="請(qǐng)輸入密碼" id="password" name="password">
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-3">
<input type="submit" value="登錄" class="btn"/>
<input type="reset" value="重置" class="btn"/>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登錄</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class=" container">
<div class="row">
<div class="col-md-6">
<h2>用戶登錄</h2>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-md-3 control-label" for="userId">賬號(hào)：</label>
<div class="col-md-6">
<p class=" form-control-static">admin123456</p>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="password">密碼：</label>
<div class="col-md-6">
<p class="form-control-static">123456</p>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的分享Bootstrap簡(jiǎn)單表格、表單、登錄頁面，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- Bootstrap實(shí)現(xiàn)登錄校驗(yàn)表單(帶驗(yàn)證碼)
- 使用BootStrap實(shí)現(xiàn)用戶登錄界面UI
- jfinal與bootstrap的登錄跳轉(zhuǎn)實(shí)戰(zhàn)演習(xí)
- php bootstrap實(shí)現(xiàn)簡(jiǎn)單登錄
- Bootstrap彈出帶合法性檢查的登錄框?qū)嵗a【推薦】
- bootstrap flask登錄頁面編寫實(shí)例
- PHP實(shí)現(xiàn)登錄注冊(cè)之BootStrap表單功能
- 基于Bootstrap實(shí)現(xiàn)下拉菜單項(xiàng)和表單導(dǎo)航條(兩個(gè)菜單項(xiàng)，一個(gè)下拉菜單和登錄表單導(dǎo)航條)
- Bootstrap中文本框的寬度變窄并且加入一副驗(yàn)證碼圖片的實(shí)現(xiàn)方法
- Bootstrap實(shí)現(xiàn)前端登錄頁面帶驗(yàn)證碼功能完整示例
相關(guān)文章
原生JavaScript輪播圖實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了原生JavaScript輪播圖實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
詳細(xì)總結(jié)Javascript中的焦點(diǎn)管理
相信大家都知道焦點(diǎn)作為javascript中的一個(gè)重要功能，基本上和頁面交互都離不開焦點(diǎn)。但卻少有人對(duì)焦點(diǎn)管理系統(tǒng)地做總結(jié)歸納。本文就javascript中的焦點(diǎn)管理作詳細(xì)介紹，有需要的朋友們可以參考借鑒。2016-09-09
用js實(shí)現(xiàn)鍵盤方向鍵翻頁功能的代碼...2007-06-06
javascript實(shí)現(xiàn)獲取瀏覽器版本、操作系統(tǒng)類型
這篇文章主要給大家分享一段javascript實(shí)現(xiàn)獲取瀏覽器版本、操作系統(tǒng)類型的封裝好的代碼，使用非常方便，也很實(shí)用，推薦給大家。2015-01-01
這篇文章主要介紹了js格式化時(shí)間的方法，對(duì)javascript時(shí)間格式化的方法進(jìn)行了總結(jié)，感興趣的小伙伴們可以參考一下2015-12-12
自己使用js/jquery寫的一個(gè)定制對(duì)話框控件
自己做一個(gè)通用的控件，雖然不是絕對(duì)通用啦，但在我這個(gè)項(xiàng)目里還是可以隨意調(diào)用的，思想的話也可以借鑒到別的項(xiàng)目中2014-05-05
本文主要介紹了Webpack常見使用配置小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
詳解JavaScript如何優(yōu)雅地實(shí)現(xiàn)創(chuàng)建多維數(shù)組
多維數(shù)組的意思是指三維或者三維以上的數(shù)組。這篇文章將通過示例為大家詳細(xì)講解一下JavaScript如何實(shí)現(xiàn)優(yōu)雅地創(chuàng)建多維數(shù)組，需要的可以參考一下2022-07-07
js實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
記錄我看到之后，不得不贊的代碼片段。本貼板內(nèi)容將不斷更新，歡迎關(guān)注2013-06-06