【免费】简洁作品展示bootstrap响应式手机案例黑色单页lightboxfixed简单.rar资源-CSDN文库

共57个文件

png：23个

js：7个

jpg：7个

需积分: 0 42 浏览量 2023-09-10 10:33:38 上传评论收藏 1.83MB RAR 举报

标题 "简洁作品展示bootstrap响应式手机案例黑色单页lightboxfixed简单.rar" 提供的信息表明，这是一个基于Bootstrap框架创建的响应式网页设计项目，特别适用于展示作品集。它可能是一个单页面布局，拥有黑色主题，使用了Lightbox效果，并且导航栏是fixed（固定定位）的，确保在滚动页面时始终保持在屏幕顶部。描述中的"html"标签进一步确认了项目的核心技术是HTML。 Bootstrap是目前最流行的前端开发框架，由Twitter开发，旨在简化网页设计和响应式布局的实现。它提供了一系列预先设计的CSS类、JavaScript组件和字体图标，使开发者能够快速构建美观且响应式的网站。在压缩包中，我们看到以下几个关键文件： 1. **bootstrap.css**: 这是Bootstrap框架的核心样式文件，包含了预定义的CSS类，如栅格系统、按钮、表单、导航等，用于构建页面布局和元素样式。 2. **font-awesome.css**: Font Awesome是一个广泛使用的图标库，提供了大量的矢量图标。这些图标可以通过CSS类来调用，可以方便地调整大小和颜色，增强网站的视觉效果。 3. **prettyPhoto.css**: prettyPhoto是一个jQuery插件，用于创建一个全屏的轻量级图片和视频查看器，即Lightbox效果。在这个案例中，可能用于展示作品集中的大图或视频，用户可以在当前页面上查看，无需跳转到新的页面。 4. **style.css**、**light.css**、**dark.css**: 这些可能是自定义的样式文件，其中style.css可能包含项目的整体样式，而light.css和dark.css可能分别定义了Lightbox的亮色和暗色主题，以满足不同用户的视觉偏好。 5. **fontawesome-webfont.eot**、**glyphicons-halflings-regular.eot**: 这些是字体文件，用于支持Font Awesome和Bootstrap中的图标显示。EOT是嵌入式OpenType格式，主要用于Internet Explorer浏览器。 6. **loader.gif**：这可能是一个加载动画，用于在页面内容加载时显示，提高用户体验。 7. **default_thumbnail.gif**：这可能是默认的缩略图图像，当用户未提供自定义缩略图或者在加载大图之前显示。这个项目集成了Bootstrap的强大功能、Font Awesome的图标库和prettyPhoto的Lightbox效果，非常适合用来创建一个具有专业感且用户友好的作品展示网站。通过响应式设计，无论是在桌面电脑还是移动设备上，用户都能获得一致且流畅的浏览体验。同时，黑色主题和Lightbox效果能为作品展示增添现代和高端的氛围。

资源推荐

资源详情

资源评论

收起资源包目录

简洁单页bootstrap作品展示模板下载_简洁作品展示bootstrap响应式手机案例黑色单页lightboxfixed简单.rar （57个子文件）

style.css 6KB

dark.css 817B

bootstrap.js 59KB

44.jpg 45KB

66.jpg 61KB

sprite_prev.png 1KB

FontAwesome.otf 84KB

jquery.prettyPhoto.js 22KB

side.png 86KB

glyphicons-halflings-regular.svg 61KB

glyphicons-halflings-regular.ttf 40KB

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.eot 20KB

3.png 116KB

jquery.easing.min.js 5KB

jquery-1.11.1.js 276KB

fontawesome-webfont.eot 55KB

22.jpg 48KB

contentPatternLeft.png 137B

font-awesome.css 26KB

sprite_x.png 1KB

15.png 137B

default_thumbnail.gif 227B

default_thumb.png 2KB

contentPatternTop.png 142B

1.png 145KB

fontawesome-webfont.woff 64KB

contentPattern.png 121B

index-dark.html 13KB

light.css 983B

home-side.png 187KB

bootstrap.css 129KB

sprite.png 3KB

bulb-yellow.png 81KB

