Bootstrap: Быстрое создание современных сайтов. Тимур Машнин
Чтение книги онлайн.
Читать онлайн книгу Bootstrap: Быстрое создание современных сайтов - Тимур Машнин страница 5
Название: Bootstrap: Быстрое создание современных сайтов
Автор: Тимур Машнин
Издательство: Издательские решения
Жанр: Компьютеры: прочее
isbn: 9785447462314
isbn:
<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»>
<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> <a href=«#»> Page2—1 </a> </li>
<li> <a href=«#»> Page2—2 </a> </li>
<li> <a href=«#»> Page2—3 </a> </li>
<li> <a href=«#»> Page2—4 </a> </li>
<li> <a href=«#»> Page2—5 </a> </li>
</ul>
</li>
<li> <a href=«#»> Contacts </a> </li>
</ul>
СКАЧАТЬ