bootstrap基础表单样式

最新推荐文章于 2022-06-13 23:36:23 发布

{[("青椒盖饭")]}

最新推荐文章于 2022-06-13 23:36:23 发布

阅读量7.4k

点赞数 3

分类专栏： javaweb学习笔记

本文链接：https://blog.csdn.net/qq_43386754/article/details/86562745

版权

本文介绍了Bootstrap中表单的基础样式和扩展样式，包括文本、单选钮、复选框、下拉列表等基本组件的使用。通过`.form-group`进行布局控制，并展示了如何禁用表单及组件。此外，还提到了按钮的多种颜色和大小样式，以及引入字体图标进行表单美化的方法。

摘要由CSDN通过智能技术生成

在项目开发中表单是最为重要的组件,所以在Bootstrap中对表单也是有支持的.

表单基本样式

表单的元素包括有:文本,单选扭,复选框,下拉列表,而在HTML5中也扩充了许多的组件,例如事件选择,日期选择,email输入,url输入等组建,但是不管如何操作,表单的定义之中表单也要使用一些样式进行修饰
示例:基础组件

<html>
<head>
	<meta charset="UTF-8"/>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<!--设置页面的宽度随着使用者的设备变化二变化 -->
	<meta name="viewport" content="width=device-width,initial-scal=1">
</head>
<body>
	
	<div class="container">
		<div class="row">
			<div class="col-md-12 ">
				<form class="form-horizontal" method="post" action="#">
					<!-- 表单区域-->
					<fieldset>
						<!--表单主题-->
						<legend>用户注册</legend>
						<!-- 每一个form-group都可以自定义布局-->
						<div class="form-group">
							<!-- label表示文字提示标签,可以通过表单的组建的id提示-->
							<label class="col-md-2 control-label" for="mid">用户名称</label>