home.jpg 48KB

prettyPhoto.css 19KB

bulb-white.png 96KB

index.html 867B

5.png 86KB

4.png 74KB

11.jpg 63KB

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 2KB

contentPatternRight.png 136B

contentPatternBottom.png 142B

33.jpg 59KB

index-light.html 13KB

2.png 67KB

jquery.nicescroll.min.js 57KB

sprite_y.png 1KB

55.jpg 36KB

loader.gif 2KB

<!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>Clean Single Page 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="assets/css/themes/dark.css" rel="stylesheet" />  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' /> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top scrollclass"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">CLEAN + </a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#home-sec">Home</a></li> <li><a href="#features-sec">Features</a></li> <li><a href="#advance-sec">Advance</a></li> <li><a href="#gallery-sec">Gallery</a></li> <li><a href="#location-sec">Location</a></li> </ul> </div> </div> </div>  <div id="home-sec"> <div class="overlay"> <div class="container"> <div class="col-md-8 pad-top scrollclass"> <h1> <strong>Simple way to <mark>Attract </mark>your audience by this page </strong> </h1> <p class="home-p"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis felis dolor vitae. Mauris sagittis felis dolor vitae. Mauris sagittis felis dolor vitae Mauris sagittis felis dolor vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <a class="btn btn-primary btn-lg btn-home" href="#features-sec">Explore More   <i class="fa fa-toggle-on"></i></a> </div> <div class="col-md-4 img-home-side "> <img src="assets/img/home-side.png" class="img-responsive" /> </div> </div> </div> </div>  <section id="features-sec"> <div class="container"> <div class="row text-center min-set"> <div class="col-md-12"> <h2><mark class="head-glow">Awesome </mark>Features </h2> <hr class="sub-hr" /> </div> </div> <div class="row"> <div class="col-md-4 text-center"> <img src="assets/img/1.png" class="img-set" /> <h3>Dolor sit ametn</h3> <hr /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> <div class="col-md-4 text-center"> <img src="assets/img/bulb-yellow.png" class="main-img" /> </div> <div class="col-md-4 text-center" style="padding-top: 10px;"> <img src="assets/img/2.png" class="img-set" /> <h3>Lorem ipsum dolo</h3> <hr /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> </div> </div> </section>  <section id="skill-sec"> <div class="overlay"> <div class="container"> <div class="row "> <div class="col-lg-3 col-md-3 col-sm-3 text-center "> <i class="fa fa-bullseye fa-5x"></i> <h4>New Technology</h4> </div> <div class="col-lg-3 col-md-3 col-sm-3 text-center "> <i class="fa fa-dollar fa-5x"></i> <h4>Reduced Cost</h4> </div> <div class="col-lg-3 col-md-3 col-sm-3 text-center "> <i class="fa fa-comments-o fa-5x"></i> <h4>Dedecated Support </h4> </div> <div class="col-lg-3 col-md-3 col-sm-3 text-center"> <i class="fa fa-user fa-5x"></i> <h4>Awesome Skill </h4> </div> </div> </div> </div> </section>  <section id="advance-sec"> <div class="container"> <div class="row text-center min-set"> <div class="col-md-12"> <h2><mark class="head-glow">Advance </mark>Options </h2> <hr class="sub-hr" /> </div> </div> <div class="row"> <div class="col-md-4 text-center"> <img src="assets/img/4.png" class="img-set" /> <h3>Dolor sit ametn</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> <div class="col-md-4 text-center"> <img src="assets/img/5.png" class="img-set" /> <h3>Dolor sit ametn</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> <div class="col-md-4 text-center"> <img src="assets/img/3.png" class="img-set" /> <h3>Dolor sit ametn</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> </div> </div> </section>  <div id="just-sec" style=""> <div class="overlay"> + YOUR HEADLINE GOES HERE + </div> </div> <div class="copyrights">Collect from <a href="http://www.moobnn.com/" title="网站模板">网站模板</a></div>  <section id="gallery-sec"> <div class="container "> <div class="row text-center min-set"> <div class="col-md-12"> <h2><mark class="head-glow">Galle

评论收藏

内容反馈