Читать «Bootstrap: Быстрое создание современных сайтов» онлайн - страница 5
Тимур Сергеевич Машнин
<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;»>
© 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»>
