Bootstrap

最新推荐文章于 2024-08-22 17:38:39 发布

77不吃香菜.

最新推荐文章于 2024-08-22 17:38:39 发布

阅读量18

点赞数

文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/luna_H/article/details/133848674

版权

input-group子类排列

input-group-addon 存放一些符号或单位

form-horizontal清除了内边距

textarea文本域

rows默认展示的行数

disabled禁止样式

multiple 默认展示下拉框所有选项

form-control-static静态类

readonly只读状态

表单的颜色
has-success
has-error
has-warning在control-label、.form-control 和 .help-block才生效

form-control-feedback

input-lg input-sm控制input大小

btn设置为按钮 btn-default添加样式的颜色

active激活状态

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="../../bootstrap-3.3.7-dist/css/bootstrap.css"/>
		<title></title>
	</head>
	<body style="height: 2000px;">
		<form>
			<!-- input-group子类排列 -->
			<!-- input-group-addon 存放一些符号或单位 -->
			<div class="input-group">
			  <div class="input-group-addon">￥</div>
			  <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
			  <div class="input-group-addon">元</div>
			</div>
		</form>
		<!-- form-horizontal清除了内边距 -->
		<form class="form-horizontal">
		  <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
		    <div class="col-sm-10">
		      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
		    </div>
		  </div>
		</form>
		<hr >
		<!-- textarea文本域 -->
		<!-- rows默认展示的行数 -->
		<textarea class="form-control" rows="3"></textarea>
		<!-- disabled禁止样式 -->
		<div class="checkbox disabled">
		  <label>
		    <input type="checkbox" value="" disabled>
		    Option two is disabled
		  </label>
		</div>
		<input type="text" class="form-control" disabled>
		<hr >
		<!-- multiple 默认展示下拉框所有选项 -->
		<select multiple class="form-control">
		  <option>1</option>
		  <option>2</option>
		  <option>3</option>
		  <option>4</option>
		  <option>5</option>
		</select>
		<hr >
		<form class="form-horizontal">
		  <div class="form-group">
		    <label class="col-sm-2 control-label">Email</label>
		    <div class="col-sm-10">
				<!-- form-control-static静态类 -->
		      <p class="form-control-static">email@example.com</p>
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
		    <div class="col-sm-10">
		      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
		    </div>
		  </div>
		</form>
		<!-- readonly只读状态 -->
		<input type="text" class="form-control" readonly name="" id="" value="" />
		<!-- 表单的颜色
		 has-success
		 has-error
		 has-warning在control-label、.form-control 和 .help-block才生效-->
		
		<div class="form-group has-success">
		  <label class="control-label" for="inputSuccess1">Input with success</label>
		  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
		  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
		</div>
		<hr >
		<div class="form-group has-success has-feedback">
		  <label class="control-label" for="inputSuccess2">Input with success</label>
		  <input style="border-radius: 20px;" type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
		  <span class="glyphicon glyphicon-search form-control-feedback" style="left: 0;" aria-hidden="true"></span>
		  <!-- form-control-feedback -->
		  <span id="inputSuccess2Status" class="sr-only">(success)</span>
		</div>
		<!-- input-lg  input-sm控制input大小 -->
		<input type="text" class="form-control input-lg" name="" id="" value="" />
		<input type="text" class="form-control" name="" id="" value="" />
		<input type="text" class="form-control input-sm" name="" id="" value="" />
		<hr >
		<input type="button" name="" id="" value="按钮1" />
		<button type="button">按钮2</button>
		<div class="btn btn-default">按钮3</div>
		<a href="" class="btn btn-default">按钮4</a>
		<!-- btn设置为按钮  btn-default添加样式的颜色 -->
		<div class="btn btn-primary">按钮5</div>
		<div class="btn btn-success">按钮5</div>
		<div class="btn btn-info">按钮5</div>
		<div class="btn btn-lg btn-block btn-warning">按钮5</div>
		<div class="btn btn-sm btn-danger">按钮5</div>
		<div class="btn btn-xs btn-link">按钮5</div>
		<!-- active激活状态 -->
		<div class="btn btn-primary active" disabled>按钮6</div>
		
	</body>
</html>

77不吃香菜.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Bootstrap

has-warning在control-label、.form-control 和 .help-block才生效。btn设置为按钮 btn-default添加样式的颜色。input-group-addon 存放一些符号或单位。input-lg input-sm控制input大小。form-control-static静态类。multiple 默认展示下拉框所有选项。input-group子类排列。readonly只读状态。textarea文本域。rows默认展示的行数。active激活状态。
复制链接

扫一扫