Galería con Bootstrap

Galería realizada con bootstrap y jquery.

by Pedro Aguirre

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
 <header class="">
  <div class="container">

      <!-- Static navbar -->
     <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="http://s6.postimg.org/wx6hy42vh/logo.png"></a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="index.html">Inicio<span class="diagonal">&nbsp/&nbsp</span></a></li>
        <li><a href="nosotros.html">Nosotros<span class="diagonal">&nbsp/&nbsp</span></a></li>
        <li class="dropdown">
          <a href="galeria.html">Galería <!-- <span class="caret"  class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"></span> --><span class="diagonal">&nbsp/&nbsp</span></a>  <!-- cambie los metyadatos solo por seguridad del a al span -->
    <!--       <ul class="dropdown-menu">
           <li><a href="cocina.html">Cocinas</a></li>
              <li><a href="consola.html">Consolas</a></li>
              <li><a href="garajes.html">Garajes</a></li>
              <li><a href="cocina.html">Mesas de cocina</a></li>
              <li><a href="bar.html">Mueble Bar</a></li>
              <li><a...

CSS

/*.gallery ul li img {
  width: 100px;
}*/
/*edito las cajas en T.R.B.L.  SOLO 2 DIMENSIONES SON Npx =T.B. NNpx = R.L.
todos los fondos con ../img/fondos/...
todas las img en ../img/...
media querys para proyecto
@media screen and ()
*/
*{
	margin:0;
	padding:0;
}
html { 
	font-size: 62.5%;
}
body{
	font-family: 'Open Sans', sans-serif;
}

.negro{
	font-weight: bold;
}
/**********************************
	MENU DE NAVEGACION
**********************************/
.navbar-default {
        background-color:#fff;
        border-color:#fff;
        margin:auto;
    }
    @media (max-width: 768px){
	a.navbar-brand img{max-height:30px;}
	.diagonal{display: none;}
}
.navbar-brand{
	/*margin-right: 100px;*/
	padding-left: 70px;
}
#navbar{
	margin-top: 25px;
	margin-right: 50px;
}
.diagonal{
	margin-right: 10px;
	margin-left: 30px;
}
.logo{
	margin-left: 178px;
}
.menu{
	padding: 2em;
}
nav{
	margin-top: 3em;
}
nav a{
	text-decoration: none;
	font-size: 1.1em;
	color: #485561;
}
nav a:hover{
	text-decoration: none;
	color: #c2c5c8;
}
nav a:visited{
	text-decoration: none;
	color: #cebf02;
}
nav a:active{
	text-decoration:underline;
	color:#cebf02;
}
label{
	font-weight: lighter;
	padding-left: 5px;
	margin: 7px;
}
input, textarea{
	margin: 7px
}
.text-left{
	font-size: 22px;
	font-weight: bold;
}
.btn{
	width: 20%;
	float: right;
}
/**********************************
	FOOTER DE LA PAGINA
**********************************/
footer{
	background-color: #191919;
	width:100%;
    /*height:100px;*/
    /*display:block;*/
/*    margin:0 auto auto auto;*/
    position: relative;
    bottom: 0;
}
.widt{
	width: 100%;
}
.active{
	color:red;
}


.tmision{
	font-size: 1.6em;
	font-weight: bold;
}
.mision{
	font-size: 1em;
	text-align: justify;
	padding-right: 50px;
}
.banner{
	width: 100%;
}
.x{
	margin-top: 16%;
	margin-bottom: 16%;
}
.xxxi{
	background-image: url(http://s6.postimg.org/su3hbrnv1/image.png);
	background-repeat: no-repeat;
	background-position: center;
}
section article...

JavaScript

function modal(idphoto) {
  $(".item").removeClass("active");
  $("ol.carousel-indicators li").removeClass("active");
  $("div#photo" + idphoto).addClass("active");
  $("ol.carousel-indicators li#photo" + idphoto).addClass("active");
}
$('.carousel').carousel({
	interval: false
});