LibKing » Книги » Компьютеры и Интернет » Прочая околокомпьтерная литература » Тимур Машнин - Bootstrap: Быстрое создание современных сайтов

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

Тут можно читать онлайн Тимур Машнин - Bootstrap: Быстрое создание современных сайтов - бесплатно ознакомительный отрывок. Жанр: Прочая околокомпьтерная литература, издательство Литагент Ридеро. Здесь Вы можете читать ознакомительный отрывок из книги ознакомительный отрывок из книги онлайн без регистрации и SMS на сайте LibKing.Ru (ЛибКинг) или прочесть краткое содержание, предисловие (аннотацию), описание и ознакомиться с отзывами (комментариями) о произведении.
Тимур Машнин - Bootstrap: Быстрое создание современных сайтов

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

Bootstrap: Быстрое создание современных сайтов - описание и краткое содержание, автор Тимур Машнин, читайте бесплатно онлайн на сайте электронной библиотеки LibKing.Ru
Bootstrap представляет собой свободный фреймворк интерфейсов для быстрой и простой Web разработки. Bootstrap предоставляет шаблоны дизайна, основанные на HTML и CSS для разметки, форм, кнопок, таблиц, навигации, диалоговых окон, каруселей изображений и многого другого, а также дополнительные плагины JavaScript. На основе Bootstrap можно легко создавать сайты с «отзывчивым дизайном», одинаково хорошо выглядящие на всех типах устройств, от небольших телефонов до настольных компьютеров.

Bootstrap: Быстрое создание современных сайтов - читать онлайн бесплатно ознакомительный отрывок

Bootstrap: Быстрое создание современных сайтов - читать книгу онлайн бесплатно (ознакомительный отрывок), автор Тимур Машнин
Свет

Шрифт:

Сбросить

Интервал:

Закладка:

Сделать

Перемещать столбцы вправо или влево можно с помощью классов col-md-push-* и col-md-pull-* соответственно, где звездочка это значение от 1 до 11. При этом за сценой используется CSS свойство left: и right:.

<div class=«col-md-4 col-md-push-4»> <p> green pushed 4 </p> </div>

<div class=«col-md-4 col-md-pull-4»> <p> red pulled 4 </p> </div>


Фото

Тест 1 на знание Bootstrap

Вопрос 1

Что такое Twitter Bootstrap?


Вопрос 2

Зачем использовать Bootstrap?


Вопрос 3

Что Bootstrap пакет включает в себя?


Вопрос 4

Что такое Contextual классы таблицы в Bootstrap?


Вопрос 5

Что такое Bootstrap Grid System?


Вопрос 6

Что такое Bootstrap медиа запросы?


Вопрос 7

Покажите основную табличную структуру в Bootstrap.


Вопрос 8

Что такое Offset смещение столбцов?


Вопрос 9

Как можно упорядочить столбцы в Bootstrap?


Вопрос 10

Как сделать изображения отзывчивыми?


Вопрос 11

Объясните шрифты и ссылки в Bootstrap.


Вопрос 12

Что такое нормализовать Normalize в Bootstrap?


Вопрос 13

Что такое Lead Body Copy?


Вопрос 14

Объясните типы списков поддерживаемых Bootstrap.


Вопрос 15

Что такое glyphicons?


Вопрос 16

Как использовать Glyphicons?


Вопрос 17

Что такое плагин transition?


Вопрос 18

Что такое Modal плагин?


Вопрос 19

Как использовать плагин Dropdown?


Вопрос 20

Что такое Bootstrap карусель?


Вопрос 21

Что такое группа кнопок?


Вопрос 22

Какой класс используется для основной группы кнопок?


Вопрос 23

Какой класс используется, чтобы нарисовать панель кнопок?


Вопрос 24

Какие классы могут быть применены к группе кнопок вместо изменения размера каждой кнопки?


Вопрос 25

Какой класс отображает набор кнопок вертикально, а не горизонтально?


Вопрос 26

Что такое input группы?


Вопрос 27

Как создать меню навигации с вкладками?


Вопрос 28

Как создать меню навигации с кнопками?


Вопрос 29

Как создать вертикальное меню навигации с кнопками?


Вопрос 30

Что такое bootstrap navbar?


Вопрос 31

Как создать NavBar в bootstrap?


Вопрос 32

Что такое bootstrap breadcrumb?


Вопрос 33

Какой класс используется для базовой нумерации страниц?


Вопрос 34

Как настраивать ссылки нумерации страниц?


Вопрос 35

Что такое bootstrap метки?


Вопрос 36

Что такое 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>

<title> </title>

<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=«#» title=«»> </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/images/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;»>

&copy; 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 уже имеются.

Читать дальше
Свет

Шрифт:

Сбросить

Интервал:

Закладка:

Сделать


Тимур Машнин читать все книги автора по порядку

Тимур Машнин - все книги автора в одном месте читать по порядку полные версии на сайте онлайн библиотеки LibKing.




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


Отзывы читателей о книге Bootstrap: Быстрое создание современных сайтов, автор: Тимур Машнин. Читайте комментарии и мнения людей о произведении.


Понравилась книга? Поделитесь впечатлениями - оставьте Ваш отзыв или расскажите друзьям


Прокомментировать
Большинство книг на сайте опубликовано легально на правах партнёрской программы ЛитРес. Если Ваша книга была опубликована с нарушениями авторских прав,
пожалуйста, направьте Вашу жалобу на PGEgaHJlZj0ibWFpbHRvOmFidXNlQGxpYmtpbmcucnUiIHJlbD0ibm9mb2xsb3ciPmFidXNlQGxpYmtpbmcucnU8L2E+ или заполните форму обратной связи.
img img img img img