<!doctype html> <html> <head> <meta charset="utf-8"> <title>表格</title> <meta content="width=device-width, initial-scale=1"> <link href="https://www.jb51.net/css/bootstrap.css"> <script src="https://www.jb51.net/js/jquery-1.9.0.min.js"></script> <script src="https://www.jb51.net/js/bootstrap.min.js"></script> </head> <body> <h1>条纹状表格</h1> <table> <thead> <tr> <th>编号</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>带边框表格 鼠标悬停 紧缩表格</h1> <table> <thead> <tr> <th>编号</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>状态类</h1> <table> <thead> <tr> <th>编号</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> </body> </html>
2.表单
<!doctype html> <html> <head> <meta charset="utf-8"> <title>表单</title> <meta content="width=device-width, initial-scale=1"> <link href="https://www.jb51.net/css/bootstrap.css"> <script src="https://www.jb51.net/js/jquery-1.9.0.min.js"></script> <script src="https://www.jb51.net/js/bootstrap.min.js"></script> </head> <body> <div> <input type="text" placeholder="请输入"> <div> <label>姓名：</label> <input type="text" placeholder="input-lg"> <span></span> </div> <div> <label>姓名：</label> <input type="text" placeholder="input-sm"> <span></span> </div> <hr/> <h3>文本域</h3> <textarea rows="5" ></textarea> <h3>多选和单选框</h3> 多选:<br/> <div> <label> <input type="checkbox" value=""/> 看电影 </label> </div> <div> <label> <input type="checkbox" value=""/> 看小说 </label> </div> <div> <label> <input type="checkbox" value=""/> 玩游戏 </label> </div> 单选:<br/> <div> <label> <input type="radio" value="保密"/>保密 </label> </div> <div> <label> <input type="radio" value="男"/>男 </label> </div> <div> <label> <input type="radio" value="女"/>女 </label> </div> <br/> 一行显示：<br/> 多选:<br/> <div> <label> <input type="checkbox" value=""/> 看电影 </label> </div> <div> <label> <input type="checkbox" value=""/> 看小说 </label> </div> <div> <label> <input type="checkbox" value=""/> 玩游戏 </label> </div> 单选:<br/> <div> <label> <input type="radio" value="保密"/>保密 </label> </div> <div> <label> <input type="radio" value="男"/>男 </label> </div> <div> <label> <input type="radio" value="女"/>女 </label> </div> 下拉列表： <select> <option>请选择</option> <option>技术部</option> <option>研发部</option> <option>后勤部</option> </select> </div> </body> </html>
登录1
