Bootstrap表单样式

最新推荐文章于 2024-05-19 13:56:53 发布
最新推荐文章于 2024-05-19 13:56:53 发布
阅读量1k 收藏 7
点赞数
分类专栏： JavaScript 文章标签： bootstrap html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42223701/article/details/121118578
版权
样式一
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Bootstrap表单样式一</title>
	<!-- 让页面样式根据设备大小进行调整显示 -->
	<meta name=viewport content="width=device-width,initial-scale=1">
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="bootstrap/js/jQuery.js"></script>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<form action="index_submit" method="get" class="form-horizontal">
			<fieldset>
				<legend>用户登录<span class="glyphicon glyphicon-user"></span></legend>
				<div class="form-group">
					<label for="username" class="control-label col-md-1">用户名：</label>
					<div class="col-md-4">
						<input type="text" placeholder="请输入用户名 " name="username" id="username" class="form-control">
					</div>
				</div>
				<div class="form-group">
					<label for="pwd" class="control-label col-md-1">密&nbsp;&nbsp;&nbsp;码:</label>
					<div class="col-md-4">
						<input type="password" placeholder="请输入密码" name="pwd" id="pwd" class="form-control">
					</div>
				</div>
				<div class="col-md-2 col-md-offset-1">
					<input class="btn btn-success btn-xs" type="submit" value="登录">
					<input class="btn btn-danger btn-xs"  type="reset" value="重置">
				</div>
			</fieldset>
		</form>
	</div>
</body>
</html>

在这里插入图片描述

输入框的大小
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Bootstrap表单样式一</title>
	<!-- 让页面样式根据设备大小进行调整显示 -->
	<meta name=viewport content="width=device-width,initial-scale=1">
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="bootstrap/js/jQuery.js"></script>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<form action="index_submit" method="get" class="form-horizontal">
			<fieldset>
				<legend>用户登录<span class="glyphicon glyphicon-user"></span></legend>
				<div class="form-group">
					<label for="username" class="control-label col-md-2">大输入框</label>
					<div class="col-md-4">
						<input type="text" placeholder="请输入用户名 " name="username" id="username" class="form-control input-lg">
					</div>
				</div>
				<div class="form-group">
					<label for="pwd" class="control-label col-md-2">中输入框</label>
					<div class="col-md-4">
						<input type="password" placeholder="请输入密码" name="pwd" id="pwd" class="form-control">
					</div>
				</div>
				<label for="pwd" class="control-label col-md-2">小输入框</label>
					<div class="col-md-4">
						<input type="password" placeholder="请输入密码" name="pwd" id="pwd" class="form-control input-sm">
					</div>
				
			</fieldset>
		</form>
	</div>
</body>
</html>

在这里插入图片描述

按钮样式
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Bootstrap表单样式一</title>
	<!-- 让页面样式根据设备大小进行调整显示 -->
	<meta name=viewport content="width=device-width,initial-scale=1">
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="bootstrap/js/jQuery.js"></script>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-5">
				<button type="button" class="btn btn-success btn-lg">按钮一</button> 
				<button type="button" class="btn btn-danger btn-lg"">按钮二</button> 
				<button type="button" class="btn btn-warning">按钮三</button> 
				<button type="button" class="btn btn-info">按钮四</button> 
				<button type="button" class="btn btn-link btn-sx">按钮五</button> 
				<button type="button" class="btn btn-primary btn-sm">按钮六</button> 
			</div>
		</div>
	</div>
</body>
</html>

在这里插入图片描述
小结：
输入框三种大小：较大 正常 较小
按钮四种大小：较大 正常 较小 极小

