<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>表单和图片</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body style="margin:50px;"> <!--form 表单 from-group 表单群组 form-control 表单基本样式 from-inline 内联表单样式 让所有表单样式居于一行 input-group input群组 input-group-addon表单合并 --> <form class="form-inline" > <div class="form-group"> <label>电子邮箱</label> <input type="email" class="form-control" placeholder="请输入您的电子邮箱"/> </div> <div class="form-group"> <label>密码</label> <input type="password" class="form-control" placeholder="请输入您的密码"/> </div> <div class="input-group"> <input type="text" class="form-control" placeholder="请输入价格" /> <div class="input-group-addon">.00</div> <div class="input-group-addon">$</div> </div> </form> <!--表单水平排列 form-horizontal col-sm-2 格栅系统 --> <form class="form-horizontal" > <div class="form-group"> <label class="col-sm-2 control-label">电子邮箱</label> <div class="col-sm-10"> <input type="email" class="form-control" placeholder="请输入您的电子邮箱"/> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">密码</label> <div class="col-sm-10"> <input type="password" class="form-control" placeholder="请输入您的密码"/> </div> </div> <!-- checkbox 选择样式 disabled 禁用 checkbox-inline 内联一行 --> <div class="checkbox"> <label class="checkbox-inline"> <input type="checkbox"/>体育 </label> </div> <div class="checkbox disabled"> <label class="checkbox-inline"> <input type="checkbox"/>数学 </label> </div> <label class="checkbox-inline"> <input type="checkbox"/>体育 </label> <label class="checkbox-inline"> <input type="checkbox"/>数学 </label> </form> <!-- form-control --> <select class="form-control"> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> <option value="">5</option> </select> <!-- 校验状态 has-error 错误状态 has-success 成功状态 has-warning 警告状态 --> <form> <div class="form-group has-success" > <label class="control-label">表单</label> <input type="email" class="form-control" placeholder="请输入电子邮箱"/> </div> </form> <!-- 校验状态 glyphicon-ok 成功图标 glyphicon-warning-sign 警告图标 glyphicon-remove 错误图标 --> <form> <div class="form-group has-success has-feedback" > <label class="control-label">表单</label> <input type="email" class="form-control" placeholder="请输入电子邮箱"/> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> </form> <!--控制大小 input-lg input-sm--> <input type="text" class="form-control input-lg" /> <input type="text" class="form-control input-sm" /> <!-- 图片 img-rounded 圆角矩形 img-circle 圆 img-thumbnail 缩略图 img-responsive 响应式 --> <img src="img/1.png" alt="图片" class="img-rounded" /> <img src="img/1.png" alt="图片" class="img-circle" /> <img src="img/1.png" alt="图片" class="img-thumbnail img-responsive" /> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>