SHARE
TWEET

Генератор вёрстки bootstrap

aTmpl Mar 15th, 2015 313 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="ru">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.     <title>Генератор адаптивной вёрстки bootstrap</title>
  6. <base href="//atmpl.ru" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <meta name="Description" content="При помощи генератора можно быстро сделать нужную адаптивную вёрстку для плагина bootstrap.">
  9.     <script src="//code.jquery.com/jquery-latest.min.js"></script>
  10.     <script src="//use.typekit.net/xlr6gwy.js"></script>
  11.     <script>try{Typekit.load();}catch(e){}</script>
  12.     <link rel="stylesheet" href="/bootstrap/layout/aui.css">
  13.     <link rel="stylesheet" href="/bootstrap/layout/main.css">
  14.     <link href="/favicon.png" rel="shortcut icon" type="image/png">
  15.     <link rel="publisher" href="https://plus.google.com/106292100743979527533"/>
  16.   </head>
  17.   <body>
  18.     <header>
  19.       <div class="logo"></div>
  20.       <div class="menu">
  21.         <ul class="modify">
  22.           <li><a class="btn btn-shoelace btn-save"><i class="icon-cloud-upload"> </i>Сохранить</a></li>
  23.           <li><a class="btn btn-shoelace btn-update hidden"><i class="icon-cloud-upload"> </i>Сохранено</a></li>
  24.           <li><a class="btn btn-shoelace btn-preview hidden"><i class="icon-eye-open"> </i>Посмотреть</a></li>
  25.           <li><a class="btn btn-shoelace btn-edit hidden"><i class="icon-pencil"> </i>Редактировать</a></li>
  26.         </ul>
  27.       </div>
  28.     </header>
  29.     <div class="application-frame easing">
  30.       <div class="panels-wrapper">
  31.         <div class="navigator easing">
  32.           <div class="preview xs easing">
  33.             <div class="title-bar">
  34.               <div class="size-icon"><i class="icon-mobile-phone"> </i></div>
  35.               <div class="title">col-xs</div>
  36.             </div>
  37.             <div class="preview-container">
  38.               <div class="preview-rows"></div>
  39.             </div>
  40.           </div>
  41.           <div class="preview sm easing">
  42.             <div class="title-bar">
  43.               <div class="size-icon"><i class="icon-tablet"> </i></div>
  44.               <div class="title">col-sm</div>
  45.             </div>
  46.             <div class="preview-container">
  47.               <div class="preview-rows"></div>
  48.             </div>
  49.           </div>
  50.           <div class="preview md easing">
  51.             <div class="title-bar">
  52.               <div class="size-icon"><i class="icon-laptop"> </i></div>
  53.               <div class="title">col-md</div>
  54.             </div>
  55.             <div class="preview-container">
  56.               <div class="preview-rows"></div>
  57.             </div>
  58.           </div>
  59.           <div class="preview lg easing">
  60.             <div class="title-bar">
  61.               <div class="size-icon"><i class="icon-desktop">  </i></div>
  62.               <div class="title">col-lg</div>
  63.             </div>
  64.             <div class="preview-container">
  65.               <div class="preview-rows"></div>
  66.             </div>
  67.           </div>
  68.         </div>
  69.         <div class="workspace easing"></div>
  70.         <div class="html easing">
  71.           <div class="collapse-panel right"> <span class="open"><i class="icon-caret-right"> </i></span><span class="closed"><i class="icon-caret-left"> </i></span></div>
  72.           <div class="html-wrapper">
  73.             <div class="options easing">
  74.               <div class="container-check">
  75.                <label>
  76.                   <input type="checkbox" class="use-less-mixin"> Использовать LESS
  77.                 </label>
  78.                 &nbsp;&nbsp;
  79.                 <label>
  80.                   <input type="checkbox" class="include-container"> Использовать контейнер
  81.                 </label>
  82.               </div>
  83.               <div class="clear"></div>
  84.             </div>
  85.             <div class="output_container">
  86.               <pre class="output prettyprint lang-html markup"></pre>
  87.               <pre class="output prettyprint lang-text mixins"></pre>
  88.             </div>
  89.             <textarea class="copy-output"></textarea>
  90.           </div>
  91.         </div>
  92.       </div>
  93.     </div>
  94.     <div class="preview preview-pane hidden">
  95.       <div class="container">
  96.         <div class="row">
  97.           <div class="col-sm-12"><span class="info">Наведите курсор на макет</span>
  98.             <ul class="hover-guide">
  99.               <li class="container-guide">Серым выделен контейнер</li>
  100.               <li class="row-guide">Красным выделены секции</li>
  101.               <li class="col-guide">Голубым выделены ячейки</li>
  102.               <li></li>
  103.             </ul>
  104.           </div>
  105.         </div>
  106.       </div>
  107.       <div class="container output-preview"></div>
  108.     </div>
  109.     <footer>
  110.       <ul>
  111.         <li><a href="http://www.helloerik.com">&copy; Дизайн by Erik</a></li>
  112.         <li><a href="http://atmpl.ru">&reg; Адаптация by aTmpl</a></li>
  113.         <li><a href="http://atmpl.ru/publ/web_tools/generator_adaptivnoj_vjorstki_bootstrap/24-1-0-77">&hearts; Использование</a></li>
  114.       </ul>
  115. <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  116. <!-- Layout Bootstrap -->
  117. <ins class="adsbygoogle"
  118.      style="display:inline-block;width:728px;height:15px"
  119.      data-ad-client="ca-pub-9755402484655972"
  120.      data-ad-slot="7118826570"></ins>
  121. <script>
  122. (adsbygoogle = window.adsbygoogle || []).push({});
  123. </script>
  124.     </footer>
  125.     <div class="blackout-overlay">
  126.       <div class="notification">С О Х Р А Н Я Е М</div>
  127.     </div>
  128.     <script type="text/javascript" src="https://google-code-prettify.googlecode.com/svn/loader/prettify.js"></script>
  129.     <script type="text/javascript" src="/bootstrap/layout/jshint.js"></script>
  130.     <script type="text/javascript" src="/bootstrap/layout/cljs.js"></script>
  131. <!-- Yandex.Metrika counter -->
  132. <script type="text/javascript">
  133. (function (d, w, c) {
  134.     (w[c] = w[c] || []).push(function() {
  135.         try {
  136.             w.yaCounter26966538 = new Ya.Metrika({id:26966538,
  137.                     clickmap:true,
  138.                     trackLinks:true,
  139.                     accurateTrackBounce:true});
  140.         } catch(e) { }
  141.     });
  142.  
  143.     var n = d.getElementsByTagName("script")[0],
  144.         s = d.createElement("script"),
  145.         f = function () { n.parentNode.insertBefore(s, n); };
  146.     s.type = "text/javascript";
  147.     s.async = true;
  148.     s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js";
  149.  
  150.     if (w.opera == "[object Opera]") {
  151.         d.addEventListener("DOMContentLoaded", f, false);
  152.     } else { f(); }
  153. })(document, window, "yandex_metrika_callbacks");
  154. </script>
  155. <noscript><div><img src="//mc.yandex.ru/watch/26966538" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
  156. <!-- /Yandex.Metrika counter -->
  157. <script>
  158.   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  159.   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  160.   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  161.   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  162.  
  163.   ga('create', 'UA-56490515-1', 'auto');
  164.   ga('send', 'pageview');
  165.  
  166. </script>
  167.   </body>
  168. </html>
RAW Paste Data
Top