bootStrap表单元素

最新推荐文章于 2024-05-07 17:18:59 发布

aqzengkuasheng

最新推荐文章于 2024-05-07 17:18:59 发布

阅读量469

点赞数 1

分类专栏：前端框架文章标签： bootstrap html javascript

本文链接：https://blog.csdn.net/aqzengkuasheng/article/details/123018344

版权

前端框架专栏收录该内容

10 篇文章 0 订阅

订阅专栏

表单
1.文本框
.form-control 表单元素的样式
表单控件的大小 .input-lg .input -sm
2.下拉框
.form-control 表单元素的样式
multiple=“multiple” 表单元素的样式
3.文本域
.form-control表单元素的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css"/>
	</head>
	<body>
		<!-- 
		表单 
		   1.文本框
		     .form-control 表单元素的样式
			 表单控件的大小 .input-lg  .input -sm
		   2.下拉框
			 .form-control 表单元素的样式
			  multiple="multiple" 表单元素的样式
			3.文本域
			 .form-control表单元素的样式
		-->
		<!-- 文本框 -->
		<input type="text" /><br>
		<!-- 下拉框 -->
		<select>
			<option>请选择城市</option>
			<option>上海</option>
			<option>北京</option>
		</select><br>
		<textarea></textarea>
		
		<hr >
		<!-- bootStrap下的文本框 -->
		<div id="" class="row">
			<div id="" class="col-md-3">
				<input type="text" class="form-control input-lg" /><br>
				<input type="text" class="form-control input-sm" /><br>
			</div>
		</div>
		
		<!-- bootStrap下的下拉框 -->
		<div id="" class="row">
			<div id="" class="col-md-3 ">
				<!-- 这个地方添加multiple是设置可以多选 -->
				<select class="form-control" multiple="multiple">
					<option>请选择城市</option>
					<option>上海</option>
					<option>北京</option>
				</select><br>
			</div>
		</div>
		
		
		<!-- bootStrap下的文本域 -->
		<div id="" class="row">
			<div id="" class="col-md-3 ">
				<textarea class="form-control"></textarea>
			</div>
	</body>
</html>

		4.复选框
		 垂直显示 .checkbox
		 水平显示 .checkbox-inline
		5.单选框  要主要加name属性，分组
		 垂直显示 .radio
		 水平显示 .radio-inline

			<!-- 原生的复选框、单选框 -->
		<input style="margin-left: 50px;" type="checkbox" name="hobby">唱歌<br>
		<input style="margin-left: 50px;" type="checkbox" name="hobby">跳舞<br>
			<input style="margin-left: 50px;" type="radio" name="six">男
			<input style="margin-left: 50px;" type="radio" name="six">女 
			<hr >
			<!-- bootStrap下的复选框-->
			<div class="row">
			<div class="col-md-3">
			    <div class="checkbox">
			        <label><input type="checkbox">游戏</label>
			    </div>
			    <div class="checkbox">
			        <label><input type="checkbox" >学习</label>
			    </div>
			</div>
			</div>
			
			<!-- 这个莫名其妙有问题 -->
<!-- 			<div class="row">
			<div class="col-md-3">
					<div class="checkbox">
						<label><input type="checkbox">唱歌</label>
					</div>
					<div class="checkbox">
						<label><input type="checkbox">跳舞</label>
					</div>
			</div>
			</div> -->
		
			
			<div class="row">
			<div class="col-md-3">
			    <div class="checkbox">
			        <label><input type="checkbox" >游戏</label>
			    </div>
			    <div class="checkbox">
			        <label><input type="checkbox" >学习</label>
			    </div>
			</div>
			</div>
			
			<!--水平方向 -->
			<div class="row">
			<div class="col-md-3">
			    <div class="checkbox-inline">
			        <label><input type="checkbox" >游戏</label>
			    </div>
			    <div class="checkbox-inline">
			        <label><input type="checkbox" >学习</label>
			    </div>
			</div>
			</div>
			
			<!-- 单选框 -->
			<!-- 垂直方向 -->
			<div class="row">
			<div class="col-md-3">
			    <div class="radio">
			        <label><input type="radio" name="six">男</label>
			    </div>
			    <div class="radio">
			        <label><input type="radio" name="six" >女</label>
			    </div>
			</div>
			</div>
			
			<!-- 竖直方向 -->
			
			<div class="row">
			<div class="col-md-3">
			    <div class="radio-inline">
			        <label><input type="radio" name="six">男</label>
			    </div>
			    <div class="radio-inline">
			        <label><input type="radio" name="six">女</label>
			    </div>
			</div>
			</div>

		     6.按钮
		       1.使用按钮
			     基础样式： .btn 
				 附加样式：btn-primary btn-info btn-success btn-warning btn-danger btn-link btn-default
				 通过按钮样式设置其他元素为按钮样式
				 通过disabled属性使得按钮禁用

 <button class="btn">按钮</button>
			 <button class="btn btn-primary">按钮</button>
			 <button class="btn btn-info">按钮</button>
			 <button class="btn btn-success">按钮</button>
			 <button class="btn btn-warning">按钮</button>
			 <button class="btn btn-danger">按钮</button>
			 <button class="btn btn-link">按钮</button>
			 <button class="btn btn-default">按钮</button>
			 
			 <hr >
			 <!--
			  通过按钮样式设置其他元素为按钮样式
			  -->
			  <a href="#" class="btn btn-danger"></a>
			  <span class="btn btn-default">
			  	span标签
			  </span>
			  <div id="" class="btn btn-info">
			  	div标签
			  </div>
			  
			  <br>
			  <!-- //设置按钮大小 -->
			  <button type="button" class="btn btn-danger btn-lg">按钮</button>
			  <button type="button" class="btn btn-primary btn-sm">按钮</button>
			   <button type="button" class="btn btn-primary btn-xs">按钮</button>
			   <!--通过disabled属性去禁用-->
			   <button type="button" class="btn btn-info" onclick="function(){
				   alert("hello");
			   }" disabled="disabled"></button>

aqzengkuasheng

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootStrap表单元素

表单1.文本框.form-control 表单元素的样式表单控件的大小 .input-lg .input -sm2.下拉框.form-control 表单元素的样式multiple=“multiple” 表单元素的样式3.文本域.form-control表单元素的样式<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title>
复制链接

扫一扫

专栏目录