API tools faq
paste
Advertisement
aTmpl

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

aTmpl
Mar 15th, 2015
366
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Lua 7.36 KB | None | 0 0
raw download clone embed print report
  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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!