HTML5 framework, který nabízí mnoho možností…

Když jsem procházel příklady použití dostal jsem nápad. Nejdřív jsem si říkal, proč zase předělávat stránky a nechal to být. Mozek se ale nenechal odbýt a začal formovat nápady jak by to mohlo vypadat, co kde použít… Až jsem předělal celý web. Fotogalerii taky. Tam jsem narazil na problém. Bootstrap používá slider Carousel, který je skvělý. Líbí se mi, jenže nedokáže pracovat se seznamem fotek, které jsou na šířku i na výšku. Co je tedy potřeba upravit, aby to fungovalo? CSS. Obrázky budou na bílém pozadí, ukazetelé jsem chtěl mít na bílém pozadí také (žádné přechody, a efekty). Prostě nic co by rušilo. Hodnoty jsou pro rozměry fotografií 800×535, respektive 535x800px. Fotografie bude uprostřed obrazovky.

.carousel {height: 800px; margin-bottom: 60px;}  
.carousel .item {min-height: 801px; background-color: #FFF;}  
.carousel-inner > .item > img {margin-right: auto; margin-left: auto;}

Zbývá ještě provést úpravy ve stylu bootstrap pro Carousel. Včetně úprav vzhledu ukazatelů.

.carousel-inner {position: relative; overflow: hidden;}  
.carousel-inner > .item > a > img {display: block; height: auto; line-height: 1;}  
.carousel-control {max-height: 45%; color: #333; opacity: 0.7; filter: alpha(opacity=70); }  
.carousel-control.left {right: auto; left: 0; background-image: none;}  
.carousel-control.right {right: 0; left: auto; background-image: none;}  
.carousel-control:focus { color: #CCC; text-shadow: 0 1px 2px rgba(51, 51, 51, 1); text-decoration: none; outline: none; opacity: 0.9; filter: alpha(opacity=90); }