<!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"> <!-- 视口 --> <title>bootstrap表单</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <style> .glyphicon-search{ font-size: 13px; color: gold; /*在修改glyphicons的时候, 类名可以省却 glyphicons, 直接填入需要更改式样的图片名称.(glyphicon-search) */ } #username022{ color: violet; } .glyphicon-home{ color:coral; } </style> </head> <body> <h2>表单</h2> <div class="container"> <div class="row"> <form action=""> <div class="form-group"> <!-- form-control 能够使输入框占据父集100%,类似于, button-block --> <label for="username"><span class="glyphicon glyphicon-user"></span>用户名:form-control</label> <input type="text" name="" id="username" class="form-control"> <!-- 此处可以不用group包裹可达到同样效果, input分别使用group包裹更稳定. --> <!-- <label for="password">密码:form-control</label> <input type="text" name="" id="password" class="form-control"> --> </div> <div class="form-group"> <label for="password"><span class="glyphicon glyphicon-asterisk"></span>密码:form-control</label> <input type="password" name="" id="password" class="form-control"> </div> </form> <br> <br> <form action="" class="form-inline"> <!-- form-inline 增加表单格式到form标签. --> <div class="form-group"> <label for="username02"><span id="username022" class="glyphicon glyphicon-asterisk"></span>用户名:form-inline</label> <input type="text" name="" id="username02" class="form-control"> </div> <div class="form-group"> <label for="password02">密码:form-inline</label> <input type="password" name="" id="password02" class="form-control"> </div> </form> <br> <br> <form action="" class="form-horizontal"> <!-- form-horizontal . 水平排列表格, 使表单元素可分row大小 --> <div class="form-group"> <label for="username02" class="col-md-2">用户名:form-inline</label> <div class="col-md-4"> <!-- 在表单中, 所有的input输入框,都需要再加一层包裹 不然大小分配对齐无用 --> <input type="text" name="" id="username02" class="form-control col-md-4"> </div> </div> <div class="form-group"> <label for="password02" class=" col-md-2">密码:form-inline</label> <div class="col-md-4"> <input type="password" name="" id="password02" class="form-control"> </div> </div> </form> <br> <form action="" class="form-horizontal"> <div class="form-group form-group-lg"> <label for="username02" class="col-md-2"><span class="glyphicon glyphicon-home"></span>地址:form-group-lg</label> <div class="col-md-4"> <input type="text" name="" id="username02" class="form-control col-md-4"> </div> </div> <div class="form-group form-group-md"> <label for="password02" class=" col-md-2">邮编:form-group-md</label> <div class="col-md-4"> <input type="password" name="" id="password02" class="form-control"> </div> </div> <div class="form-group form-group-xs"> <label for="password02" class=" col-md-2"><span class="glyphicon glyphicon-phone"></span>手机号:form-group-xs</label> <div class="col-md-4"> <input type="password" name="" id="password02" class="form-control"> </div> </div> </form> <form> <div class="input-group"> <!-- input-group 组件, 能够使两个不同因素叠加在一起 --> <input type="text" id="email" class="form-control col-md-3"> <span for="email" class="input-group-addon">@</span> <input type="text" id="email" class="form-control"> </div> <br> </form> <form action=""> <div class="input-group"> <input type="text" class="form-control"> <span class="btn btn-default input-group-addon">搜索</span> <span class="btn btn-default input-group-addon">搜索</span> </div> </form> <br> <form action=""> <div class="input-group"> <input type="text" class="form-control"> <span class="input-grop-btn"> <!-- 在使用按钮配合input框时候, 可以使用inputgroup-addon,也可以通过创建input-group-btn组,在中间增添按钮 --> <button class="btn btn-info">搜索</button> <!-- 通常做按钮使用三种标签: input , a , button --> <button class="btn btn-info"> <span class="glyphicon glyphicon-search"></span> <!-- glyphicon 字形图标 可以直接通过style进行修改式样. --> </button> </span> </div> </form> <br> </div> </div> </body> </html>