Bootstrap學習
Bootstrap學習之 - 按鈕
按鈕的使用方式有如下四種：
<a class="btn btn-default" href="#" role="button">Link</a><button class="btn btn-default" type="submit">Button</button><input class="btn btn-default" type="button" value="Input"><input class="btn btn-default" type="submit" value="Submit">
針對組件的注意事項：
雖然按鈕類可以應用到 <a> 和 <button> 元素上，但是，導航和導航條組件只支持 <button> 元素，所以儘量使用<button class="btn btn-default">press me</button>方式，下面的樣例代碼都是通過<button>方式實現。
按鈕的幾種樣式：
btn btn-default 默認樣式
btn btn-primary 首選項
btn btn-success 成功
btn btn-info 一般信息
btn btn-warning 警告
btn btn-danger 危險
btn btn-link 鏈接disabled ：控制按鈕的可用性按鈕的尺寸：
btn-lg ：大按鈕btn-sm ：小按鈕
btn-xs ：超小尺寸btn-block ：可以將其拉伸至父元素100%的寬度，而且按鈕也變爲了塊級（block）元素。
樣例代碼：
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%> <% 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 style="padding:20px;"> <div> <button class="btn btn-default btn-lg" >default button</button><br/> <button class="btn btn-primary btn-lg" disabled="disabled">Primary button </button><br/> <button class="btn btn-success btn-lg">success button </button><br/> <button class="btn btn-info btn-lg">info button </button><br/> <button class="btn btn-warning btn-lg">warning button </button><br/> <button class="btn btn-danger btn-lg">danger button </button><br/> </div> </body> </html>
效果圖：
Bootstrap學習之 - 圖片
img-responsive ：響應式圖片img-round ：圓角矩形img-circle ：圓形img-thumbnail ：縮略圖
樣例代碼：
<%@ 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 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> </head> <body style="padding:20px;"> <div> 非響應式圖片<br/> <img class="img-rounded" alt="rounded" src="${pageContext.request.contextPath}/images/zhagener.jpg"></img> <img class="img-circle" alt="circle" src="${pageContext.request.contextPath}/images/zhagener.jpg"></img> <img class="img-thumbnail" alt="thumbnail" src="${pageContext.request.contextPath}/images/zhagener.jpg"></img> </div> <hr/> 響應式圖片 <div> <img class="img-rounded img-responsive " alt="rounded" src="${pageContext.request.contextPath}/images/zhagener.jpg"></img> <img class="img-circle img-responsive " alt="circle" src="${pageContext.request.contextPath}/images/zhagener.jpg"></img> <img class="img-thumbnail img-responsive " alt="thumbnail" src="${pageContext.request.contextPath}/images/zhagener.jpg"></img> </div> </body> </html>
效果圖：
Bootstrap學習之 - 輔助類
情景文本顏色：
text-muted
text-primary
text-success
text-info
text-warning
text-danger
情景背景色：
bg-primary
bg-success
bg-info
bg-warning
bg-danger
關閉按鈕：
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
三角符號：
<span class="caret"></span>
快速浮動：
pull-left
pull-right
清除浮動：
clearfix
顯示和隱藏內容：
showhidden
屏幕閱讀器和鍵盤導航：
樣例代碼：
<%@ 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 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> <style type="text/css"> .div{ border:2px solid gray; } .div-custom-size{ width:500px; height:50px; } .img-size{ width:50px; heigh:50px; } </style> </head> <body style="padding:20px;"> <div> 非響應式圖片<br/> <img class="img-rounded img-size" alt="rounded" src="${pageContext.request.contextPath}/images/zhagener.jpg"></img> <img class="img-circle img-size" alt="circle" src="${pageContext.request.contextPath}/images/zhagener.jpg"></img> <img class="img-thumbnail img-size" alt="thumbnail" src="${pageContext.request.contextPath}/images/zhagener.jpg"></img> </div> <hr/> 響應式圖片 <div> <img class="img-rounded img-responsive img-size" alt="rounded" src="${pageContext.request.contextPath}/images/zhagener.jpg"></img> <img class="img-circle img-responsive img-size" alt="circle" src="${pageContext.request.contextPath}/images/zhagener.jpg"></img> <img class="img-thumbnail img-responsive img-size" alt="thumbnail" src="${pageContext.request.contextPath}/images/zhagener.jpg"></img> </div> <hr/> <p>關閉按鈕</p> <div class="pull-left"> <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <br/><hr/> <p>三角符號</p> <span class="caret"></span> <br/><hr/> <p>快速浮動</p> <div class="pull-left div"> <p>this is paragragh! at left</p> <p>this is paragragh! at left</p> </div> <div class="pull-right div"> <p>this is paragragh! at right a</p> <p>this is paragragh! at right a</p> </div> <div class="clearfix"></div> <br/><hr/> <p>快速浮動</p> <div class="center-block div div-custom-size"> <p>我在中間</p> </div> <div class="show div"> 我是可見的 </div> <div class="hidden div"> 我是不可見的 </div> </body> </html>
