bootstrap输入框组样式

时间：2024-10-13 12:30:35

1、在进行信息输入的时候，经常需要添加一些前缀或者是后缀的信息，这些信息有的是利用文本显示，而有的是利用按钮或者是下拉菜单进行显示。

2、实现一个简单的输入框组：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><% pageContext.setAttribute("APP_PATH",request.getContextPath());%><meta name="viewport" content="width=device-width,initial-scale=1"><script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script><link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" /><script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><html><body> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="input-group"> <input type="text" size="4" maxlength="4" class="form-control"> <span class="input-group-addon">年</span> <input type="text" size="2" maxlength="2" class="form-control"> <span class="input-group-addon">月</span> </div> </div> </div> </div></body></html>

3、查看程序的运行显示结果：可以发现组件会排成一个行进行显示。

4、实际上输入框组比较好的一点实际上可以在于与一些表单元素的组合上。使用复选框与单选按钮作为输入框组：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><% pageContext.setAttribute("APP_PATH",request.getContextPath());%><meta name="viewport" content="width=device-width,initial-scale=1"><script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script><link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" /><script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><html><body> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="input-group"> <span class="input-group-addon"> <input type="radio"/> </span> <input type="text" class="form-control" placeholder="请选择信息来源"> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"/> </span> <input type="text" class="form-control" placeholder="请选择兴趣"> </div> </div> </div> </div></body></html>

5、查看程序的运行样式结果：

6、使用按钮作为输入框组元素:<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><% pageContext.setAttribute("APP_PATH",request.getContextPath());%><meta name="viewport" content="width=device-width,initial-scale=1"><script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script><link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" /><script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><html><body> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="input-group"> <input type="text" class="form-control" placeholder="请选择检索关键字"> <span class="input-group-btn"> <button class="btn btn-primary">检索</button> </span> </div> </div> </div> </div></body></html>

7、定义下拉列表输入框组：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><% pageContext.setAttribute("APP_PATH",request.getContextPath());%><meta name="viewport" content="width=device-width,initial-scale=1"><script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script><link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" /><script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><html><body> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 选择所在城市<span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a>北京</a></<li> <li><a>上海</a></<li> <li><a>广州</a></<li> </ul> </span> <input type="text" class="form-control" placeholder="请选择所在城市"> </div> </div> </div> </div></body></html>