<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>表格与表单</title> <link rel="stylesheet" href="lib/dist/css/bootstrap.css"> </head> <body> <xmp> 主要就是表单 1.使用bootstrap时首先是定义.container（或是使用.container-fluid 用于100%宽度情况下），使用栅格布局时便是需要先定义.row，这是前提，很重要 <div class="container container-fluid"> <div class="row"> </div> </div> 2.表格（较简单） table-striped:隔行显示不同样式 table-responsize:响应式表格 </xmp> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <table class="table table-responsive table-hover table-bordered table-striped"> <caption>Test</caption> <tr class="info"> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> </tr> </table> 3.三种表单：垂直表单（最常用），内联表单，水平表单 <form> <h3>1.默认垂直表单</h3> <div class="form-group"> <label for="id-name">输入框</label> <input type="text" id="id-name" class="form-control"> </div> <div class="form-group"> <label for="pass">密码框</label> <input type="password" id="pass" class="form-control"> </div> <div class="form-group"> <label for="selector">下拉框</label> <select name="" id="selector" class="form-control"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> 复选框和单选框比较特殊，不能用上面方式来写 是用label包裹住input,最外面套个div.checkbox，注意input不用加class <div class="checkbox"> <label> <input type="checkbox" name="check">A </label> </div> <div class="checkbox"> <label> <input type="checkbox" name="check">B </label> </div> 同理，单选框一样，只需要将class改为 .radio 以上复选单选框默认是垂直排列，要将他们设为水平排列，则使用更改class为 .checkbox-inline/radio-inline <h3>2.内联表单</h3> 内联表单: 所有的表单元素全部在同一行显示,通常来说不需要标签说明,必须在sm或以上屏幕才有效(> 768px) 只需更改为form.form-inline, 然后将label的标签隐藏就行了 <form action="" class="form-inline"> <div class="form-group"> <label for="id-name" class="sr-only">输入框</label> <input type="text" id="id-name" class="form-control"> </div> <div class="form-group"> <label for="pass" class="sr-only">密码框</label> <input type="password" id="pass" class="form-control"> </div> </form> <h3>3.水平表单</h3> 水平表单就是给表单做个排版，让label和input在同行显示 1.要用 .form-horizontal 2.在input上套个div,用来排版 3.给label加上class="col-md-2 control-label" 注意.control-label不要忘了 <form action="" class="form-horizontal"> <div class="form-group"> <label for="id-name" class="col-md-2 control-label">输入框1</label> <div class="col-md-10"> <input type="text" id="id-name" class="form-control"> </div> </div> <div class="form-group"> <label for="test" class="col-md-2 control-label">输入框2</label> <div class="col-md-10"> <input type="text" id="test" class="form-control"> </div> </div> </form> </form> </div> </div> </div> 表单中两种隐藏提示文字手段 1.<label class="sr-only">用.sr-only属性，这个属性应该比较通用</label> 2.<input type="text" aria-label="隐藏信息"> </body> </html>
点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