单选按钮样式对其方式
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap表单样式一</title>
	<!-- 让页面样式根据设备大小进行调整显示 -->
	<meta name=viewport content="width=device-width,initial-scale=1">
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="bootstrap/js/jQuery.js"></script>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<form action="index_submit" method="get" class="form-horizontal">
			<fieldset>
				<legend>用户登录<span class="glyphicon glyphicon-user"></span></legend>
				<div class="form-group">
					<label for="username" class="control-label col-md-1">用户名：</label>
					<div class="col-md-4">
						<input type="text" placeholder="请输入用户名 " name="username" id="username" class="form-control">
					</div>
				</div>
				<div class="form-group">
					<label for="pwd" class="control-label col-md-1">密&nbsp;&nbsp;&nbsp;码:</label>
					<div class="col-md-4">
						<input type="password" placeholder="请输入密码" name="pwd" id="pwd" class="form-control">
					</div>
				</div>
				<div class="form-group">
					<label for="sex" class="control-label col-md-1">性&nbsp;&nbsp;&nbsp;别</label>
					<div class="col-md-4">
						<div class="radio-inline">
							<label><input type="radio" name="sex" id="sex">男</label>
						</div>
						<div class="radio-inline">
							<label><input type="radio" name="sex" id="sex">女</label>
						</div>	
					</div>
				</div>
				<div class="form-group">
					<label for="state" class="col-md-1 control-label">状&nbsp;&nbsp;&nbsp;态</label>
					<div class="col-md-4">
						<div class="radio">
							<label><input type="radio" name="state" id="state">活跃</label>
						</div>
						<div class="radio">
							<label><input type="radio" name="state" id="state">锁定</label>
						</div>
					</div>
				</div>
				<div class="col-md-2 col-md-offset-1">
					<input class="btn btn-success btn-xs" type="submit" value="登录">
					<input class="btn btn-danger btn-xs"  type="reset" value="重置">
				</div>
			</fieldset>
		</form>
	</div>
</body>
</html>

在这里插入图片描述

下拉菜单样式
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap表单样式一</title>
	<!-- 让页面样式根据设备大小进行调整显示 -->
	<meta name=viewport content="width=device-width,initial-scale=1">
	<script type="text/javascript" src="bootstrap/js/jQuery.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
</head>
<body>
	<div class="container">
		<div class="dropdown">
			<button type="button" data-toggle="dropdown" class="btn btn-info">编辑资料<span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li><span class="glyphicon glyphicon-file"></span>&nbsp;&nbsp;编辑</li>
				<li><span class="glyphicon glyphicon-trash"></span>&nbsp;&nbsp;删除</li>
				<li><span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;输入</li>
				<li><span class="glyphicon glyphicon-cog"></span>&nbsp;&nbsp;设置</li>
			</ul>
		</div>
	</div>
</body>
</html>

在这里插入图片描述

Dragon.liu
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
40多个漂亮的网页表单设计实例
09-28
下面我们介绍40多个漂亮的网页表单例子以及现代的解决方案和与网页表单设计有关的创造性思维.其中有一些是flash的；尽管如此，在大多数情况下，你能很容易的使用简单的css和(x)html来创建相同的设计.
bootstrap表单样式
qq_27905183的博客
05-03 2174
基本表单类样式列表1.基础表单: <div class="form-group"> <label for="username">username: </label> <input type="text" class="form-control" name=username" /> </div>2.内联表单: <div class="form-inline"> ... </d
BootStrap入门到实战：BootStrap全局CSS样式（三）- 表格、表单、按钮、图片、辅助类
最新发布
林林一928的博客
05-19 1118
一. 表格 1.基本表格2.带边框的表格3.条纹状表格4.鼠标悬停时作出响应的表格5.紧缩表格6. 状态类7. 响应式表格。 二.表单 1.基本实例2.水平排列的表单3.内联表单4.被支持的控件4.1输入框4.2文本域4.3多选4.4 单选5.表单状态5.1焦点在状态5.2禁用状态5.3只读状态5.4效验状态5.5控制尺寸 三.按钮 1.可作为按钮使用的标签或元素2. 预定义样式3. 尺寸4. 禁用状态 四.图片 1.响应式图片2.图片形状 五.辅助类 1.情景文本颜色2.情景背景色3.关闭按钮4.三角符号
bootstrap--表格（table的各种样式）
热门推荐
ShowTime_Shawn的博客
10-17 1万+
  目录 bootstrap--表格（table的各种样式） Bootstrap 表格类样式 ☑  .table：基础表格，为任意 &lt;table&gt; 添加基本样式 (只有横向分隔线) ☑  .table-striped：斑马线表格 ☑  .table-bordered：带边框的表格 ☑  .table-hover：鼠标悬停高亮的表格 ☑  .table-condensed...
