Bootstrap 第4章 表单和图片
程序员文章站
2024-02-02 13:38:10
...
<!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>
效果图：
下一篇： 安装谷歌浏览器