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>
相關推薦
bootstrap 佈局圖片列表
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://jav
響應式佈局-圖片列表如何在窄屏（768px）中顯示為有間隙的一行
摘要：本文旨在介紹在寬屏（>768px）中圖片列表中如何顯示為有固定間隙的一行排列，介紹了筆者自己嘗試過得五種寫法，並分析了其缺點，採用什麼方法就得見人見智，具體情況具體分析了。 如何在窄屏（<320px）中顯示為一列呢，做出的顯示
bootstrap-3-上傳圖片-列表顯示
all oca 地址 .post locale setting jee owb log 效果 導入的js和css <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="htt
bootstrap-自定義列表組
bootstrap-自定義列表組1.運行效果如圖所示2.實現代碼如下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible
bootstrap筆記之——列表
gin clear 方式 而且 block 集中 spa ots hit 一、列表 1、無序列表<ul> 給無序列表添加一個類名“.list-unstyled”,這樣就可以去除默認的列表樣式的風格。除了項目編號之外，還將列表默認的左邊內距也清０了。
小程序 - 圖片列表顯示lazyload效果
短視頻 pan query vid offset 修改 win 列表顯示 parseint 在做一個短視頻平臺，涉及到的都是一些列表模塊。因為小程序沒有提供lazyload api，所以只能自己寫一個了。。。 開發涉及 <scroll-view></scr
利用bootstrap實現圖片Carousel效果
span per inner boot 頭文件 app cat carousel inter 引入頭文件： <link rel="stylesheet" href="bootstrap.min.css"> <link rel="styl
WPF ListBox繫結圖片列表
1.圖片列表定義 圖片列表使用BindingList而不使用List，因List未實現繫結相關聯操作，在使用者改變列表時無法更改ListBox中的內容。 工程新增System.ComponentModel;引用來引入BindingList。 2.XAML繫結程式碼 <Lis
圖片列表分頁外掛，相簿圖片展示，素材庫圖片展示
（1）第一種外掛效果圖如下： （2）第二種外掛效果圖如下： 兩種圖片分頁展示外掛，自己比較喜歡第一種，css等樣式，也用心除錯了一下，蘿蔔青菜各有所愛吧 ^_^ 提供的外掛是純前臺的指令碼，下載下來開啟index.html頁面即可看到效果。 也提供了通過AJAX載入資
bootStrap:動態載入列表
$( function() { //載入資料 $.ajax({ url : "settings/dictionary/type/queryAllType.d
圖片列表顯示lazyload效果
在做一個短視訊平臺，涉及到的都是一些列表模組。因為小程式沒有提供lazyload api，所以只能自己寫一個了。。。 開發涉及 <scroll-view></scroll-view>滾動機制及queryMultipleNodes方法，不清楚的請自行查閱api文件。 html程式碼：
邊界圓角 盒模型佈局 圖片背景 精靈圖
常用標籤的使用: 直接舉例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常用標籤
【轉】WPF自定義控制元件與樣式(12)-縮圖ThumbnailImage /gif動畫圖/圖片列表
一．前言 申明：WPF自定義控制元件與樣式是一個系列文章，前後是有些關聯的，但大多是按照由簡到繁的順序逐步釋出的等，若有不明白的地方可以參考本系列前面的文章，文末附有部分文章連結。 本文主要針對WPF專案開發中圖片的各種使用問題，經過總結，把一些經驗分享一下。內容包括： WPF常
看天貓圖片列表自適應小結
程式碼拷下來，自己改動，發現和天貓的完全不一樣。 天貓是用padding填充的，我改了其中的值，導致圖片顯示不完整。 找不到原因。。。 TM的原來是我忘記總寬度了，因為圖片是自適應，寬度不一致
CSS3之圖片列表展示特效
grid、transform 、transition CSS程式碼 .main-cons{ background: #F7F5F2; padding:
arcpy生成佈局元素列表
import arcpy from arcpy import mapping mxdpath=r"C:\Users\h\Desktop\fp.mxd" import arcpy.mapping as mapping mxd = mapping.MapDocument(mxdpath) for el
Bootstrap多圖片上傳並預覽（tp5）
Bootstrap多圖上傳版本1.0（1）非同步上傳檔案並儲存到資料庫（2）限制檔案上傳個數（3）監聽檔案是否上傳成功一、控制器//多圖上傳 public function imgupload() {
WPF技術觸屏上的應用系列（五）: 圖片列表非同步載入、手指進行縮小、放大、拖動 、慣性滑入滑出等效果
去年某客戶單位要做個大屏觸屏應用，要對檔案資源進行展示之用。客戶端是Window7作業系統，54寸大屏電腦電視一體機。要求有很炫的展示效果，要有一定的視覺衝擊力，可觸控操作。當然滿足客戶的要求也可以有其它途徑。但鑑於咱是搞 .NET技術的，首先其衝想到的微軟
Bootstrap框架----DataTables列表摺疊列
$(document).ready(function() { $('.datepicker').datetimepicker({ language : 'zh-CN', autoclose : true }); refreshTable();//重
Android檢視筆記圖片列表
Android檢視筆記圖片列表 一、目標 二、獲取圖片型別 三、相關的技術點 四、Final 一、目標 完整顯示筆記中的所有圖片 二、獲取圖片型別 通過BitmapFactory.Option