README
Aquesta és la versió antiga de la maqueta corporativa basada en Bootstrap 3. Si estàs fent un nou projecte utilitza la versió v2 de la maqueta corporativa sobre en Bootstap 4.
Maqueta corporatia v2
Bootstrap 4
Bootstrap 4
Tipus de maqueta
Recomanacions
Sempre que pugueu treballeu amb CDNs per carregar les llibreries estàndard com Bootstrap, jQuery, etc... tal i com ho fa aquesta web.
No editeu mai un estil o script d'una llibreria ni afegiu el vostre codi en el mateix fitxer, les llibreries externes han de ser independents i actualitzables.
Recordeu-vos de validar el codi de sortida de les vostres aplicacions:
- Validar l’estructura del HTML5 amb: https://validator.w3.org/nu
- Validar el contrast de colors a nivell AA amb: http://webaim.org/resources/contrastchecker
- Treballa amb baners, capçaleres i imatge en JPG i PNG (no GIF ni BMP) i correctament comprimides amb: https://compressor.io/compress
Teniu disponibles dues llibreries d'icones vectorials en font, feu-ne un ús preferent abans d'utilitzar imatges o alters llibreries:
- Font awesome: http://fontawesome.io/icons
- Glyphicons: http://glyphicons.com
Exemple de codi per començar
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="utf-8">
<title>Maqueta corporativa DiBa</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://media.diba.cat/diba/maqueta/logos/favicon.ico" rel="Shortcut Icon">
<meta name="theme-color" content="#A41E34">
<meta name="msapplication-config" content="none">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://lamp.diba.cat/maqueta-corporativa/css/diba-template.css">
</head>
<body>
<div class="container">
<header id="regio-cap">
<div id="top-header">
<div class="row">
<div class="col-md-4 col-md-offset-8 col-sm-5 col-sm-offset-7">
<div class="cercador header-left">
<form role="search" action="#">
<div class="input-group">
<input type="text" class="form-control" placeholder="Cerca...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="logos">
<div class="row">
<div class="col-xs-6 logo-esq">
<a href="#" title="Exemple de maqueta corporativa">
<img src="http://lamp.diba.cat/maqueta-corporativa/img/logo-producte.jpg" alt="" class="pull-left img-responsive logo45">
</a>
</div>
<div class="col-xs-6 logo-dre">
<a href="http://www.diba.cat" target="_blank" title="Diputació de Barcelona">
<img src="https://media.diba.cat/diba/maqueta/logos/logo-diba.png" alt="" class="pull-right img-responsive logo45">
</a>
</div>
</div>
</div>
<nav class="navbar navbar-default dibamenu" id="regio-menu">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-elements" aria-expanded="false" aria-controls="menu-elements">
<span class="sr-only">Commutador de navegació</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="menu-elements" class="navbar-collapse collapse">
<ul class="nav nav-justified">
<li><a href="?s=configurador&t=producte&masonry=&datatables=">Configurador</a></li>
<li><a href="?s=basic&t=producte&masonry=&datatables=">Bàsic</a></li>
<li><a href="?s=diba&t=producte&masonry=&datatables=">Components</a></li>
<li><a href="?s=formularis&t=producte&masonry=&datatables=">Formularis</a></li>
<li><a href="?s=pagina&t=producte&masonry=&datatables=">Pàgina</a></li>
<li><a href="?s=botons&t=producte&masonry=&datatables=">Botons</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div id="regio-cos" role="main">
<div class="row">
<div class="col-sm-12" id="contingut">
<!--
El teu contingut a columna completa.
Si utilitzes menús laterals o dreceres cal afegir nous cols.
-->
</div>
</div>
</div>
<footer id="regio-peu" class="sep-bottom-gruixut">
<div id="regio-peu-top" class="row">
<div class="col-sm-4">
<div class="logos clearfix">
<a href="http://www.diba.cat" target="_blank" title="Logo producte">
<img src="http://lamp.diba.cat/maqueta-corporativa/img/logo-producte.jpg" alt="" class="pull-left img-responsive logo45">
</a>
</div>
</div>
<div class="col-sm-4">
<ul class="list-diba">
<li><a href="#">Xarxes socials</a></li>
<li><a href="#">Aplicacions mòbils</a></li>
<li><a href="#">Comunitats de pràctica</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="list-diba">
<li><a href="#">Accessibilitat</a></li>
<li><a href="#">Avís legal</a></li>
<li><a href="#">Mapa web</a></li>
</ul>
</div>
</div>
<div id="regio-peu-bottom" class="row">
<div class="col-sm-4">
<div class="sep-top-interior logos clearfix">
<a href="http://www.diba.cat" target="_blank" title="Diputació de Barcelona">
<img src="https://media.diba.cat/diba/maqueta/logos/logo-diba.png" alt="" class="pull-left img-responsive logo45">
</a>
</div>
</div>
<div class="col-sm-8">
<div class="xarxes sep-bottom-interior sep-top-interior">
<ul class="list-inline">
<li class="facebook">
<a href="https://www.facebook.com/DiputaciodeBarcelona" target="_blank" title="Facebook">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x xarxa-bg" aria-hidden="true"></i>
<i class="fa fa-facebook fa-stack-1x xarxa-icon" aria-hidden="true"></i>
</span>
</a>
</li>
<li class="twitter">
<a href="https://twitter.com/Diba" target="_blank" title="Twitter">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x xarxa-bg" aria-hidden="true"></i>
<i class="fa fa-twitter fa-stack-1x xarxa-icon" aria-hidden="true"></i>
</span>
</a>
</li>
<li class="youtube">
<a href="https://www.youtube.com/user/Diba" target="_blank" title="YouTube">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x xarxa-bg" aria-hidden="true"></i>
<i class="fa fa-youtube-play fa-stack-1x xarxa-icon" aria-hidden="true"></i>
</span>
</a>
</li>
<li class="instagram">
<a href="https://www.instagram.com/dibacat/" target="_blank" title="Instagram">
<img src="https://media.diba.cat/diba/maqueta/xarxes/instagram.png" alt="instagram">
</a>
</li>
<li class="butlletins">
<a href="http://www.diba.cat/web/sala-de-premsa/butlletins-diba" target="_blank" title="Butlletins">
<img src="https://media.diba.cat/diba/maqueta/xarxes/butlleti.png" alt="butlletins">
</a>
</li>
<li class="rss">
<a href="http://www.diba.cat/web/sala-de-premsa/nota-de-premsa/-/journal/rss/2596612?doAsGroupId=553295&refererPlid=390764&_15_groupId=553295" target="_blank" title="RSS">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x xarxa-bg" aria-hidden="true"></i>
<i class="fa fa-rss fa-stack-1x xarxa-icon" aria-hidden="true"></i>
</span>
</a>
</li>
</ul>
</div>
<div class="adreca">
<address>
<small>Diputació de Barcelona. Rambla de Catalunya, 126. 08008 Barcelona. Tel. 934 022 222</small>
</address>
</div>
</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>