Bootstrap: Быстрое создание современных сайтов Машнин Тимур
Что такое bootstrap бейджики?
Вопрос 37
Что такое Bootstrap Jumbotron?
Вопрос 38
Что такое Bootstrap page header?
Вопрос 39
Как создать миниатюры thumbnails, используя Bootstrap?
Вопрос 40
Как настроить миниатюры, используя Bootstrap?
Вопрос 41
Что такое bootstrap alerts?
Вопрос 42
Как создать bootstrap alert?
Вопрос 43
Как создать Bootstrap Dismissal Alert?
Вопрос 44
Как создать прогресс-бар, используя Bootstrap?
Вопрос 45
Как создать альтернативный индикатор, используя bootstrap?
Вопрос 46
Как создать прогресс-бар в полоску, используя bootstrap?
Вопрос 47
Как создать анимированный прогресс-бар, используя bootstrap?
Вопрос 48
Как создать набор индикаторов, используя bootstrap?
Вопрос 49
Что такое bootstrap медиа-объекты?
Вопрос 50
Что является целью. media класса в bootstrap?
Вопрос 51
Что является целью. media-list класса в bootstrap?
Вопрос 52
Что такое bootstrap panels?
Вопрос 53
Как создать bootstrap панель с заголовком?
Вопрос 54
Как создать bootstrap панель с подвалом?
Вопрос 55
Какие контекстные классы доступны для оформления панелей?
Вопрос 56
Можете ли вы поместить таблицу в bootstrap панели?
Вопрос 57
Можете ли вы поместить listgroup внутри bootstrap панели?
Вопрос 58
Что такое bootstrap well?
Вопрос 59
Что такое Scrollspy плагин?
Вопрос 60
Что такое affix плагин?
Быстрая адаптация сайта для мобильных устройств с помощью Bootstrap
Возьмем в качестве примера простой шаблон с фиксированной шириной, с меню, боковой панелью, контентом и подвалом.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN» "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml: lang=«en» lang=«en»>
<head>
<h2> </h2>
<meta http-equiv=«content-type» content=«application/xhtml+xml; charset=UTF-8» />
<meta name=«author» content=«» />
<meta name=«description» content=«» />
<meta name=«robots» content=«index, follow» />
<link rel=«stylesheet» type=«text/css» media=«screen» href="/file/theme/css/screen. css» />
</head>
<body>
<! – header – >
<div id=«header-wrap»> <div id=«header»>
<a name=«top»> </a>
<h1 id=«logo-text»> <a href=«#» h2=«»> </a> </h1>
<p id=«slogan»> </p>
<div id=«nav»>
<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>
<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/is/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»>
<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>
</div>
</div>
</nav>
</div>
<a name=«top»> </a>
<div class=«row»>
<div class=«col-sm-6 text-center»>
<h1> <a href="/"> </a> </h1>
<p> </p>
</div>
<div class=«col-sm-4 pull-right»>
<script>
Читать бесплатно другие книги:
