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>
效果图: