<!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 class="form-inline"> 内联表单，让所有表单元素居于一行 --> <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="请输入您的电子邮件"></input> </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="请输入您的密码"></input> </div> </div> <div class="checkbox"> <label> <input type="checkbox">体育</input> </label> </div> <div class="checkbox"> <label> <input type="checkbox" disabled>音乐</input> </label> </div> <label class="checkbox-inline"> <input type="checkbox">体育</input> </label> <label class="checkbox-inline"> <input type="checkbox" disabled>音乐</input> </label> <label class="radio-inline disabled"> <input type="radio" disabled>男</input> </label> <select class="form-control"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </form> <form> <div class="form-group has-success has-feedback"> <label class="control-label">电子邮件</label> <input type="email" class="form-control" placeholder="请输入您的电子邮件"></input> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> <div class="form-group"> <label>密码</label> <input type="password" class="form-control input-lg" placeholder="请输入您的密码"></input> <input type="password" class="form-control input-lg" placeholder="请输入您的密码"></input> </div> <div class="input-group"> <div class="input-group-addon">￥</div> <input type="text" class="form-control" placeholder="请输入您的价格"></input> <div class="input-group-addon">.00</div> </div> </form> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
效果图：
<!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;"> <img src="img/aaa.jpg" class="img-rounded" alt="图片"> <img src="img/aaa.jpg" class="img-circle" alt="图片"> <img src="img/aaa.jpg" class="img-thumbnail img-responsive" alt="图片"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
效果图：