Название: Bootstrap: Быстрое создание современных сайтов
Автор: Тимур Машнин
Издательство: Издательские решения
Жанр: Компьютеры: прочее
isbn: 9785447462314
isbn:
Таким образом, исключим из шаблона все фоновые изображения, которые могут создавать горизонтальную прокрутку, заменим фоновые изображения на CSS градиенты.
Обернем контент и подвал в класс. container и используем Bootstrap Grid System.
<! – content-outer – >
<div class=«container content»>
<div class=«row»>
<div class=«col-sm-11 col-md-offset-1»>
<span class=«pull-right»>
<img src="/file/theme/add.jpg» alt=«» width=200/>
</span>
<div style=«padding-top:50px;»>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle. js»> </script>
<! – adds – >
</script>
</div>
</div>
</div>
<div class=«row»>
<div class=«col-sm-10»>
<! – content – >
<p>
</p>
</div>
</div>
</div>
<! – /content-out – >
<! – footer-outer – >
<div class=«container footer»>
<p style=«position: fixed; bottom: 12px; right: 5px; opacity: 1; cursor: pointer;"> <a href=«#top» style=«color: white;"> Top </a> </p>
<div class=«row»>
<div class=«col-*-* text-center»>
<script type=«text/javascript» src="//yandex.st/share/share. js» charset=«utf-8»> </script>
</div>
<div class=«row» style=«color: darkblue;»>
<div class=«col-*-* text-center»>
<br/>
<p>
© 2016 <strong> </strong>
<strong> [email protected] </strong>
</p>
</div>
</div>
</div>
<! – /footer-outer – >
Bootstrap Text/Typography
По умолчанию, глобальный размер шрифта Bootstrap, применяемый к тегу <body> и ко всем тегам <p>, является 14px, с высотой линии 1.428.
Кроме того, все <p> элементы имеют нижний margin-отступ, равный половине компьютерной высоте строки (10px по умолчанию).
Bootstrap заголовки <h1> – <h6> имеют следующий размер:
h1 – 36px
h2 – 30px
h3 – 24px
h4 – 18px
h5 – 14px
h6 – 12px
Для добавления вспомогательных заголовков используется тег <small>, который устанавливает размер шрифта 85%:
<h1> h1 heading <small> secondary text </small> </h1>
С помощью класса class = «lead» можно слегка увеличить размер шрифта параграфа:
<p class = «lead»> This is an example paragraph demonstrating the use of lead body copy. </p>
Тег <strong> делает шрифт жирным.
Тег <em> выделяет текст курсивом.
Для выравнивания и выделения текста цветом применяются классы:
<p class = «text-left»> Left aligned text. </p>
<p class = «text-center»> Center aligned text. </p>
<p class = «text-right»> Right aligned text. </p>
<p class=«text-lowercase»> Lowercased text. </p>
<p class=«text-uppercase»> Uppercased text. </p>
<p class=«text-capitalize»> Capitalized text. </p>