Czym jest twitter bootstrap nie bende się rozwodził ,najogólniej to frameworkiem HTML5, CSS3, JS (jQuery) to co nas z niego interesuje to Responsive Web Desgin Czyli strony internetowe pasujące na "każdy ekran"
Jak podpiąć Bootstrap w szablonie joomla?
1.Ciagniemy paczke twitter.github.com/bootstrap/ Wybieramy to co nas interesuje .Ja zdecydowałem sie na 5 folderów:
-assets w nim podfoldery:css;img;js
-css w nim pliki :bootstrap.css;bootstrap.min.css;bootstrap-responsive.css;bootstrap-responsive.min.css
-img w nim pliki :glyphicons-halflings.png;glyphicons-halflings-white.png
-js w nim pliki :bootstrap.js;bootstrap.min.js
osobny foler na tym samym "poziomie" co folder assets czyli w głównym naszego szablonu joomla
-js w nim podfoldery:
-libs w nim pliki:index.html;jquery-1.7.1.min.js;modernizr-2.0.6.min.js
-mylibs;w nim plik index.php
-index.html
-plugins.js
-script.js
W pliku naszego szablonu strony joomla edytujemu index.php i w sekcji <head></head> Ładujemy pliki Bootstrap
<!-- ładuje pliki bootstrap-->Po tym zabiegu równiez w sekcji head podpinamy pozostałe pliki .Chociaz dla szybszego ładowania strony możemy podpiać je na końcu strony:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/css/bootstrap.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/css/docs.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/css/prettify.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/css/bootstrap-extended.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/css/template.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/css/joomla.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/css/bootstrap-responsive.css" type="text/css" media="screen" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/ico/apple-touch-icon-57-precomposed.png">
<!-- end botstrap-->
<!-- skrypty ajax-->I to było by na tyle .Jezeli coś przegapiłem proszę o komentarze.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="templates/<?php echo $this->template ?>/js/libs/jquery-1.7.1.min.js"><\/script>')</script>
<!-- scripts concatenated and minified via ant build script-->
<script defer src="templates/<?php echo $this->template ?>/js/plugins.js"></script>
<script defer src="templates/<?php echo $this->template ?>/js/script.js"></script>
<!-- end scripts-->
<script> // Change UA-XXXXX-X to be your site's ID
window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
Modernizr.load({
load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});
</script>
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
<!--pliki jasva modernizer-->
<script src="templates/<?php echo $this->template ?>/js/libs/modernizr-2.0.6.min.js"></script>
<!--end java modernizer-->
<!-- pliki java bootStrap-->
<!-- Placed at the end of the document so the pages load faster -->
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/js/jquery.js"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/js/bootstrap.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<!-- end javabootstrap -->
Brak komentarzy:
Prześlij komentarz