Bootstrap框架：表单、fieldset和legend的配合

最新推荐文章于 2023-07-02 17:37:07 发布

hahahafree

最新推荐文章于 2023-07-02 17:37:07 发布

阅读量2.3k

点赞数

分类专栏： bootstrap 文章标签： Bootstrap

本文链接：https://blog.csdn.net/weixin_43731793/article/details/97493633

版权

bootstrap 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

表单:

div.form-group
input.form-control
p.help-block
div.checkbox
form.form-inline
label.control-label

显示与隐藏:

.show
.hide
.sr-only

被禁用的 fieldset

form表单样式

.container{
			margin-top:20px;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-8">
				<img src="/img/de.jpg" alt="">
			</div>
			<div class="col-md-4">
				<form action="" >
					<div class="form-group">
						<label >Email address</label>
						<input type="text" class="form-control">
					</div>	
					<div class="form-group">
							<label >Password</label>
							<input type="text" class="form-control">
						</div>
					<div class="form-group">
						
							<input type="submit" value="确认" class='btn btn-primary'>
							<input type="reset" value="取消" class='btn btn-danger'>
						
					</div>
				</form>
			</div>
		</div>
	</div>
</body>

fieldset和legend的配合

<fieldset>
			<legend>
				<h2>linux说明</h2>	
			</legend>

			<p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>
		</fieldset>

		<fieldset>
			<legend>
				<h2>linux说明</h2>	
			</legend>

			<p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>
		</fieldset>