bootstrap 学习笔记 - 6 （输入框组 + ）

最新推荐文章于 2023-07-16 22:44:29 发布

zhagener

最新推荐文章于 2023-07-16 22:44:29 发布

阅读量623

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/zhagener/article/details/46376087

版权

bootstrap 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Bootstrap学习

bootsrap学习之 - 输入框组

样例代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html lang="zh_CN">
	<head>
		<base href="<%=basePath%>">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
		<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.7.2.min.js"></script>
		<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>
		<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap-dropdown.js"></script>
	</head>

	<body style="padding: 20px;">
		<div class="input-group input-group-lg">
			<span class="input-group-addon">@</span>
			<input class="form-control" placeholder="Email" />
		</div>
		<div class="input-group">
			<span class="input-group-addon">@</span>
			<input class="form-control" placeholder="Email" />
		</div>
		<div class="input-group input-group-sm">
			<span class="input-group-addon">@</span>
			<input class="form-control" placeholder="Email" />
		</div>
				<br />
		<!--作为额外元素的多选框和单选框-->
		<div class="row">
			<div class="col-lg-6">
				<div class="input-group">
					<span class="input-group-addon"> <input type="checkbox" aria-label="..."> </span>
					<input type="text" class="form-control" aria-label="...">
				</div>
			</div>

			<div class="col-lg-6">
				<div class="input-group">
					<span class="input-group-addon"> <input type="radio" aria-label="..."> </span>
					<input  type="text" class="form-control" aria-label="...">
				</div>
			</div>
		</div>

		<br/>


		<div class="row">
			<div class="col-lg-6">
				<div class="input-group">
					<span class="input-group-addon"> <input type="checkbox" aria-label="..."> </span>
					<input type="text" class="form-control" aria-label="...">
				</div>
			</div>
			<div class="col-lg-6">
				<div class="input-group">
					<span class="input-group-addon"> <input type="radio" aria-label="..."> </span>
					<input type="text" class="form-control" aria-label="...">
				</div>
			</div>
		</div>

	</body>
</html>

效果图：

zhagener

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap 学习笔记 - 6 （输入框组 + ）

Bootstrap学习bootsrap学习之 - 输入框组样例代码：<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
复制链接

扫一扫

专栏目录