Тимур Машнин

Bootstrap: Быстрое создание современных сайтов


Скачать книгу

Home </a> </li>

      <li> <a href=«#»> Page1 </a>

      <ul style=«height: auto; overflow: auto»>

      <li> <a href=«#»> Page1—1 </a> </li>

      </ul>

      </li>

      <li> <a href=«#»> Page2 </a>

      <ul style=«height: auto; overflow: auto»>

      <li> <a href=«#»> Page2—1 </a> </li>

      <li> <a href=«#»> Page2—1 </a> </li>

      </ul>

      </li>

      </ul>

      </div>

      <div id=«google-search»>

      <script>

      (function () {

      var cx = «»;

      var gcse = document.createElement (’script’);

      gcse. type = ’text/javascript’;

      gcse.async = true;

      gcse.src = (document.location.protocol == ’https:'? ’https:': ’http:») +

      «//www.google.com/cse/cse.js?cx=' + cx;

      var s = document.getElementsByTagName (’script’) [0];

      s.parentNode.insertBefore (gcse, s);

      }) ();

      </script>

      <gcse: search> </gcse: search>

      </div>

      </div>

      </div>

      <! – content-outer – >

      <div id=«content-wrap» class=«clear»>

      <div id=«content»>

      <div style=«width:1150px; height:15px; background: url(/file/theme/images/top.png);»>

      </div>

      <div id=«main»>

      </div>

      <! – sidebar – >

      <div id=«sidebar» style=«width:250px;»>

      <div class=«sidemenu»>

      <ul>

      <li> <a href=«»> Home </a> </li>

      <li> <a href=«#»> Page1 </a>

      <ul style=«height: auto; overflow: auto»>

      <li> <a href=«#»> Page1—1 </a> </li>

      </ul>

      </li>

      <li> <a href=«#»> Page2 </a>

      <ul style=«height: auto; overflow: auto»>

      <li> <a href=«#»> Page2—1 </a> </li>

      <li> <a href=«#»> Page2—1 </a> </li>

      </ul>

      </li>

      </ul>

      </div>

      <! – /sidebar – > </div>

      </div>

      <! – /content-out – >

      </div>

      <! – footer-outer – >

      <div id=«footer-outer» class=«clear»>

      <div id=«footer-wrap»>

      <div style=«margin-left:500px; float: left»>

      <p> <strong> <a href=«#top»> Top </a> </strong> </p>

      <p style=«margin-left:-100px;»>

      &copy; 2015 <strong> </strong>

      <strong style=«margin-left:20px;"> E-mail: </strong>

      </p>

      </div>

      </div>

      <! – /footer-outer – >

      </div>

      </body>

      </html>

      Заменим DOCTYPE на <!DOCTYPE html>.

      Атрибут lang в теге html и атрибут charset тега meta уже имеются.

      В начало тега <head> добавим:

      <! – Latest compiled and minified CSS – >

      <link rel=«stylesheet» href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

      <! – jQuery library – >

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

      <! – Latest compiled JavaScript – >

      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

      В тег <head> добавим:

      <meta name=«viewport» content=«width=device-width, initial-scale=1»>

      Обернем заголовок в класс. container и, используя Bootstrap Grid System и Bootstrap Navigation Bar, разместим меню, логотип и форму поиска в шапке.

      <div class=«container header»>

      <div class=«row»>

      <nav class=«navbar navbar-inverse»>

      <div class=«container-fluid»>

      <div class=«navbar-header»>

      <button type=«button» class=«navbar-toggle» data-toggle=«collapse» data-target=«#myNavbar»>

      <span class=«icon-bar»> </span>

      <span class=«icon-bar»> </span>

      <span class=«icon-bar»> </span>

      </button>

      </div>

      <div class=«collapse navbar-collapse» id=«myNavbar»>

      <ul class=«nav navbar-nav»>

      <li> <a href="/"> Home </a> </li>

      <li class=«dropdown»>

      <a class=«dropdown-toggle» data-toggle=«dropdown» href=«#»> Page1 <span class=«caret»> </span> </a>

      <ul class=«dropdown-menu inverse-dropdown»>

      <li> <a href=«#»> Page1—1 </a> </li>

      </ul>

      </li>

      <li class=«dropdown»>

      <a class=«dropdown-toggle» data-toggle=«dropdown» href=«#»> Page2 <span class=«caret»> </span> </a>

      <ul class=«dropdown-menu inverse-dropdown»>

      <li>