Skip to content

brainfood / bootflat

Go to a project
Toggle navigation
Toggle navigation pinning
ade2e013 by bootflat
Options

modify Thumbnails‘s images and carousel's imagees

1 parent c646da25
Expand all
Inline Side-by-side
Showing 19 changed files with 24 additions and 11 deletions
......@@ -7,7 +7,6 @@ module.exports = function(grunt) {
'js/site.min.js': [
'js/jquery-1.10.1.min.js',
'js/bootstrap.min.js',
'js/holder.js',
'bootflat/js/icheck.min.js',
'js/application.js'
]
......
......@@ -1381,6 +1381,9 @@ a.list-group-item-danger.active, a.list-group-item-danger:hover, a.list-group-it
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.thumbnail a > img, .thumbnail > img {
width: 100%;
}
.thumbnail .caption {
font-size: 14px;
}
......@@ -1424,6 +1427,10 @@ a.list-group-item-danger.active, a.list-group-item-danger:hover, a.list-group-it
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.jumbotron .carousel-inner > .item > a > img,
.jumbotron .carousel-inner > .item > img {
width: 100%;
}
.jumbotron .carousel-control.left {
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
......
......@@ -42,6 +42,10 @@ $jumbotron-shadow: 0 1px 2px rgba(0, 0, 0, .2) !default;
& .carousel-inner > .item.active img {
@include radius($type: border-radius, $value: $jumbotron-radius $jumbotron-radius 0 0);
}
.carousel-inner > .item > a >img,
.carousel-inner > .item > img {
width: 100%;
}
& .carousel-control.left {
@include radius($type: border-radius, $value: $jumbotron-radius 0 0 0);
}
......
......@@ -19,6 +19,10 @@ $thumbnail-shadow: 0 1px 2px rgba(0, 0, 0, .2) !default;
border: none;
@include box-shadow($value: $list-shadow);
& a > img, & > img {
width: 100%;
}
& .caption {
font-size: 14px;
}
......
This diff could not be displayed because it is too large.
......@@ -1591,7 +1591,7 @@
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img class="img-rounded" data-src="holder.js/300x200/new" alt="300x200" src="" style="width: 300px; height: 200px; ">
<img class="img-rounded" src="img/thumbnail-1.jpg" >
<div class="caption text-center">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id ...</p>
......@@ -1601,7 +1601,7 @@
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img class="img-rounded" data-src="holder.js/300x200/new" alt="300x200" src="" style="width: 300px; height: 200px; ">
<img class="img-rounded" src="img/thumbnail-2.jpg">
<div class="caption text-center">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id ...</p>
......@@ -1611,7 +1611,7 @@
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img class="img-rounded" data-src="holder.js/300x200/new" alt="300x200" src="" style="width: 300px; height: 200px; ">
<img class="img-rounded" src="img/thumbnail-3.jpg">
<div class="caption text-center">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id ...</p>
......@@ -1621,7 +1621,7 @@
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img class="img-rounded" data-src="holder.js/300x200/new" alt="300x200" src="" style="width: 300px; height: 200px; ">
<img class="img-rounded" src="img/thumbnail-4.jpg">
<div class="caption text-center">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id ...</p>
......@@ -1790,21 +1790,21 @@
<h2 class="example-title">Media list</h2>
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#"><img class="media-object img-rounded" data-src="holder.js/64x64/new" alt="64x64" src="" style="width: 64px; height: 64px; "></a>
<a class="pull-left" href="#"><img class="media-object img-rounded" src="img/photo-1.jpg"></a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<p>12 Apr, 2013 at 12:00</p>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#"><img class="media-object img-rounded" data-src="holder.js/64x64/new" alt="64x64" src="" style="width: 64px; height: 64px; "></a>
<a class="pull-left" href="#"><img class="media-object img-rounded" src="img/photo-2.jpg"></a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
<p>12 Apr, 2013 at 12:10</p>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#"><img class="media-object img-rounded" data-src="holder.js/64x64/new" alt="64x64" src="" style="width: 64px; height: 64px; "></a>
<a class="pull-left" href="#"><img class="media-object img-rounded" src="img/photo-3.jpg"></a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
<p>12 Apr, 2013 at 12:20</p>
......@@ -1815,7 +1815,7 @@
</div>
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#"><img class="media-object img-rounded" data-src="holder.js/64x64/new" alt="64x64" src="" style="width: 64px; height: 64px; "></a>
<a class="pull-left" href="#"><img class="media-object img-rounded" src="img/photo-2.jpg"></a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
<p>12 Apr, 2013 at 12:30</p>
......@@ -1825,7 +1825,7 @@
</div>
</li>
<li class="media">
<a class="pull-right" href="#"><img class="media-object img-rounded" data-src="holder.js/64x64/new" alt="64x64" src="" style="width: 64px; height: 64px; "></a>
<a class="pull-right" href="#"><img class="media-object img-rounded" src="img/photo-4.jpg"></a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<p>12 Apr, 2013 at 12:50</p>
......
......@@ -4,7 +4,6 @@
!function ($) {
$(function(){
Holder.add_theme("new", { background: "#AC92EC", foreground: "#fff", size: 12 }).run();
$('.tooltip-demo').tooltip({
selector: "[data-toggle=tooltip]",
......
This diff could not be displayed because it is too large.