Bootstrap学习
Bootstrap学习之 - 表格
表格(<table>)
table-striped :每一行增加斑马条纹样式。
thead : 指定表格最上行
tfoot :指定表格最下行
table-bordered :为表格和其中的每个单元格增加边框。
table-hover :每一行对鼠标悬停状态作出响应。
table-condensed : 让表格更加紧凑,单元格中的内补(padding)均会减半。
.active :鼠标悬停在行或单元格上时所设置的颜色
.success :标识成功或积极的动作
.info :标识普通的提示信息或动作
.warning :标识警告或需要用户注意
.danger :标识危险或潜在的带来负面影响的动作table-responsive :可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。
样例代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <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> </head> <body > <div style="padding: 20px;"> <form class="form-horizontal"> <p>输入框 </p> <div class="form-group"> <div> <input type="text" class="form-control" placeholder="please input something……"/> </div> </div> <hr/> <p>文本域 </p> <div class="form-group"> <div> <textarea class="form-control" rows="3" placeholder="please input something……"></textarea> </div> </div> <hr/> <p>多选和单选框 </p> <div class="checkbox"> <label> <input type="checkbox" value=""/> Option one is this and that—be sure to include why it's great </label> </div> <div class="checkbox disabled"> <label> <input type="checkbox" value="" disabled/> Option two is disabled </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked/> Option one is this and that—be sure to include why it's great </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"/> Option two can be something else and selecting it will deselect option one </label> </div> <div class="radio disabled"> <label> <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled/> Option three is disabled </label> </div> <hr/> <p>内联单选框 </p> <div> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1" checked/> 1 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"/> 2 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"/> 3 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2" disabled/> 4 </label> </div> <hr/> <p>内联多选框 </p> <div> <label class="radio-inline"> <input type="radio" name="radio_inline" id="inlineradio1" value="option1" checked/> 1 </label> <label class="radio-inline"> <input type="radio" name="radio_inline" id="inlineradio2" value="option2"/> 2 </label> <label class="radio-inline"> <input type="radio" name="radio_inline" id="inlineradio3" value="option3" disabled/> 3 </label> </div> <hr/> <p>下拉列表</p> <div style="width:200px;"> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option selected>5</option> <option>6</option> </select> </div> <hr/> <p>支持多选下拉列表 </p> <div style="width:200px;"> <select multiple class="form-control"> <option selected>1</option>