发布于 2017-06-04 12:44:21 | 197 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Bootstrap v3教程，程序狗速度看过来！
Bootstrap Web前端CSS框架
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。
本文实例为大家分享了bootstrap表单的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>表单和图片</title>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" rel="external nofollow" >
<link rel="stylesheet" href="css/main.css" rel="external nofollow" >
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
</head>
<body>
<form>
<label>用户名：</label>
<input type="text" placeholder="请输入用户名">
<label>密码：</label>
<input type="password" placeholder="请输入密码">
</form>
<form>
<label>用户名：</label>
<input type="text" placeholder="请输入用户名" class="form-control">
<label>密码：</label>
<input type="password" placeholder="请输入密码" class="form-control">
</form>
<!--基本表单-->
<form>
<div class="form-group">
<label>用户名：</label>
<input type="text" placeholder="请输入用户名" class="form-control">
</div>
<div class="form-group">
<label>密码：</label>
<input type="password" placeholder="请输入密码" class="form-control">
</div>
</form>
<!--内联表单-->
<form class="form-inline"><!--当屏幕小于768时，变为两行-->
<div class="form-group">
<label>用户名：</label>
<input type="text" placeholder="请输入用户名" class="form-control">
</div>
<div class="form-group">
<label>密码：</label>
<input type="password" placeholder="请输入密码" class="form-control">
</div>
</form>
<!--加入input-group-addon-->
<form class="form-inline">
<div class="form-group">
<label>用户名：</label>
<input type="text" placeholder="请输入用户名" class="form-control">
</div>
<div class="form-group">
<label>密码：</label>
<input type="password" placeholder="请输入密码" class="form-control">
</div>
<div class="input-group">
<div class="input-group-addon">￥</div>
<input type="number" placeholder="请输入整数" class="form-control">
<div class="input-group-addon">元</div>
</div>
</form>
<!--水平表单-->
<form class="form-horizontal"><!--当屏幕小于768时，变为两行-->
<div class="form-group">
<div class="col-sm-2 control-label">
<label>用户名：</label>
</div>
<div class="col-sm-10">
<input type="text" placeholder="请输入用户名" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label">
<label>密码：</label>
</div>
<div class="col-sm-10">
<input type="password" placeholder="请输入密码" class="form-control">
</div>
</div>
</form>
<!--文本域-->
<form>
<textarea rows="3"></textarea>
</form>
<form>
<div class="form-group">
<label>文本域</label>
<textarea rows="3" class="form-control"></textarea>
</div>
</form>
<!--复选框-->
<form>
<input type="checkbox">体育
<input type="checkbox">音乐
<label>
<input type="checkbox">体育
</label>
<label>
<input type="checkbox">音乐
</label>
<!--基本复选框和复选框设置禁用-->
<div class="checkbox">
<label>
<input type="checkbox">体育
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">音乐
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" disabled>爱好
</label>
</div>
<!--内联复选框--><!--复选框用法和单选框一样的-->
<label class="checkbox-inline">
<input type="checkbox">体育
</label>
<label class="checkbox-inline">
<input type="checkbox">音乐
</label>
<label class="checkbox-inline disabled">
<input type="checkbox" disabled>爱好
</label>
</form>
<!--下拉框-->
<form>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</form>
<!--校验状态-->
<form>
<div class="form-group has-success has-feedback">
<label class="control-label">用户名：</label>
<input type="text" placeholder="请输入用户名" class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group">
<label>密码：</label>
<input type="password" placeholder="请输入密码" class="form-control">
</div>
</form>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/main.js"></script>
</body>
</html> 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phperz。