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

<h1> <a href="/"> </a> </h1>

<p> </p>

</div>

<div class=«col-sm-4 pull-right»>

<script>

(function () {

var cx = «»;

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

gcse. type = ’text/javascript’;

gcse.async = true;

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

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

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

s.parentNode.insertBefore (gcse, s);

}) ();

</script>

<gcse: searchbox-only> </gcse: searchbox-only>

</div>

<style>

.gsc-search-button {

display: none;

}

.gsib_a {

height:40px;

}

.gsc-input-box {

height: 40px;

}

</style>

<div style=«height:15px; background: black;" class=«col-sm-12»>

</div>

</div>

</div>

Уберем боковую панель и свой файл CSS, вместо него добавим CSS стили:

<style>

body {

font-size:18px;

font-famile: Georgia;

color: #000;

margin: 0;

padding: 0;

background: gray;

}

.header {

/* Permalink – use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e1ffff+0,e1ffff+4,fdffff+7,fdffff+7,e1ffff+17,e6f8fd+28,c8eefb+47,bee4f8+68,b1d8f5+100 */

background: #e1ffff; /* Old browsers */

background: -moz-linear-gradient (top, #e1ffff 0%, #e1ffff 4%, #fdffff 7%, #fdffff 7%, #e1ffff 17%, #e6f8fd 28%, #c8eefb 47%, #bee4f8 68%, #b1d8f5 100%); /* FF3.6—15 */

background: -webkit-linear-gradient (top, #e1ffff 0%,#e1ffff 4%,#fdffff 7%,#fdffff 7%,#e1ffff 17%,#e6f8fd 28%,#c8eefb 47%,#bee4f8 68%,#b1d8f5 100%); /* Chrome10—25,Safari5.1—6 */

background: linear-gradient (to bottom, #e1ffff 0%,#e1ffff 4%,#fdffff 7%,#fdffff 7%,#e1ffff 17%,#e6f8fd 28%,#c8eefb 47%,#bee4f8 68%,#b1d8f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient (startColorstr=«#e1ffff’, endColorstr=«#b1d8f5», GradientType=0); /* IE6—9 */

}

.inverse-dropdown {

background-color: black;

}

.inverse-dropdown li a {

color: white;

}

.inverse-dropdown li a: hover {

color: black;

}

.content {

background: lightgrey;

}

.footer {

/* Permalink – use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+86,207cca+93,7db9e8+100 */

background: #1e5799; /* Old browsers */

background: -moz-radial-gradient (center, ellipse cover, #1e5799 0%, #2989d8 86%, #207cca 93%, #7db9e8 100%); /* FF3.6—15 */

background: -webkit-radial-gradient (center, ellipse cover, #1e5799 0%,#2989d8 86%,#207cca 93%,#7db9e8 100%); /* Chrome10—25,Safari5.1—6 */

background: radial-gradient (ellipse at center, #1e5799 0%,#2989d8 86%,#207cca 93%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient (startColorstr=«#1e5799», endColorstr=«#7db9e8», GradientType=1); /* IE6—9 fallback on horizontal gradient */

}

.navigation {

margin: 10px 20px; padding-bottom: 10px;

width: 560px;

}

.navigation a: link,

.navigation a: visited {

float: left;

display: block;

margin: 10px 10px 0 0;

padding: 5px 7px;

text-transform: lowercase;

text-decoration: none;

font-weight: bold;

color: #fff;

background: #2C76A6;

border-width: 1px;

border-style: solid;

border-color: #86BBDF #245F86 #245F86 #86BBDF;

}

.navigation a: hover {

background: #FF3399;

border-width: 1px;

border-style: solid;

border-color: #FF75BA #EA0075 #EA0075 #FF75BA;

}

</style>

Таким образом, исключим из шаблона все фоновые изображения, которые могут создавать горизонтальную прокрутку, заменим фоновые изображения на 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>

&nbsp;

</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>

&copy; 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>

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

С помощью класса class = «lead» можно слегка увеличить размер шрифта параграфа:

<p class = «lead»> This is an example paragraph demonstrating the use of lead body copy. </p>

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

Тег <strong> делает шрифт жирным.

Тег <em> выделяет текст курсивом.

Для выравнивания и выделения текста цветом применяются классы:

<p class = «text-left»> Left aligned text. </p>

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

<p class = «text-center»> Center aligned text. </p>

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

<p class = «text-right»> Right aligned text. </p>

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

<p class=«text-lowercase»> Lowercased text. </p>

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

<p class=«text-uppercase»> Uppercased text. </p>

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

<p class=«text-capitalize»> Capitalized text. </p>

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

Подгонка текста под ширину экрана:

<p class=«text-justify»> Justified text. Justified text. Justified text. </p>

Отмена переноса строк:

<p class=«text-nowrap»> No wrap text. No wrap text. No wrap text. </p>

Выделение цветом:

<p class = «text-muted»> This content is muted </p>

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

<p class = «text-primary»> This content carries a primary class </p>

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

<p class = «text-success»> This content carries a success class </p>

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

<p class = «text-info»> This content carries a info class </p>

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

<p class = «text-warning»> This content carries a warning class </p>

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

<p class = «text-danger»> This content carries a danger class </p>

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

<p class=«bg-primary»> This text is important. </p>

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

<p class=«bg-success»> This text indicates success. </p>

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

<p class=«bg-info»> This text represents some information. </p>

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

<p class=«bg-warning»> This text represents a warning. </p>

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

<p class=«bg-danger»> This text represents danger. </p>

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

Тег <abbr> обеспечивает подчеркивание текста пунктирной линией, при этом класс class=«initialism» слегка уменьшает шрифт:

<abbr h2 = «World Wide Web»> WWW </abbr>

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

Тег <blockquote> выделяет текст как цитируемый, при этом класс class=«blockquote-reverse» выравнивает по правому краю:

<p> This is a default blockquote example. This is a default blockquote example. </p>

<blockquote>

<p> This is a default blockquote example. This is a default blockquote example. </p>

</blockquote>

<blockquote class=«blockquote-reverse»>

<p> This is a default blockquote example. This is a default blockquote example. </p>

</blockquote>

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

Тег <mark> подсвечивает текст:

<p> Use the mark element to <mark> highlight </mark> text. </p>

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

Элементы <dl>, <dt> и <dd> обеспечивают разметку словаря:

<dl>

<dt> Coffee </dt>

<dd> black hot drink </dd>

<dt> Milk </dt>

<dd> white cold drink </dd>

</dl>

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

При этом класс class=«dl-horizontal» выводит ключ-значение в одну строку:

Страницы: «« 123456 »»

Читать бесплатно другие книги:

Сергей Беляков – историк, литературовед, автор биографии-бестселлера «Гумилев сын Гумилева» (премия ...
Издание содержит три романа: «Кулинарная книга», «Где валяются поцелуи», «В каждом молчании своя ист...
Каждый из нас с детства верит в мечты. Мы мечтали, что мама пораньше заберет нас из детского сада, ч...
От этих историй замирает сердце и мороз идет по коже!В запертой комнате произошло ужасное убийство. ...
Аэрогриль – это поистине чудо-помощник на нашей кухне. С его помощью без особого труда вы сможете св...
Главный герой — зло, воплощённое в портрете царя Герода, написанного гением Ариком Моше, одним из сп...