bootstrap 佈局圖片列表



<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
 String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
  + request.getServerName() + ":" + request.getServerPort()
  + path + "/";
%>
<!DOCTYPE html>
<html lang="en">

<head>
<title></title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" href="<%=path%>/static/ace/css/bootstrap.css" />

<style type="text/css">
.pic_p{
   text-align: center;
   padding-top: 1px;
   margin-bottom: 1px;
}
</style>
</head>
<body>

<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">面板標題</h3>
    </div>
    <div class="panel-body">
        <div class="row">
        <div class="col-sm-6 col-md-4">
         <div class="thumbnail">
            <img src="<%=path%>/static/images/text.jpg" alt="通用的佔位符縮略圖">
            <div class="caption" style="padding-top: 0px;padding-bottom: 0px;">
                <p class="pic_p">一些示例文本。</p>
                <p class="pic_p"><a href="#" class="btn btn-primary btn-xs" role="button"> 按鈕</a>
                    <button type="button" class="btn btn-info btn-xs">
                      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 刪除
                    </button>
                </p>
            </div>
          </div>
       </div>
       <div class="col-sm-6 col-md-4">
         <div class="thumbnail">
            <img src="<%=path%>/static/images/text.jpg" alt="通用的佔位符縮略圖">
            <div class="caption" style="padding-top: 0px;padding-bottom: 0px;">
                <p class="pic_p">一些示例文本。</p>
                <p class="pic_p"><a href="#" class="btn btn-primary btn-xs" role="button"> 按鈕</a>
                    <button type="button" class="btn btn-info btn-xs">
                      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 刪除
                    </button>
                </p>
            </div>
         </div>
       </div>
       <div class="col-sm-6 col-md-4">
         <div class="thumbnail">
            <img src="<%=path%>/static/images/text.jpg" alt="通用的佔位符縮略圖">
            <div class="caption" style="padding-top: 0px;padding-bottom: 0px;">
                <p class="pic_p">一些示例文本。</p>
                <p class="pic_p"><a href="#" class="btn btn-primary btn-xs" role="button"> 按鈕</a>
                    <button type="button" class="btn btn-info btn-xs">
                      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 刪除
                    </button>
                </p>
            </div>
         </div>
        </div>
        <div class="col-sm-6 col-md-2">
         <div class="thumbnail">
            <img src="<%=path%>/static/images/text.jpg" alt="通用的佔位符縮略圖">
            <div class="caption" style="padding-top: 0px;padding-bottom: 0px;">
                <p class="pic_p">一些示例文本。</p>
                <p class="pic_p"><a href="#" class="btn btn-primary btn-xs" role="button"> 按鈕</a>
                    <button type="button" class="btn btn-info btn-xs">
                      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 刪除
                    </button>
                </p>
            </div>
         </div>
        </div>
        <div class="col-sm-6 col-md-2">
         <div class="thumbnail">
            <img src="<%=path%>/static/images/text.jpg" alt="通用的佔位符縮略圖">
            <div class="caption" style="padding-top: 0px;padding-bottom: 0px;">
                <p class="pic_p">一些示例文本。</p>
                <p class="pic_p"><a href="#" class="btn btn-primary btn-xs" role="button"> 按鈕</a>
                    <button type="button" class="btn btn-info btn-xs">
                      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 刪除
                    </button>
                </p>
            </div>
         </div>
        </div>
        <div class="col-sm-6 col-md-2">
         <div class="thumbnail">
            <img src="<%=path%>/static/images/text.jpg" alt="通用的佔位符縮略圖">
            <div class="caption" style="padding-top: 0px;padding-bottom: 0px;">
                <p class="pic_p">一些示例文本。</p>
                <p class="pic_p"><a href="#" class="btn btn-primary btn-xs" role="button"> 按鈕</a>
                    <button type="button" class="btn btn-info btn-xs">
                      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 刪除
                    </button>
                </p>
            </div>
         </div>
       </div>
       <div class="col-sm-6 col-md-2">
         <div class="thumbnail">
            <img src="<%=path%>/static/images/text.jpg" alt="通用的佔位符縮略圖">
            <div class="caption" style="padding-top: 0px;padding-bottom: 0px;">
                <p class="pic_p">一些示例文本。</p>
                <p class="pic_p"><a href="#" class="btn btn-primary btn-xs" role="button"> 按鈕</a>
                    <button type="button" class="btn btn-info btn-xs">
                      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 刪除
                    </button>
                </p>
            </div>
         </div>
        </div>
        <div class="col-sm-6 col-md-2">
         <div class="thumbnail">
            <img src="<%=path%>/static/images/text.jpg" alt="通用的佔位符縮略圖">
            <div class="caption" style="padding-top: 0px;padding-bottom: 0px;">
                <p class="pic_p">一些示例文本。</p>
                <p class="pic_p"><a href="#" class="btn btn-primary btn-xs" role="button"> 按鈕</a>
                    <button type="button" class="btn btn-info btn-xs">
                      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 刪除
                    </button>
                </p>
            </div>
         </div>
        </div>
       </div>
    </div>
</div>

<script type="text/javascript" src="<%=path%>/static/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="<%=path%>/static/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=path%>/static/ace/js/bootstrap.js"></script>

</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章