蓝色简洁个人摄影作品展示blog模板_蓝色简洁个人摄影作品展示个人主页blogbootstrap响应式手机.rar资源-CSDN文库

共44个文件

png：13个

jpg：7个

js：5个

需积分: 5 5 浏览量 2023-09-12 08:45:48 上传评论收藏 948KB RAR 举报

该压缩包文件包含的是一款基于Bootstrap框架的蓝色简洁个人摄影作品展示Blog模板，设计风格简约而专业，适合摄影师或视觉艺术家用来展示他们的作品。这个模板具备响应式布局，能适应不同设备，包括手机和平板，确保在任何屏幕上都能提供良好的浏览体验。我们来看一下模板的核心样式文件： 1. **bootstrap.css**：这是Bootstrap框架的基础样式文件，包含了栅格系统、组件样式、排版等Bootstrap的核心CSS。Bootstrap是一个流行的前端开发框架，提供了丰富的预定义样式、组件和JavaScript插件，用于快速构建响应式和移动优先的网站。 2. **font-awesome.css**：Font Awesome是一个图标字体库，提供大量的矢量图标，通过简单的CSS类就可以在网页上使用这些图标，使得页面设计更加生动和专业。 3. **prettyPhoto.css**：这是一个JavaScript的轻量级图片和视频灯箱插件的样式文件。它允许用户在一个暗色背景上全屏查看图片和视频，提供更好的媒体浏览体验。 4. **style.css**：这是模板的自定义样式文件，包含对Bootstrap默认样式的覆盖和扩展，以及模板特有的设计元素和布局。接着是字体文件： 1. **fontawesome-webfont.eot** 和 **glyphicons-halflings-regular.eot**：这些都是字体文件，分别对应Font Awesome和Bootstrap的图标字体，用于在浏览器中显示图标。资源文件： 1. **loader.gif**：这通常是一个加载动画图，用于在页面加载时显示，提升用户体验。 2. **default_thumbnail.gif**：默认缩略图，可能用于在未设置特定图片时显示一个标准的占位符。最后是HTML页面： 1. **gallery.html**：这是作品展示页面的HTML代码，可能包含了Bootstrap的栅格系统和prettyPhoto插件来展示作品集。 2. **about.html**：关于作者或者个人简介的页面，可能会包含个人介绍、联系信息等内容。综合以上分析，这款模板利用了Bootstrap的灵活性和响应式特性，结合Font Awesome的图标库和prettyPhoto的媒体查看功能，创建了一个既美观又实用的个人作品展示平台。用户可以根据自己的需求进行定制，添加更多的页面或功能，比如联系表单、作品分类等，以满足个人品牌的在线展示需求。

资源推荐

资源详情

资源评论

收起资源包目录

蓝色简洁个人摄影作品展示blog模板_蓝色简洁个人摄影作品展示个人主页blogbootstrap响应式手机.rar （44个子文件）

style.css 5KB

bootstrap.js 59KB

44.jpg 45KB

66.jpg 61KB

sprite_prev.png 1KB

FontAwesome.otf 84KB

jquery.prettyPhoto.js 22KB

glyphicons-halflings-regular.svg 61KB

glyphicons-halflings-regular.ttf 40KB

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.eot 20KB

jquery-1.11.1.js 276KB

fontawesome-webfont.eot 55KB

22.jpg 48KB

contentPatternLeft.png 137B

1.jpg 52KB

font-awesome.css 26KB

sprite_x.png 1KB

default_thumbnail.gif 227B

default_thumb.png 2KB

contentPatternTop.png 142B

fontawesome-webfont.woff 64KB

contentPattern.png 121B

bootstrap.css 129KB

sprite.png 3KB

prettyPhoto.css 19KB

index.html 5KB

11.jpg 63KB

contact.html 6KB

about.html 7KB

btnNext.png 1KB

fontawesome-webfont.svg 280KB

jquery.mixitup.min.js 14KB

btnPrevious.png 1KB

sprite_next.png 1KB

fontawesome-webfont.ttf 110KB

custom.js 1KB

contentPatternRight.png 136B

contentPatternBottom.png 142B

33.jpg 59KB

sprite_y.png 1KB

55.jpg 36KB

loader.gif 2KB

