Проект

Общее

Профиль

BOOTSTRAP » История » Версия 4

Александр Александров, 27.04.2019 23:42

1 1 Александр Александров
h1. BOOTSTRAP
2
3
h2. Вопросы
4
5
# Что такое Twitter Bootstrap?
6 2 Александр Александров
# Какие основные преимущества Bootstrap?
7 1 Александр Александров
# Что включает в себя пакет Bootstrap?
8
# Какие основные инструменты Bootstrap?
9
# Что такое отзывчивый или адаптивный дизайн?
10
# Что такое Contextual классы таблицы в Bootstrap?
11
# Что такое Bootstrap Grid System?
12
# Что такое Bootstrap media запросы?
13
# Какие виды контейнеров в Bootstrap вы знаете?
14
# Покажите основную табличную структуру в Bootstrap.
15
# Что такое Offset смещение столбцов?
16
# Как можно упорядочить столбцы в Bootstrap?
17
# Какими двумя способами вы можете отобразить код в Bootstrap?
18
# Как сделать изображения responsive(отзывчивым)?
19
# Какие основные этапы создания формы в Bootstrap?
20
# В чем разница между вертикальною и горизонтальной формой?
21
# Объясните типографику и ссылки в Bootstrap.
22
# Что такое Нормализация(Normalize) в Bootstrap?
23
# Что такое Lead Body Copy?
24
# Какие типы списков поддерживаются в Bootstrap?
25
# Что такое Glyphicons?
26
# Как использовать Glyphicons?
27
# Что такое плагин Transition?
28
# Что такое Modal плагин?
29
# Как использовать плагин Dropdown?
30
# Что такое Bootstrap карусель?
31
# Что такое группа кнопок?
32
# Какой класс используется для основной группы кнопок?
33
# Какой класс используется, чтобы нарисовать панель кнопок?
34
# Какие классы могут быть применены к группе кнопок вместо изменения размера каждой кнопки?
35
# Какой класс отображает набор кнопок вертикально, а не горизонтально?
36
# Что такое input группы?
37
# Как создать меню навигации с вкладками?
38
# Как создать меню навигации с кнопками?
39
# Как создать вертикальное меню навигации с кнопками?
40
# Что такое bootstrap navbar?
41
# Как создать navbar в bootstrap?
42
# Что такое bootstrap breadcrumb?
43
# Какой класс используется для базовой нумерации страниц(pagination)?
44
# Что такое bootstrap метки?
45
# Что такое bootstrap бейджики?
46
# Что такое Bootstrap Jumbotron?
47
# Что такое Bootstrap page header?
48
# Как создать миниатюры thumbnails, используя Bootstrap?
49
# Как настроить миниатюры, используя Bootstrap?
50
# Что такое bootstrap alerts?
51
# Как создать bootstrap alert?
52
# Как создать Bootstrap Dismissal Alert?
53
# Как создать прогресс-бар, используя Bootstrap?
54
# Как создать альтернативный прогресс-бар, используя bootstrap?
55
# Как создать прогресс-бар в полоску, используя bootstrap?
56
# Как создать анимированный прогресс-бар, используя bootstrap?
57
# Как создать набор прогресс-баров, используя bootstrap?
58
# Что такое bootstrap медиа-объекты?
59
# Для чего нужен класс ".media" в bootstrap?
60
# Для чего нужен класс ".media-list" класса в bootstrap?
61
# Что такое bootstrap panels?
62
# Как создать bootstrap панель с заголовком?
63
# Как создать bootstrap панель с footer?
64
# Какие контекстные классы доступны для оформления панелей?
65
# Как объединить несколько bootstrap панелей?
66
# Можете ли вы поместить таблицу в панель?
67
# Как стилизовать таблицу горизонтальными разделителями?
68
# Как стилизовать таблицу повторяющимся разным фоном строк?
69
# Как добавить границы к ячейкам таблицы?
70
# Как добавить изменение фона строки при наведении курсора?
71
# Как уменьшить отступ ячеек наполовину?
72
# Как сделать разноцветным фон строк таблицы?
73
# Что такое bootstrap well?
74
# Что такое scrollspy плагин?
75
# Что такое affix плагин?
76
77
h2. Ответы
78
79
h3. Что такое Twitter Bootstrap?
80
81 2 Александр Александров
Bootstrap (также известен как Twitter Bootstrap) - свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения. Bootstrap использует самые современные наработки в области CSS и HTML, поэтому необходимо быть внимательным при поддержке старых браузеров.
82
83
h3. Какие основные преимущества Bootstrap?
84
85
Основные преимущества Bootstrap:
86
87
* Экономия времени - Bootstrap позволяет сэкономить время и усилия, используя шаблоны дизайна и классы, и сконцентрироваться на других разработках.
88
* Высокая скорость - динамичные макеты Bootstrap масштабируются на разные устройства и разрешения экрана без каких-либо изменений в разметке.
89
* Гармоничный дизайн - все компоненты платформы Bootstrap используют единый стиль и шаблоны с помощью центральной библиотеки. Дизайн и макеты веб-страниц согласуются друг с другом.
90
* Простота в использовании - платформа проста в использовании, пользователь с базовыми знаниями HTML и CSS может начать разработку с Twitter Bootstrap.
91
* Совместимость с браузерами - Twitter Bootstrap совместим с Mozilla Firefox, Yandex Browser, Google Chrome, Safari, Internet Explorer и Opera.
92
* Открытое программное обеспечение - Twitter Bootstrap это фреймворк с открытым исходным кодом, который предполагает удобство использования, посредством открытости исходных кодов и бесплатной загрузки.
93
* Он также поддерживает кастомизацию на веб-основе.
94
95 1 Александр Александров
h3. Что включает в себя пакет Bootstrap?
96
97 2 Александр Александров
Bootstrap включает включает в себя:
98
99
* Scaffolding - Bootstrap предоставляет базовую структуру с табличной системой Grid System, стилями ссылок, фоном.
100
* CSS - Bootstrap поставляется с функцией глобальных CSS настроек, основными HTML элементами, имеющими стили и улучшенных с помощью расширяемых классов, и передовой табличной системой.
101
* Components - Bootstrap содержит более десятка компонентов многократного использовании, построенных для обеспечения иконографии, выпадающих элементов, навигации, оповещений, всплывающих панелей popovers, и многое другое.
102
* JavaScript Plugins - Bootstrap содержит более десятка пользовательских подключаемых модулей jQuery. Вы можете легко подключить их все, или по одному.
103
* Customize - вы можете настроить Bootstrap компоненты, LESS переменные и jQuery плагины, чтобы получить свою собственную версию Bootstrap.
104
105 1 Александр Александров
h3. Какие основные инструменты Bootstrap?
106
107 2 Александр Александров
Основные инструменты Bootstrap:
108
109
* Сетки - заранее заданные размеры колонок, которые можно сразу же использовать, например ширина колонки 140px относится к классу ".span2" (".col-md-2" в третьей версии фреймворка), который можно использовать в CSS описании документа.
110
* Шаблоны - фиксированный или резиновый шаблон документа.
111
* Типографика - описания шрифтов, определение некоторых классов для шрифтов, таких как код, цитаты и т. п.
112
* Медиа - представляет некоторое управление изображениями и видео.
113
* Таблицы - средства оформления таблиц, вплоть до добавления функциональности сортировки.
114
* Формы - классы для оформления форм и некоторых событий происходящих с ними.
115
* Навигация - классы оформления для табов, вкладок, страничности, меню и тулбара.
116
* Алерты - оформление диалоговых окон, подсказок и всплывающих окон.
117
118 1 Александр Александров
h3. Что такое отзывчивый или адаптивный дизайн?
119
120 2 Александр Александров
Отзывчивый или адаптивный дизайн (responsive, adaptive) позволяет создавать веб-сайты, которые меняют свой внешний вид в зависимости от разрешения экрана, чтобы удобно было просматривать один и тот же сайт на различных устройствах - от телефона до настольного компьютера с большим монитором.
121
122 1 Александр Александров
h3. Что такое Contextual классы таблицы в Bootstrap?
123
124 2 Александр Александров
Contextual классы позволяют изменить цвет фона табличных строк или индивидуальных ячеек:
125
126
* .active - применяет цвет при наведении на конкретную строку или ячейку.
127
* .success - указывает на успешное или положительное действие.
128
* .warning - указывает предупреждение, что, возможно, потребуется действие.
129
* .danger - указывает на опасное или потенциально негативное действие.
130
131 1 Александр Александров
h3. Что такое Bootstrap Grid System?
132
133 2 Александр Александров
Bootstrap включает в себя отзывчивую, гибкую "сетку", которая надлежащим образом масштабируется до 12 столбцов при увеличении размера устройства или окна просмотра. Она включает в себя предопределенные классы для простых вариантов компоновки, а также мощные сложные классы для генерации более семантических макетов.
134
135 1 Александр Александров
h3. Что такое Bootstrap media запросы?
136
137 2 Александр Александров
Медиа запросы (Media Queries) - позволяют перемещать, показывать и скрывать контент, основываясь на размере экрана.
138
139 1 Александр Александров
h3. Какие виды контейнеров в Bootstrap вы знаете?
140
141 2 Александр Александров
Контейнер является "фундаментом", с которого начинают создавать сетку вебстраницы сайта. На платформе Twitter Bootstrap контейнеры бывают 2 видов:
142
143
* Фиксированный контейнер (элемент div с классом ".container"). Он имеет строго определённую ширину для определённого типа устройств. Т.е. для одного устройства контейнер имеет одну ширину, для другого устройства - другое значение ширины. Всего в Bootstrap 3 определено 4 типа устройств:
144
** xs (смартфоны - ширина контейнера равна ширине рабочей области окна браузера).
145
** sm (планшеты - 750px).
146
** md (ноутбуки - 970px).
147
** lg (персональные компьютеры - 1170px). Позиционируется фиксированный контейнер в горизонтальном направлении по центру, это достигается за счёт CSS свойства "margin: 0 auto".
148
* Жидкий "текучий" контейнер (элементы div с классом ".fluid-container"). Он имеет ширину, равную ширине рабочей области окна браузера. Т.е. ширина жидкого "текучего" контейнера не является фиксированной, а изменяется при любом изменении ширины рабочей области окна браузера. Сетку сайта, которую проектируют на основе жидкого "текучего" контейнера называют ещё "резиновой".
149
150 1 Александр Александров
h3. Покажите основную табличную структуру в Bootstrap.
151
152 2 Александр Александров
Ниже пример базовой структуры Bootstrap сетки:
153
154
{{dmsf_image(368)}}
155
156 1 Александр Александров
h3. Что такое Offset смещение столбцов?
157
158 2 Александр Александров
Смещения расстояние между столбцами это полезная функция для более специализированных шаблонов. Она может быть использована, например, чтобы сместить столбцы на дополнительный интервал. ".соl-xs = *" - классы не поддерживают смещения, но они легко копируются с помощью пустой ячейки.
159
160 1 Александр Александров
h3. Как можно упорядочить столбцы в Bootstrap?
161
162 2 Александр Александров
Вы можете легко изменить порядок встроенных столбцов с помощью классовмодификаторов ".col-md-push-*" и ".col-md-pull-*" в диапазоне от 1 до 11.
163
164 1 Александр Александров
h3. Какими двумя способами вы можете отобразить код в Bootstrap?
165
166 2 Александр Александров
Код в Bootstrap вы можете отобразить двумя способами:
167
168
* Поместить код в строковый тег <code>.
169 4 Александр Александров
* Для выделения 2-х и более строк кода используйте тег "<pre>". Избегайте использования угловых скобок "<" и ">", для корректного отображения фрагментов кода. Всегда используйте теги <pre> как можно левее в редакторе кода, так как внутри тега <pre> сохраняются все отступы и пробелы.
170 2 Александр Александров
171 1 Александр Александров
h3. Как сделать изображения responsive(отзывчивым)?
172
173 2 Александр Александров
Bootstrap 3 позволяет сделать изображения отзывчивыми путем добавления класса ". img-responsive" в тег <img>. Этот класс применяет "max-width: 100%;" и "height:  auto;" к изображению, так что изображение красиво масштабируетcя относительно родительского элемента
174
175 1 Александр Александров
h3. Какие основные этапы создания формы в Bootstrap?
176
177 2 Александр Александров
Основные моменты при создании и оформлении формы представим в виде следующих этапов:
178
179
* Указать вид формы. В Bootstrap 3 различают следующие виды форм: вертикальная (без добавления класса), горизонтальная (.form-horizontal) и в одну строку (.form-inline).
180
* Добавить к необходимым текстовым элементам управления <input>, <textarea>, <select> класс ".form-control", чтобы установить им ширину, равную 100% (всю доступную ширину родительского элемента). 
181
* Поместить каждую надпись (<label>) и элемент управления в контейнер <div>... </div> с классом ".form-group". Это необходимо сделать, чтобы задать для элементов в форме оптимальные отступы.
182
183 1 Александр Александров
h3. В чем разница между вертикальною и горизонтальной формой?
184
185 2 Александр Александров
Вертикальная форма - это макет формы, в которой её элементы располагаются вертикально, т.е. один под другим. Данная форма создаётся без добавления класса к элементу формы (<form>). Метки и элементы управления формы необходимо размещать в блоке с классом ".form-group".
186
187
Горизонтальная форма - это форма, в которой надписи и элементы управления находящиеся в одной группе (<div class="form-group">...</div>) располагаются на одной строке.
188
189 1 Александр Александров
h3. Объясните типографику и ссылки в Bootstrap.
190
191 2 Александр Александров
Bootstrap устанавливает основной глобальный фон, типографику и стили ссылок.
192
193
* Основной глобальный фон - устанавливает "background-color: #fff" в элементе <body>.
194
* Шрифты - используют @font-family-base, @font-size-base, и @line-height-base атрибуты.
195
* Стили ссылок - устанавливают глобальный цвет ссылки через атрибут @link-color и применяют подчеркивание ссылки исключительно для ":hover".
196
197 1 Александр Александров
h3. Что такое Нормализация(Normalize) в Bootstrap?
198
199 2 Александр Александров
Bootstrap использует нормализацию чтобы установить кросс согласованность для браузеров.
200
201
Normalize.css это современная, HTML5 - готовая альтернатива CSS. Это небольшой файл CSS, который обеспечивает лучшую кросс-браузерную согласованность в стилях по умолчанию для HTML элементов.
202
203 1 Александр Александров
h3. Что такое Lead Body Copy?
204
205 2 Александр Александров
Чтобы добавить некоторою выразительность параграфу, добавте class="lead". Это даст вам больший размер шрифта, легчий вес, и более высокую высоту строки.
206
207 1 Александр Александров
h3. Какие типы списков поддерживаются в Bootstrap?
208
209 2 Александр Александров
Bootstrap поддерживает упорядоченные списки, неупорядоченные и списки определений.
210
211
* Упорядоченный список(Ordered lists) - является списком. который отображается в каком-либо последовательном порядке и начинается с цифры.
212
* Неупорядоченный список(Unordered lists) - является списком, который не имеет никакого определенного порядка и отображается в традиционном стиле с маркерами. Если вы не хотите, чтобы маркеры отображались, вы можете удалить стиль, используя класс ".list-unstyled". Вы также можете разместить все элементы списка в одну строку с помощью класса ".list-inline".
213
* Списки определений(DeÙnition lists) - в этом типе списка, каждый элемент списка может состоять из <dt> и <dd> элементов. <dt> обозначает термин "определение", и как в словаре, это термин (или словосочетание), которое определяется. Далее, <dd> является определением <dt>. Вы можете разместить термины и описания в <dl> линии бок о бок с использованием класса "dl-horizontal".
214
215 1 Александр Александров
h3. Что такое Glyphicons?
216
217 2 Александр Александров
Glyphicons это великолепный набор иконок, которые вы можете использовать вместо изображений в ваших веб-проектах.
218
219 1 Александр Александров
h3. Как использовать Glyphicons?
220
221 2 Александр Александров
Чтобы использовать Glyphicons значки, просто используйте следующий код почти в любом месте в вашем коде. Оставьте пространство между значком и текстом для правильного заполнения.
222
223
<pre>
224
<span class = "glyphicon glyphicon-search"></span>
225
</pre>
226
227 1 Александр Александров
h3. Что такое плагин Transition?
228
229 2 Александр Александров
Плагин Transition предоставляет простые эффекты перехода, такие как скольжения или затухание в диалоговых окнах.
230 1 Александр Александров
231
h3. Что такое Modal плагин?
232
233 2 Александр Александров
Modal это окно предназначенное для отображения на веб-странице некоторого контента посредством модального окна. В Bootstrap 3 и 4, модальное окно (modal) представляет собой контейнер, который визуально отображается над остальным содержимым страницы.
234
235
Модальные окна на веб-странице применяется для решения большого круга задач. Например, может использоваться для отображения регистрационной формы пользователю, изображения в увеличенном масштабе, какого-то важного события, произошедшего на сайте и чего-то другого.
236
237 1 Александр Александров
h3. Как использовать плагин Dropdown?
238
239 2 Александр Александров
Можно через атрибуты данных, добавить data-toggle="dropdown" на ссылку или кнопку для переключения выпадающего меню.
240
241
{{dmsf_image(369)}}
242
243
Если вам нужно сохранить ссылки нетронутыми (что полезно, если браузер не позволяет JavaScript), используйте атрибут data-target вместо href="#".
244
245
{{dmsf_image(370)}}
246
247
Для вызова dropdown меню с помощью JavaScript, используйте следующий метод
248
249
<pre>
250
$('dropdown-toggle').dropdown()
251
</pre>
252
253 1 Александр Александров
h3. Что такое Bootstrap карусель?
254
255 2 Александр Александров
Bootstrap карусель - это слайд-шоу компонент, для циклической смены элементов (изображений или текстовых слайдов). Карусель для картинок, позволяет создать
256
слайдшоу с использованием подписей, аннотаций и других различных элементов. Если страница для пользователя не видима (например, когда вкладка, содержащая карусель неактивна или окно браузера свёрнуто и т.д.), то карусель не будет осуществлять смену слайдов.
257
258
Стандартные методы Bootstrap карусели:
259
260
* .carousel(options) - инициализирует карусель с дополнительными параметрами и запускает процесс смены слайдов
261
* .carousel('cycle') - запускает процесс смены слайдов слева направо
262
* .carousel('pause') - останавливает процесс автоматической смены слайдов карусели
263
* .carousel(number) - осуществляет переход на определённый слайд карусели, который устанавливается с помощью числа number (отчёт ведётся с 0, по аналогии с массивом)
264
* .carousel('prev') - осуществляет переход на предыдущий слайд
265
* .carousel('next') - осуществляет переход на следующий слайд
266
267 1 Александр Александров
h3. Что такое группа кнопок?
268 2 Александр Александров
269
Группа кнопок позволяют разместить несколько кнопок вместе в одной строке. Это полезно, если вы хотите разместить элементы вместе.
270 1 Александр Александров
271
h3. Какой класс используется для основной группы кнопок?
272
273
h3. Какой класс используется, чтобы нарисовать панель кнопок?
274
275
h3. Какие классы могут быть применены к группе кнопок вместо изменения размера каждой кнопки?
276
277
h3. Какой класс отображает набор кнопок вертикально, а не горизонтально?
278
279
h3. Что такое input группы?
280
281
h3. Как создать меню навигации с вкладками?
282
283
h3. Как создать меню навигации с кнопками?
284
285
h3. Как создать вертикальное меню навигации с кнопками?
286
287
h3. Что такое bootstrap navbar?
288
289
h3. Как создать navbar в bootstrap?
290
291
h3. Что такое bootstrap breadcrumb?
292
293
h3. Какой класс используется для базовой нумерации страниц(pagination)?
294
295
h3. Что такое bootstrap метки?
296
297
h3. Что такое bootstrap бейджики?
298
299
h3. Что такое Bootstrap Jumbotron?
300
301
h3. Что такое Bootstrap page header?
302
303
h3. Как создать миниатюры thumbnails, используя Bootstrap?
304
305
h3. Как настроить миниатюры, используя Bootstrap?
306
307
h3. Что такое bootstrap alerts?
308
309
h3. Как создать bootstrap alert?
310
311
h3. Как создать Bootstrap Dismissal Alert?
312
313
h3. Как создать прогресс-бар, используя Bootstrap?
314
315
h3. Как создать альтернативный прогресс-бар, используя bootstrap?
316
317
h3. Как создать прогресс-бар в полоску, используя bootstrap?
318
319
h3. Как создать анимированный прогресс-бар, используя bootstrap?
320
321
h3. Как создать набор прогресс-баров, используя bootstrap?
322
323
h3. Что такое bootstrap медиа-объекты?
324
325
h3. Для чего нужен класс ".media" в bootstrap?
326
327
h3. Для чего нужен класс ".media-list" класса в bootstrap?
328
329
h3. Что такое bootstrap panels?
330
331
h3. Как создать bootstrap панель с заголовком?
332
333
h3. Как создать bootstrap панель с footer?
334
335
h3. Какие контекстные классы доступны для оформления панелей?
336
337
h3. Как объединить несколько bootstrap панелей?
338
339
h3. Можете ли вы поместить таблицу в панель?
340
341
h3. Как стилизовать таблицу горизонтальными разделителями?
342
343
h3. Как стилизовать таблицу повторяющимся разным фоном строк?
344
345
h3. Как добавить границы к ячейкам таблицы?
346
347
h3. Как добавить изменение фона строки при наведении курсора?
348
349
h3. Как уменьшить отступ ячеек наполовину?
350
351
h3. Как сделать разноцветным фон строк таблицы?
352
353
h3. Что такое bootstrap well?
354
355
h3. Что такое scrollspy плагин?
356
357
h3. Что такое affix плагин?
Go to top