零基础Bootstrap入门教程(8)--使用表单样式
程序员大阳
02-20 978
本文目录1. 概述2. HTML表单样式3. Bootstrap默认表单4. Bootstrap水平表单5. Bootstrap内联表单6. 小结 1. 概述 HTML自带的表单没有样式可言，非常难看。 Bootstrap提供了样式优雅大方的表单，拿来即用，非常nice。本篇就来讲解下Bootstrap框架下表单样式的设置方法。 2. HTML表单样式 我们先来看下HTML自带的表单是啥样的。 <form action="#"> <label fo
Bootstrap_03_(全局CSS之表单&按钮&图片&辅助类&响应式工具)
muxianzhi的博客
05-03 682
表单 基本表单 class=”form-control”：可以给<input>、<textarea>、<select>元素设置宽度为100% 示例代码： <form action="" method=""> <label>用户名:</label> <input type="text" class="form-control" /> </form> 之前我们写在文本框前面写用户名 一直都是直接写
全面解析Bootstrap表单样式的使用
09-01
本文将深入解析Bootstrap表单样式的使用，帮助开发者更好地理解和应用。 首先，Bootstrap中的基本表单样式是通过`<form>`标签配合`.form-group`、`.form-control`等类来实现的。例如： ```html 邮箱： 请输入...
全面解析Bootstrap表单使用方法（表单样式）
12-28
一、基础表单 <form > 邮箱： <input type=email class=form-control placeholder=请输入您的邮箱地址> 密码 <input type=password class=form-control placeholder=请输入您的邮箱密码...
08.Bootstrap表单样式1.rar
08-02
这个"08.Bootstrap表单样式1.rar"压缩包文件，显然包含了一个关于如何使用Bootstrap来设计和实现表单样式的教学资源，特别关注了C#开发者可能感兴趣的应用场景。 Bootstrap的核心在于其响应式网格系统、预定义的...
Bootstrap表单布局样式代码
09-02
5. `form-control` 类：这个类是Bootstrap表单输入元素的标准样式，包括`input`, `select`, 和`textarea`。应用此类后，输入框会获得Bootstrap的默认样式，如边框、内阴影和适当的间距。 6. `legend` 元素：在`...
bootstrap中六种表格样式
weixin_34337381的博客
11-29 1556
表格表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格，在接下来的内容中，我们会详细介绍Bootstrap的表格使用。同样的，如果你对CSS预处理器熟悉，你可以使用Bootstrap提供的预处理版本： LESS版本，对...
Bootstrap 全局CSS样式：表单类的使用
WangMin@汪末末
08-30 1461
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 基本实例 单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width: 100%;。将label元素包裹到.form-group中可以更好地展示表单。 <form> <div class="form-group"> &l
BootStrap table的各种样式效果
shenxiaomo1688的博客
02-28 1万+
Bootstrap 表格类样式 ☑ .table：基础表格，为任意<table>添加基本样式 (只有横向分隔线) ☑ .table-striped：斑马线表格 ☑ .table-bordered：带边框的表格 ☑ .table-hover：鼠标悬停高亮的表格 ☑ .table-condensed：紧凑型表格 ☑ .table-responsive：响应式表格...
【前端开发】bootstrap框架：表单
`雾博客
06-18 837
垂直（基本）表单 基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式 1）向父 <form> 元素添加 role="form" 2）把标签和控件放在一个带有form-group 类的<div> 中，这是获取最佳间距所必需的。 3）向所有的文本元素 <input>、<textarea> 和 <select>添加form-control类 help-block类提示帮助信息 <!DOCTYPE html>
BootStrap-CSS样式_排版_表单、表单控件
LoveyourselfJiuhao的博客
12-01 2001
1. 基本表单 form样式：默认不显示，基本表单 form-group样式：表单内设置分组 form-control样式：设置控件并绑定控件默认样式 2. 内联表单 form-inline样式：设置为内联排列表单 3. 水平排列表单 form-horizontal样式：设置为水平排列表单 4. 表单支持控件 type="text"：文本框 textarea标签：多行文本框 ...
1-17. Bootstrap 表单样式汇总
淡泊以明志，宁静以致远
01-13 2956
网站数据交互一般都是通过表单实现 Bootstrap中表单布局类型有哪些？ 垂直表单 内联表单 水平表单 向父 <form> 元素添加 role="form" 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。 向所有的文本元素 <input>、<textarea> 和 &l...
bootstrap快速新建一个美观的form表单
qq_36566924的博客
02-18 1428
1.form如果想改为横向的，在最外部的div或者form中增加class="form-inline"，就可以变为横向的。 2.如果想要单独对input设为一行2个类似的，左边加上width: 45%;float: left;，右边加上width: 45%;float: left;margin-left: 10%; 3.想将该form的位置，大小等进行调整，只需要在外部加一个div对其进行控制...
WEB前端网页设计-Bootstrap5 表格
君逍遥o
04-30 1969
WEB前端网页设计-Bootstrap5 表格
Bootstrap(六)表单样式
chuzhong1074的博客
07-16 308
基本样式 所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好...
bootstrap样式登录注册表单
05-24
以下是一个基本的带有 Bootstrap 样式的登录注册表单示例： ```html <!DOCTYPE html> <title>Login/Signup Form <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值