gallery.html 8KB

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta name="description" content="" /> <meta name="author" content="" />  <title>Free Responsive Photography Template</title>  <link href="assets/css/bootstrap.css" rel="stylesheet" />  <link href="assets/css/font-awesome.css" rel="stylesheet" />  <link href="assets/css/prettyPhoto.css" rel="stylesheet" />  <link href="assets/css/style.css" rel="stylesheet" />  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' /> <link href='http://fonts.googleapis.com/css?family=Expletus+Sans:400,700italic' rel='stylesheet' type='text/css' /> </head> <body> <div id="header" > <div class="container" > <div class="row"> <div class="col-md-4 logo-div" > <div class="logo-inner"> <div class="logo-name"> <a href="index.html" > <span > PHOTO SMART </span> <small >The Smart Designs Studio</small> </a> </div> <br /> <div class="links-home"> <a href="index.html" >Home /</a> <a href="about.html" >About /</a> <a href="gallery.html" >Gallery /</a> <a href="contact.html" >Contact </a> </div> </div> </div> <div class="col-md-8 header-text-top " > <strong>About: </strong><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing. <a href="about.html" >read more..</a> </div> </div> </div> </div>  <div class="info-sec" > <div class="container"> <div class="row"> <div class="col-md-10"> Email : info@yourdomain.com     Call: +02-890-786-0981 </div> <div class="col-md-2"> <div class="social-link"> <a href="#" ><i class="fa fa-facebook fa-2x"></i></a> <a href="#" ><i class="fa fa-linkedin fa-2x"></i></a> <a href="#" ><i class="fa fa-google-plus fa-2x"></i></a> </div> </div> </div> </div> </div>  <section id="gallery-sec"> <div class="container "> <div id="port-folio"> <div class="row "> <ul id="filters"> <li><span class="filter active" data-filter="HTML BOOTSTRAP WORDPRESS">All </span></li> <li><span class="filter" data-filter="HTML">HTML</span></li> <li><span class="filter" data-filter="BOOTSTRAP">BOOTSTRAP</span></li> <li><span class="filter" data-filter="WORDPRESS">WORDPRESS</span></li> </ul> <div class="col-md-4 col-sm-4"> <div class="portfolio-item BOOTSTRAP mix_all" data-cat="BOOTSTRAP"> <a class="preview" href="assets/img/portfolio/11.jpg"> <img src="assets/img/portfolio/11.jpg" class="img-responsive " alt="" /> <div class="portfolio-txt"> + Small Title Here + </div> </a> </div> </div> <div class="col-md-4 col-sm-4"> <div class="portfolio-item HTML mix_all" data-cat="HTML"> <a class="preview" href="assets/img/portfolio/22.jpg"> <img src="assets/img/portfolio/22.jpg" class="img-responsive " alt="" /> <div class="portfolio-txt"> + Small Title Here + </div> </a> </div> </div> <div class="col-md-4 col-sm-4"> <div class="portfolio-item WORDPRESS mix_all" data-cat="WORDPRESS"> <a class="preview" href="assets/img/portfolio/33.jpg"> <img src="assets/img/portfolio/33.jpg" class="img-responsive " alt="" /> <div class="portfolio-txt"> + Small Title Here + </div> </a> </div> </div> <div class="col-md-4 col-sm-4"> <div class="portfolio-item BOOTSTRAP mix_all" data-cat="BOOTSTRAP"> <a class="preview" href="assets/img/portfolio/44.jpg"> <img src="assets/img/portfolio/44.jpg" class="img-responsive " alt="" /> <div class="portfolio-txt"> + Small Title Here + </div> </a> </div> </div> <div class="col-md-4 col-sm-4"> <div class="portfolio-item HTML mix_all" data-cat="HTML"> <a class="preview" href="assets/img/portfolio/55.jpg"> <img src="assets/img/portfolio/55.jpg" class="img-responsive " alt="" /> <div class="portfolio-txt"> + Small Title Here + </div> </a> </div> </div> <div class="col-md-4 col-sm-4"> <div class="portfolio-item HTML mix_all" data-cat="HTML"> <a class="preview" href="assets/img/portfolio/66.jpg"> <img src="assets/img/portfolio/66.jpg" class="img-responsive " alt="" /> <div class="portfolio-txt"> + Small Title Here + </div> </a> </div> </div> </div> </div> </div> </section>  <div class="footer-sec" > <div class="container" > <div class="row"> <div class="col-md-12 foo-inner" > © 2014 Yourdomain.com | More Templates <a href="http://www.moobnn.com/" target="_blank" title="模板在线">模板在线</a> <a href="http://guantaow.taobao.com" target="_blank">厚朴网络淘宝店</a> - Collect from <a href="http://www.moobnn.com/" title="模板在线" target="_blank">模板在线</a> <a href="http://guantaow.taobao.com" target="_blank">厚朴网络淘宝店</a>

评论收藏

内容反馈