Тимур Машнин - Bootstrap: Быстрое создание современных сайтов
Здесь можно купить и скачать "Тимур Машнин - Bootstrap: Быстрое создание современных сайтов" в формате fb2, epub, txt, doc, pdf. Жанр: Прочая околокомпьтерная литература, издательство ЛитагентРидеро78ecf724-fc53-11e3-871d-0025905a0812. Так же Вы можете читать ознакомительный отрывок из книги на сайте LibFox.Ru (ЛибФокс) или прочесть описание и ознакомиться с отзывами.
Название:
Bootstrap: Быстрое создание современных сайтов
Автор:
Издательство:
неизвестно
Год:
неизвестен
ISBN:
нет данных
Скачать:
Вы автор?
Книга распространяется на условиях партнёрской программы.
Все авторские права соблюдены. Напишите нам, если Вы не согласны.
Все авторские права соблюдены. Напишите нам, если Вы не согласны.
Как получить книгу?
Оплатили, но не знаете что делать дальше? Инструкция.
Описание книги "Bootstrap: Быстрое создание современных сайтов"
Описание и краткое содержание "Bootstrap: Быстрое создание современных сайтов" читать бесплатно онлайн.
Bootstrap представляет собой свободный фреймворк интерфейсов для быстрой и простой Web разработки. Bootstrap предоставляет шаблоны дизайна, основанные на HTML и CSS для разметки, форм, кнопок, таблиц, навигации, диалоговых окон, каруселей изображений и многого другого, а также дополнительные плагины JavaScript. На основе Bootstrap можно легко создавать сайты с «отзывчивым дизайном», одинаково хорошо выглядящие на всех типах устройств, от небольших телефонов до настольных компьютеров.
Обернем контент и подвал в класс. 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>
Подгонка текста под ширину экрана:
<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>
<p class = «text-primary»> This content carries a primary class </p>
<p class = «text-success»> This content carries a success class </p>
<p class = «text-info»> This content carries a info class </p>
<p class = «text-warning»> This content carries a warning class </p>
<p class = «text-danger»> This content carries a danger class </p>
<p class=«bg-primary»> This text is important. </p>
<p class=«bg-success»> This text indicates success. </p>
<p class=«bg-info»> This text represents some information. </p>
<p class=«bg-warning»> This text represents a warning. </p>
<p class=«bg-danger»> This text represents danger. </p>
Тег <abbr> обеспечивает подчеркивание текста пунктирной линией, при этом класс class=«initialism» слегка уменьшает шрифт:
<abbr title = «World Wide Web»> WWW </abbr>
Тег <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>
Тег <mark> подсвечивает текст:
<p> Use the mark element to <mark> highlight </mark> text. </p>
Элементы <dl>, <dt> и <dd> обеспечивают разметку словаря:
<dl>
<dt> Coffee </dt>
<dd> black hot drink </dd>
<dt> Milk </dt>
<dd> white cold drink </dd>
</dl>
При этом класс class=«dl-horizontal» выводит ключ-значение в одну строку:
<dl class=«dl-horizontal»>
<dt> Coffee </dt>
<dd> black hot drink </dd>
<dt> Milk </dt>
<dd> white cold drink </dd>
</dl>
Тег <code> выделяет текст цветом:
<p> HTML elements: <code> span </code>, <code> section </code>, and <code> div </code>. </p>
Тег <kbd> меняет фон и цвет текста:
<p> Use <kbd> ctrl + p </kbd> to open the Print dialog box. </p>
Тег <pre> меняет фон текста, сохраняя пробелы и переносы:
<pre>
Text in a pre
element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
</pre>
При этом класс class=«pre-scrollable» устанавливает максимальную высоту 350px и добавляет прокрутку.
Класс class=«list-unstyled» удаляет маркировку и отступы списка:
<ul class=«list-unstyled»>
<li> Coffee </li>
<li> Tea
<ul>
<li> Black tea </li>
<li> Green tea </li>
</ul>
</li>
<li> Milk </li>
</ul>
Класс class=«list-inline» выводит список в одну строку:
<ul class=«list-inline»>
<li> Coffee </li>
<li> Tea </li>
<li> Milk </li>
</ul>
Теги <del> и <s> перечеркивают текст:
<p> Use the s element to indicate <s> text that is no longer relevant </s>. </p>
<p> Use the del element to indicate <del> deleted text </del>. </p>
Теги <u> и <ins> подчеркивают текст:
<p> Use the u element to indicate <u> underlined text </u>. </p>
<p> Use the ins element to indicate <ins> inserted text </ins>. </p>
Тег <samp> меняет шрифт, имитируя вывод программы:
<p> To indicate sample output from a computer program, use the samp element: </p>
<p> <samp> This text is output from a computer program… </samp> </p>
Таблицы
Bootstrap класс. table стилизует HTML таблицу небольшим padding отступом и горизонтальными разделителями:
<table class=«table»>
<thead>
<tr>
<th> Firstname </th>
<th> Lastname </th>
<th> Email </th>
</tr>
</thead>
<tbody>
<tr>
<td> John </td>
<td> Doe </td>
<td>[email protected] </td>
</tr>
<tr>
<td> Mary </td>
<td> Moe </td>
<td>[email protected] </td>
</tr>
<tr>
<td> July </td>
<td> Dooley </td>
<td>[email protected] </td>
</tr>
</tbody>
</table>
Дополнительно класс class=«table table-striped» добавляет чередующуюся смену фона строк таблицы.
Класс class=«table table-bordered» добавляет разделители к ячейкам таблицы.
Класс class=«table table-hover» добавляет изменение фона при наведении курсора на строку таблицы.
Класс class=«table table-condensed» уменьшает высоту строки.
С помощью классов success, danger, info, active, warning можно выделять цветом строки таблицы.
Контейнер для таблицы <div class=«table-responsive»> добавляет горизонтальную прокрутку для экранов менее 768px.
Вопросы:
Как стилизовать таблицу горизонтальными разделителями?
Ответ: добавить класс. table.
Как стилизовать таблицу повторяющимся разным фоном строк?
Ответ: добавить класс. table-striped.
Как добавить границы к ячейкам таблицы?
Ответ: добавить класс. table-bordered.
Как добавить изменение фона строки при наведении курсора?
Ответ: добавить класс. table-hover.
Как уменьшить отступ ячеек наполовину?
Ответ: добавить класс. table-condensed.
Как сделать разноцветным фон строк таблицы?
Ответ: применить классы. success,.danger,.warning
Изображения
Bootstrap предлагает три вида формы изображений:
Класс. img-rounded – прямоугольник с закругленными углами.
<img src="sample.jpg» class=«img-rounded» alt=«»>
На Facebook
В Твиттере
В Instagram
В Одноклассниках
Мы Вконтакте
Подписывайтесь на наши страницы в социальных сетях.
Будьте в курсе последних книжных новинок, комментируйте, обсуждайте. Мы ждём Вас!
Подписывайтесь на наши страницы в социальных сетях.
Будьте в курсе последних книжных новинок, комментируйте, обсуждайте. Мы ждём Вас!
Похожие книги на "Bootstrap: Быстрое создание современных сайтов"
Книги похожие на "Bootstrap: Быстрое создание современных сайтов" читать онлайн или скачать бесплатно полные версии.
Понравилась книга? Оставьте Ваш комментарий, поделитесь впечатлениями или расскажите друзьям
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Отзывы о "Тимур Машнин - Bootstrap: Быстрое создание современных сайтов"
Отзывы читателей о книге "Bootstrap: Быстрое создание современных сайтов", комментарии и мнения людей о произведении.