Tip:
Highlight text to annotate it
X
>> Нееля MEHTA: Так привіт кожен, хто спостерігає тут,
або дивитися онлайн, або віддалено.
Мене звуть Ніл, це CS50.
І сьогоднішній семінар є Чуйний Веб-дизайн з Bootstrap.
Це предмет, який це дуже близько до серця.
Сподіваюся, це буде близько до серця
а до кінця сьогоднішнього семінару.
Так Bootstrap.
Як багато з вас зробили нічого вид веб-розробки раніше?
Гарне кількість?
Трохи.
>> Так Bootstrap це світ самих популярні, передній кінець рамки.
Він використовується по-- я вибрав пара випадкових websites--
Lyft, Newsweek, і Vogue.
Він використовується в ряді веб-сайтів.
Це основа веб-дизайн, що дозволить вам зробити ваші веб-сайти
як красиво і чуйним.
І я піду над ними два поняття тут.
Гарний.
Так у вас нормальна сайт на лівий, який зроблений тільки HTML.
Ви дізналися в класі HTML і в розділі в довжину.
Bootstrap це спосіб зробити Ваші сайти красиво.
Ви можете взяти те, що на ліва сторона вашого екрану
і перетворити його в те, що на права сторона екрану з дуже,
дуже, дуже мало код.
>> Ви отримуєте синю кнопку хороший, ви отримуєте фантазії, закруглені краї на екрані,
Ви отримуєте вид списку, ви отримаєте карт, і так далі з дуже невеликим коду.
Там немає насправді немає, що УС Ви повинні написати самі.
Так Bootstrap дозволяє Тобто ці попередньо побудований CSS
компоненти можна покласти всередині веб-сторінки
зробити його гарним, що не дуже багато роботи на свій розсуд.
Це дійсно початкового завантаження, відправною точкою,
для пригод веб-розробки.
І тому, коли ви просто глузливий створити сайт,
це дуже гарне місце, щоб почати.
Ви можете отримати гарний сайт з дуже, дуже мало роботи.
І справді, ми збираємося зробити це самі
в ході як п`ять minutes-- протягом 10 хвилин.
Так що це досить легко зробити деякі великі веб-сайтів.
Так от перша частина.
>> Другий пройшов проби реагувати.
Люди, в даний час, не просто доступ до мережі на своїх ноутбуках.
Насправді, як 2 014, все більше людей доступ до мережі через мобільні пристрої,
як телефони, або таблетки, або послуги, або так на чому веб-сайтів.
І сайти традиційно розроблений з ноутбуків або настільних ПК
в пам'яті.
І так веб-сайти часто вже не дуже добре підходить для вашого телефону.
Якщо ви коли-небудь відвідували harvard.edu на вашому телефоні,
це свого роду дратує досвід, чи не так?
Це тому, що це не реагувати.
Ми намагаємося, щоб сайти, які є оперативними,
які відповідають розмірів екрану людей.
>> Так що, якщо це телефон, це збираюся піти по телефону.
Якщо це таблетки, це збираюся йти на планшеті.
Він регулює, щоб відповідати екран, який використовується.
І так Bootstrap також надає деякі дуже, дуже корисні утиліти для цього.
І ми збираємося, щоб обговорити, що добре.
Отже, ще раз, є дві частини Bootstrap-- красивий і відповідальність.
Ми будемо говорити про них.
По-перше, красиво.
А потім реагувати.
>> Так весь код, що ми поговоримо про раз сьогодні
ми збираємося мати багато прикладів, багато проблем, і так on-- нього
всі живе на цьому сайті тут.
Цей слайд те, що ми розіслали.
Так що, якщо ви тут, ви можете відчувати себе безкоштовно і не потрібно писати, що вниз.
І якщо ви дивитеся віддалено, відчувати безкоштовно здійснити це на вашому комп'ютері
так само.
Ви, ймовірно, потрібно протягом курс цього семінару.
>> Отже, ми збираємося використовувати Сайт називається CodePen,
яка є спільним кодування навколишнє середовище, протягом цього семінару.
І CodePen-- і я показати вам, тут реальний fast--
це дозволяє писати HTML спільно.
Я можу написати це, я можу відправити його на хлопці, ви, хлопці, можете редагувати його.
Навіть якщо ви дистанційно, то ви можете отримати доступ до його таким чином.
Ви можете ввести код HTML на верх і він буде автоматично
бути перетворюють на Веб-сторінка в нижній частині.
Так що це для вас способом швидко випробувати код
без необхідності робити які-небудь речі на IDE, або ваш власний веб-сайт,
або щось.
>> Так що вперед і підтягти це сайт, якщо ви дистанційне
або якщо ви перебуваєте тут, особливо якщо ви пульта дистанційного керування.
is.gd/cs50boostrap.
Ні, не ковпачки підкреслення, немає нічого.
Так що ті з вас, хто тут, просто дайте мені великий палець
коли ви потягнули до цього веб-сторінки.
Добре?
>> АУДИТОРІЯ: Так.
>> Нееля MEHTA: Таким чином, ми отримаємо до того, що всього за секунду.
Отже, спочатку ми збираємося дістатися, як Ви робите ваші сайти красива?
Ми збираємося, щоб дізнатися, як взяти нудно, старий HTML, як я показав вам раніше,
і перетворити це в дійсно хороші компоненти,
як приємних віджетів, красивий, кольоровий Кнопки і мітки, і столи,
і все, за допомогою Bootstrap.
Так що, якби ми всі могли перейти до CodePen, що ви просто під'їхав.
Це має виглядати дещо, як це.
Це виглядає, як це для всіх?
>> АУДИТОРІЯ: Так.
>> Нееля MEHTA: Якщо ви дистанційне, це як повинен виглядати цей, як добре.
Якщо ні, я покажу вам, як тільки ви можете отримати його виглядати так
в майбутньому частина відео.
Так ось ми написали дуже простий HTML і
як вид у тебе використовує у своєму класі.
Це досить простий.
Ніяких надмірностей.
І у нас є деякі речі.
Ми розробили дуже, дуже простий запуск
зателефонувати Yalp! з якою ви можете знайти ресторани в області,
і знайти відгуки і направлення на всі з них.
Це дуже хороша концепція.
Це ніколи не було зроблено раніше.
Це дуже унікальне ім'я, теж.
>> Отже, що ми збираємося, щоб спробувати зробити, допомогти власникові
з Yalp! зробити його веб-сайт виглядають дійсно, дійсно здорово.
Таким чином, щоб почати з того, що власник Yalp! зробив трохи пошуку
коробка і маленька кнопка, а потім, можливо, трохи
виділеної області для виділений ресторан, а потім
список інших ресторанів які знаходяться в області.
Таким чином, ми можемо просто пройти через HTML-код дуже швидко.
Наскільки комфортно ви, хлопці, з HTML?
Ми зробили трохи розділ, а також у класі.
Гідний?
>> Так само, як повторення, HTML-все про те,
теги й елементи, які говорять Комп'ютер, як викласти веб-сторінку.
Так що це h1 here-- почати h1, Ласкаво просимо щоб Yalp!, кінець h1-- повідомляє комп'ютера,
намалювати великий заголовок це говорить, Ласкаво просимо в Yalp!
всередині є.
У нас також є форми.
Ми можемо входи, як це, текстові входи, який надаватиме в текстових полях
Ви пишете в.
У вас також є кнопки.
Ви отримаєте хороший, інтерактивні кнопки.
Це нічого не зробити прямо зараз, але ви отримаєте кнопку.
Ви можете мати діви, або роздільники, в розбити вашу сторінку в кілька груп.
>> Ви можете мати параграфи, у вас є кнопки.
Якщо у вас є пункти, потім у вас є невпорядкованих списків, UL,
і списки всередині, чи що.
Отже, це дуже простий будівельні блоки веб-сторінки.
І справді, досить багато кожен веб-сайт ви бачите
збирається бути побудований за допомогою цих же інструментів.
Звичайно, не всі вони шукати цю погано, тому що ми
збирається оживити його небагато.
Так що давайте цю нудну стару HTML і початок перетворюючи його в красивий сайт
що ми тільки що бачили пару хвилин тому.
>> Отже, давайте почнемо з дуже простою.
Отже, ми маємо цю кнопку тут.
У Bootstrap, як ми бачили, ми можемо є хороший, красивий, синій кнопку.
І це робиться не роблячи користувальницький CSS.
Там немає користувальницького CSS тут.
Це робиться шляхом додавання класів до ваших HTML елементів.
Якщо ви вже пробували класи або hrefs, або якоря, або тип = "текст" для inputs--
HTML елементи можуть мати ці атрибути.
Вони можуть мати додаткову інформацію що ви могли б їм дати.
>> І так, в цьому випадку, класи атрибут.
Таким чином, ви б написати, клас кнопку = щось всередині рядків.
І, що атрибут буде розповісти комп'ютер, це не який-небудь старий кнопку.
Це кнопка, яка знаходиться в цей клас кнопок.
І так Bootstrap, якщо ви даєте йому певний стиль на елемент,
вона приверне його певним чином.
Отже, я пишу "БТН БТН-основною.
BTN бути абревіатура для кнопки.
Ви помітите, що в даний час мій потворний кнопку повернувся
в хороший, красивий, синій кнопки.
Це виглядає дуже приємно, коли ми клацніть його.
>> І так, що відбувається у нас є клас BTN і БТН-клас основної
на нашому елемента.
І Bootstrap піде і сказати, добре, я знаю, що є ці два класи.
Будь-який елемент, який має ці два класи повинні бути зроблені як це.
Так що це ядро, як ви докладете стилі на елементи в Bootstrap.
Ви просто прикріпити класи для них і це буде важити його, як він вважає за потрібне.
Так ось ще один приклад.
У введення, можна додати клас = "форма контролю".
І я покажу тільки, де ви може з'ясувати, які класи
Доступні кожного виду елемента.
Але клас, який ми тільки що Додано має приємний, закруглені кути,
це має приємний відступи, він має хороший, блакитне світіння до нього.
>> Ми також можемо піти в цьому виді.
І клас = "Форма-рядний", який зробить наша форма, як ви можете собі уявити, рядний.
Так це виглядає трохи більш як те, що ми мали до вже.
Тому, перш ніж перейти до стилю решті сторінка, які-небудь питання про те, що ми
зробив?
Ми просто прикріплені класи в наших різних елементів.
І я покажу вам пізніше, як ви можете з'ясувати, які класи доступні.
Ми надаємо класи, є певні стилі.
І що говорить браузеру як макет сторінки за допомогою
Передбачені стилі Bootstrap в.
Будь-які питання від аудиторії?
>> Добре так далеко?
Прохолодний.
Багато проблем з початкового завантаження просто
знаючи, що компоненти доступні і як їх використовувати.
І це всі дізналися з досвідом, а також
через читання документації, які ми будемо говорити про найближчим часом.
Отже, ми маємо цей DIV.
Це просто нудно, стара річ.
Ми хочемо підкреслити, це якось.
Таким чином, в Bootstrap, є багато компонентів, доступних.
І це getbootstrap.com.
Це дуже корисне посилання.
Він містить речі like-- ось як ви робите кнопку.
І ви можете зробити панель навігації, ви можете етикетки, ви можете переходити барів,
Ви можете зробити список груп.
В принципі, це всі види з вас може побачити веб-сторінку.
>> Ось той, який ми постараємося зараз.
Це називається панель.
Якщо ви коли-небудь використовувати Google Тепер вони мають карти.
Або будь Android-пристрій має карти.
Вони мають маленькі білі коробки що є матеріал всередині нього.
І тому ми збираємося, щоб спробувати зробити що ми самі тут, використовуючи саме
називається панель.
Так що, якщо ми надаємо клас = "Панель Панель за умовчанням ", щоб нашого зовнішнього DIV,
Потім ми надаємо клас Div = - давайте просто перевірити цю документацію.
DIV клас = "Панель рубриці" і потім DIV клас = "панелі тіла".
Знову ж таки, не турбуватися про запам'ятовування цього коду.
Вона буде доступна в Інтернеті.
>> Таким чином, ми зробили це, і тепер наш нудно, старі DIV перетворився в цій милій, мало-карти.
Це має приємний відступи, його має меж, він виділяється
від іншої частини сторінки, який є досить прохолодно.
Так що давайте йти і міняти Отримати Кнопка напрямки виглядати красиво.
Хто в аудиторії хоче сказати мені, що я можу зробити, щоб кнопки
щоб зробити його добре виглядати, використовуючи Bootstrap?
Так?
>> АУДИТОРІЯ: Ми могли б додати клас.
І ми могли б зробити клас = "БТН БТН-основний".
Нееля MEHTA: Так.
Там купа іншої Кольори доступні для buttons--
або що-небудь, якщо на те пішло.
Ми можемо зробити БТН-небезпека і зробити його червоним.
Там ми йдемо.
Ми можемо зробити БТН-успіх, щоб зробити його зеленим.
Ми можемо зробити БТН-info-- є купа речей, які доступні для вас.
Так у мене є трохи виклик для вас зараз.
Так що ще одна річ, що я залишив поза-стилі.
Цей ТОП Ресторани.
>> І ми хочемо, щоб використовувати річ називається список групи, щоб розробити її.
Так що мій виклик вас перейти до getbootstrap.com--
Я буду тягнути його тут.
getboostrap.com.
Перейти до getbootstrap.com, знайти розділ, де вони переходять список груп.
І ви будете бачимо тут прикладом і правильні класи
що ви можете використовувати, щоб зробити ваше Списки в цих приємних список груп.
Вони розроблені приклади прикладів коду, те, що
код використовувати, які HTML код ви використовуєте, і що це виводить.
>> Так що мій виклик you-- перейти на getbootstrap.com,
Чи ви тут або у себе вдома, і щоб спробувати додати стилі до цього вул
щоб зробити його приємно дивитися.
І використовувати стиль списку групи.
Ви хочете взяти пару хвилин, і пошук документації,
спробувати це самі?
Тому що, як ви робите веб-розробки, Ви зрозумієте, багато вашої роботи
читатиме ця документація.
Так що я думаю, що це добре, щоб ознайомитися з тим, як прочитати документацію,
як з'ясувати, що, де, який код прикладів ви можете використовувати,
те, що ви можете використовувати.
>> Отже, ще раз, getbootstrap.com, перейдіть на вкладку Компоненти,
а потім перейдіть до списку груп.
І ви побачите, приклади коду, які Ви можете використовувати, щоб зробити ваш HTML відповідати, що.
Так що пару хвилин і спробувати досліджувати його самостійно,
Чи ви тут або у себе вдома.
Якщо ви знаходитесь вдома, пауза відео, мабуть, і спробувати його.
Якщо ви тут, якщо ви йдете в наш website-- якщо ви відновите сторінку,
Ви побачите, що це там.
Це той же код просто додавання нових стилів прямо там.
Так зайняти кілька хвилин.
Дозвольте мені знати, коли ви відчуваєте себе добре про це або коли ви повністю втратив.
Звук хороший?
Прохолодний.
Швидкий убік для тих з вас, будинку, в той час як ми чекали,
якщо ви йдете на сайт GitHub що я ставлю на пару слайдів назад,
до початку відео, У мене є репо GitHub репозиторії,
для цієї розмови.
Всі ці приклади коду, які ми будемо говорити про зберігаються тут.
Так що, якщо ви йдете, щоб кинути виклик-1.html, це весь код, що ми маємо зараз
на нашому CodePen.
Таким чином, ви можете просто йти вперед і скопіюйте це, і вставити його в свій власний CodePen.
І таким чином, ви можете йти в ногу з тим, що ми робимо тут.
Так що цю сторінку відкритою, а також ми пройти через решті частини семінару.
Знову ж таки, ви хочете, щоб вона виглядала так, як ви см вниз в нижній частині екрана
є.
Почуваюсь добре?
Тверда речовина.
Будемо чекати всіх інших, щоб закінчити з тим, що вони роблять.
>> Так?
>> АУДИТОРІЯ: Припустимо, що я хотів використовувати Bootstrap в home--
Нееля MEHTA: Так.
АУДИТОРІЯ: Я бачу, на сайті, Приступаючи сторінку.
Вони дають мені варіанти Bootstrap, Вихідний код, або Сасс.
Які з них я хочу?
>> Нееля MEHTA: Так.
Таким чином, питання в тому, як ви отримуєте почали використовувати Bootstrap від самих себе?
Це просто трапляється чарівно працювати тут.
Так що, якщо у нас є час на кінець семінару,
Я покажу вам, як ви можете отримати його на свій власний веб-сторінки.
Як тут, я насправді покласти в деякі настройки, які
буде автоматично завантажений, але я
показати вам, щоб зробити його з подряпини на ваших власних веб-сторінок.
>> АУДИТОРІЯ: Спасибо.
>> Нееля MEHTA: Так.
Гарне питання.
Почуваюсь добре?
Почуваюсь добре?
Прохолодний.
Так що хто хоче, щоб сказати мені, як вони зробили ця річ виглядати красиво і Boostrappy?
Що перший клас ми додамо до вул?
АУДИТОРІЯ: клас = "список-група".
Нееля MEHTA: Так. Список-група.
І тоді те, що ми надаємо ЛИС?
Хтось інший?
АУДИТОРІЯ: А потім, після що клас = "список-групу пункт".
>> Нееля MEHTA: Так.
>> АУДИТОРІЯ: І це те ж саме для наступного.
>> Нееля MEHTA: клас Li = "список-групу пункт".
Ось так.
У нас є хороший список групи, так само, як ми очікували.
Так що ви йдете.
Через 10 хвилин, ми зробили це нудно, старий Yalp! сторінка
виглядати красиво і професійно.
І це тільки початок.
Так що тепер ви відчуваєте добре, що про, давайте
просто йти вперед і говорити про Ще пара компоненти, які
може придатися, як ви перейти на протязі вашого пригоди.
>> Звичайно, є багато з них тут.
І тепер, коли ви дізналися, як зробити список груп,
Ви можете в значній мірі вчать самі, як зробити будь-який з них.
Але, звичайно, давайте просто спробувати і зробити пару більш себе,
тільки так ви отримаєте почуття для як ви могли б використовувати їх.
Я просто збираюся піти цьому прикладу тут.
Знову ж таки, код, який я тільки що вставили тут можна прямо тут.
Так що не соромтеся, щоб витягнути його.
>> Таким чином, ми вже пройшли через пара з цих прикладів.
Отже, ми маємо кнопки, які ми вже бачили, як це зробити.
Ми можемо зробити кнопки більше.
За кнопка class-- вона йде, BTN BTN-LG і БТН-замовчуванню робить його білим.
Таким чином, це робить нашу кнопку більше ніж могло б бути.
Це може стати в нагоді, якщо у вас є Великі кнопки або щось уявити.
Ми бачили приклад список групи, ми бачили приклад форми.
>> Один дуже важливим є те, іконки.
І ікони спосіб для вас, щоб додати цікаві речі, як перевірки перевірки
знаки, або плюси, або друг ікони, ікони чи перезапуск,
або щось на свій веб-додатки.
Отже, ще раз, якщо ми в тут, Компоненти, glyphicons,
є ікони, доступні для Bootstrap.
Там це вичерпний Список всіх тих, тут.
Так лише як приклад, давайте спробуємо додати один.
>> Так як Facebook, ми до спроби мати кнопку Додати друга.
Давайте спочатку додати деякий тип.
клас кнопку = "БТН БТН-успіху".
І ми йдемо.
Давайте додамо значок тут.
Що значок, Ви вважаєте, можливо, має сенс поставити тут?
Ви, напевно, бачили на деякі веб-сторінки або будь-який інший,
але те, що приклад значок, може йти добре всередині цієї кнопки?
Не соромтеся, щоб переглянути цю точку зору, якщо вам потрібен будь натхнення.
Там дуже багато корисної ті можна ознайомитися тут.
Так?
>> АУДИТОРІЯ: Може бути, glyphicon користувач одного?
Нееля MEHTA: ОК.
Цей.
Це дуже добре.
Так.
На Facebook, я думаю, що це буде виглядати трохи як, що.
Так от, як ми йдемо про додавання іконок на наших сторінках.
Ми просто є span-- проміжок є нейтральний контейнер для чогось.
DIV контейнер для чогось, проліт ще один контейнер.
діви є розриви рядків навколо них, прольоти не роблять.
Так що різні способи маючи спільні контейнери.
Як це не має сенсу, щоб покласти його всередині абзацу або що-небудь.
Ми повинні поставити його всередині щось, хоча,
таким чином, ми просто поставити всередину прольоту.
Так чистоті клас = glyphicon glyphicon користувач "поруч чистоті.
А тепер у нас є значок всередині кнопки.
>> Так що не дивіться повністю на відміну від що ви можете побачити на facebook.com.
І так приємно, що вони можуть насправді бути розміщені в будь-якому місці ви хочете.
У ваших барів заголовків, в список ваших груп.
Незалежно.
Це не повинні бути всередині кнопки.
Так як, наприклад, я можу поклав той же клас тут.
"glyphicon glyphicon користувач".
І виявляється такою ж.
Таким чином, ці icons-- ви можете використовувати діапазон клас = "glyphicon glyphicon щось, що".
І, що дозволить вам додати іконки, де ви хочете.
І ікони є дуже важливим частина створення сайту погляд
професійний і добре зроблено.
Так що не перестарайтеся, але це часто хороша річ, щоб знати.
>> Панелі знову.
Я просто зробити це знову, як Нагадаємо бо вони начебто участь.
Ви помітите, що в перетворюючи свій звичайний HTML
Сайт в Bootstrap-afied Сайт, ви будете мати
щоб додати додаткову структуру веб-сайту.
Наприклад, у нас є додаткова ПІВС тут тільки тому, що ті,
необхідні, щоб зробити панель.
Так що майте це на увазі, що Ви будете мати додатковий структуру.
Таким чином, "Панель Панель-замовчуванню".
Може бути, це панель заголовка.
Я думаю, що це панель-заголовок.
Так.
Там ми йдемо.
Так, знову ж таки, є наша панель.
>> Ще одна річ, яку ми ще не охоплюють, таблиці.
Столи, за замовчуванням погляд роду потворні.
Подобається це.
Але таблиці, звичайно, дуже важлива частина
що ви будете робити в веб-розробці.
У Pset7, наприклад, CS50 Фінанси, які вийдуть найближчим часом,
Ви будете використовувати багато таблиць.
І багато веб-розробника використовувати багато таблиць для відображення інформації,
як акції, або оцінки, або що завгодно.
>> Так укладання таблиці насправді дуже просто.
Ви додаєте клас таблиці для вашого столу.
І, насмілюся сказати, це виглядає досить добре.
Ви можете зробити додаткові речі, як "настільний смужку".
І ви побачите результати тут.
Ви можете зробити настільний межує.
Там дуже багато варіантів, ви можете.
Але в принципі, додавши стіл, клас таблиці,
зробить ваші таблиці виглядають досить приємно.
Так ось короткий виклад деякі з найбільш важливих стилів
і компоненти ви будете потрібно використовувати для Bootstrap.
Так що я думаю, що обгортання до нашої красивої частини.
Будь-які питання прямо зараз про те, як щоб зробити ваші сайти красива?
Як ви можете використовувати їх компоненти на вашу користь?
Почуваюсь добре?
Так?
АУДИТОРІЯ: Може бути, це дурне питання,
але ви можете використовувати Bootstrap у Вікіпедії?
Якщо ви редагуєте сторінку у Вікіпедії?
Нееля MEHTA: Так.
Таким чином, питання було, я редагуванні сторінки у Вікіпедії,
я можу включати стилі Bootstrap там?
>> АУДИТОРІЯ: Так.
>> Нееля MEHTA: І так бутстрап в основному великий аркуш CSS стиль.
Лист CSS стиль просто говорить, щоразу, коли У мене є цей клас, приєднати ці стилі.
Так аркуші стилів CSS для початкового завантаження буде щось на зразок .btn,
клас кнопку, отримаєте немов закруглений кут кордону або будь-який інший.
Так в основному, ініціалізувати її просто купа класів і купу стилів
вказано для цих класів.
Так що, поки у вас є, що CSS, цей список правил в вашої сторінки,
Ви отримаєте стиль Bootstrap.
Це, звичайно, залежить від маючи стилі Bootstrap у вашій сторінці
по-перше.
>> І так у Вікіпедії, Ви, ймовірно, не міг
зробити, тому що Wikipedia НЕ Bootstrap в ньому.
Але якщо вона є Bootstrap, Ви, ймовірно, може зробити це.
І якщо ви хочете, ви могли б включають в себе, але які могли б
зламати існуючий макет сторінки.
Але дуже гарне питання.
Ви можете використовувати Bootstrap там, де він входить,
але це не вбудований за замовчуванням.
>> АУДИТОРІЯ: Спасибо.
>> Нееля MEHTA: Так.
Є ще питання?
Так.
Так ви тут або у себе вдома, просто пам'ятайте, getboostrap.com-- знову,
getboostrap.com-- є вашим другом.
Всякий раз, коли ви використовуєте Bootstrap, це дасть вам
Інструкції про те, як отримати почав, як використовувати компоненти.
Там якась прохолодно JavaScript Плагіни, що ми не будемо йти сюди,
але вони, варто перевірити, як добре.
Так що це ваш друг.
Важливо тільки, щоб отримати використовується, як використовувати це.
>> Отже, давайте прямо трохи про робить відповідні веб-сайтів.
Отже, як я вже говорив, люди використовували їх ноутбуки, вони використовують свої телефони.
І, як ви могли б собі уявити, що це дуже різні розмір екрану, ніж це.
І так само, сайт що виглядає добре на моєму телефоні
не збирається, щоб добре виглядати, обов'язково, на комп'ютері.
Так що ви повинні зробити, це зробити ваш сайт адаптуватися.
Він має, щоб адаптуватися до різних розміри екрана, що це на.
>> Він повинен сказати, я знаю, що я на комп'ютер, великий ноутбук, я повинен розширюватися.
Я знаю, що по телефону, я повинен скорочуватися.
І так Bootstrap надає деякі дуже, дуже корисні інструменти, щоб зробити це.
Так Bootstrap давайте ви перерву сайт на 12 стовпців.
Ви можете зробити рядків і 12 стовпців є.
І ви можете розділити ті, як ви хочете.
Ви можете мати один, великий річ, що 12 колонки шириною.
Ви можете мати дві речі які є шестеро кожен.
Ви можете зробити одну річ, що чотирьох, той, який два чи один, що це шість.
Ви можете зробити три, три, три, три.
Ви можете робити все, що пробою, що ви хочете.
>> Тому, можливо, ваш веб-сторінка повинна мати Ліва колонка це одна третина ширини.
Так що було б чотири колонки Широкий і інша частина сторінки
буде вісім колон в ширину.
Так що це приклад.
Давайте підтягнути ще один приклад.
>> АУДИТОРІЯ: чи завжди це повинні бути ще розділити?
Може бути сьомій, п'ять розкол?
>> Нееля MEHTA: Так.
Це може бути сьомій, п'ять.
Так.
Поки це додає до 12, це нормально.
Так давайте повернемося сюди.
Знову ж таки, код, який тут також доступні тут,
під гнучкою. Наприклад,
Так що я просто під'їхав деякі Приклад реагувати код тут.
Таким чином, ви зробити це за допомогою що називається ряд.
Ряд просто інший клас.
Це ще один стиль, який ви додати на ваш ПІВС, щоб зробити їх власні компоненти.
>> Так ти кажеш, DIV клас = "рядок", щоб зробити ряд,
щоб дати собі 12 стовпців простору.
І тоді ви поклали стовпці всередині, що.
Так от, ми Col-XS-6.
Не турбуйтеся про хз.
Ми будемо говорити про в сек.
Але в принципі, у нас є один річ, яка шість у ширину.
Ми називаємо це залишилося.
І так от ліва коробка тут.
У нас є одна річ, яка шість з 12 колон у ширину.
І, що один знаходиться справа.
>> а просто дає марок Ваш DIV заповнити його сірим.
Так що просто так ми можемо бачити, що вони різні.
І тому цей перший приклад.
Це дуже простий приклад того, як ви буде використовувати свої рядки і стовпці тут.
Ви визначаєте рядок, використовуючи клас = "рядок".
І тоді ви клас = "Col-XS-6" зробити половина, "Col-XS-6", щоб зробити іншу половину.
Ось більш складний приклад.
Давайте подивимося на крихітні, Величезний, решта одним.
>> Ми можемо зробити Крихітні два стовпчики шириною, ми можемо зробити Величезні шостій колонок ширину,
А інші чотири колонки шириною.
Це додає до 12 років.
І тому ці зрештою охоплюють ширина сторінки.
Знову ж таки, у нас є ряд зовні.
Тоді у нас є DIV CLASS = "Col-XS-2" і потім 6, а потім 4.
І, що забезпечить структура для нас.
І тому ми можемо покласти всі чорт візьми, ми хочемо тут всередині.
Замість того, щоб Крихітний, ми можемо поставити кнопку.
клас кнопку = "БТН БТН-основний".
І так помітите, що наші кнопку не займає всю ширину,
але принаймні це обмежена в тому, що багато простору.
>> Так що все добре.
Так що тепер ми можемо розбити наш веб сторінка на шматки, ширина мудрим.
Ми можемо сказати, що ми хочемо мати ліву стовпець і правий стовпець, і так далі.
Але ми не пішли як ви зробите це реагувати.
І так Bootstrap давайте робити, що добре.
Вона має наступні речі, звані контрольні точки.
Так що є спосіб дізнатися, чи є Ви знаходитесь на ноутбук, ви на таблетки,
Ви знаходитесь на телефон горизонталі, або ви по телефону вертикалі.
Він знає розмір екрану.
І це розбиває чотирма categories-- великий або LG, який є ноутбуки, як правило ,.
MD або середу, яка є таблетки.
см, маленький.
Або хз, особливо малого.
І тому, коли ви вказуєте колонка, ви говорите,
вона повинна бути стовпці шириною шостій на додатковій невеликого пристрою.
Ось чому ми зробили Col-XS-6.
Ми говоримо, що треба бути шість з 12 колон широких
на додатковій невеликого пристрою.
І якщо це нічого більше, ми просто за замовчуванням використовувати додатковий невеликий розмір.
Якщо це щось більше, ніж Дуже малий, це буде шість у ширину.
І таким чином ми можемо використовувати це зробити з наших колонок
взяти різну кількість колони в залежності від розміру екрана.
Давайте повернемося до цієї реагувати зміною розмірів.
Таким чином, ми маємо наші колонки.
І це говорить, "стовпець-LG-6 кол-XS-12".
Тому, враховуючи те, що ви знаєте, досі, що ви
думаю, буде відбуваються на великому екрані?
Ну, це ніби Даний спосіб, але те, що роблять
Ви думаєте, це буде виглядати як на великому екрані?
І чому це?
>> АУДИТОРІЯ: Чи правда, що на великому екрані, це
займе тільки частина повного простору?
Як половині цього, я думаю ,?
>> Нееля MEHTA: Так.
>> АУДИТОРІЯ: А менше екраном, це буде
щоб зайняти весь екран, 12.
Нееля MEHTA: Так.
Право.
Так як приклад, давайте просто подивіться сюди.
Так.
Так на що-небудь, що це LG або bigger-- так мій комп'ютер відбувається
для LG, бо це досить wide-- це зробить
це пліч-о-пліч, бо це кол-LG-6.
Так, тому що це на великих, це робить його шостій стовпців в ширину і шість завширшки. стовпці
Давайте подивимося, що станеться, якщо я зробити це в менший.
Я просто хочу, щоб ООН-повний екран цьому.
І я збираюся стиснути екран.
Я збираюся зменшити екран, так що Схоже, я на меншому пристрої.
Так що я збираюся стиснути його, як це.
>> І вуаля.
В даний час складені тому що тепер ми пішли
від великого, метою яких це, ймовірно, додаткова невеликий розмір екрану.
І ось тепер він говорить, добре, ми не в цілому ми знаходимося в невеликої додаткової землі.
Отже, ми збираємося використовувати додаткова малий розмір.
І ми збираємося XS-12, XS-12.
Таким чином, це буде складені.
І тільки зауважити, що є річ називається зупину.
Точка зупину, де Ви зробили перехід
від особливо малого до дрібних, малого до великого, і так далі.
>> Так що просто зауважити, що, як я ковзати це з, зрештою, ви отримаєте в точці
де вони буду стрибати, щоб бути пліч-о-пліч.
Ось так.
Так що точка зупинки прямо там.
Таким чином, ми можемо зробити це ще складніше.
Тепер ми можемо говорити, що ці речі повинні бути чотири в ширину.
Тобто, вони повинні прийняти близько третини
промові на дуже великих пристроїв.
На середній устрою, він має прийняти до половини екрану, бо це MD-6.
На дуже маленькому пристрої, він повинен прийняти до 12.
І так це виглядає досить природно.
Давайте просто спробувати це для себе.
>> Так що на великому екрані, вони чотирма широкими.
Термозбіжна Це небагато.
І тепер вони шість у ширину.
Так що це шість, шість, шість.
Зменшити його ще більше і тоді вони будуть повністю складені.
Таким чином, це, наприклад, має сенс, якщо ви відчуваєте карти, як новини карт,
Наприклад, якщо при це на дуже великому екрані,
Це нормально, якщо у вас є кілька пліч-о-пліч тому що вони всі отримують достатньо місця.
Але вони повинні мати достатньо місця.
Так що на маленькому екрані, Ви хотіли б дати їм
більше місця, пропорційно, сторінки.
>> Так як, наприклад реальному світі, давайте, у нас є Twitter.
І у нас є текстове поле, так Ви можете чірікать на стороні.
І у нас є список трендів теми на правій стороні.
Так що на великому екрані, ми повинні вже їм бути пліч-о-пліч,
так що ви можете побачити їх на скло.
Але на невеликому екрані, ми повинні зробити 12 і 12,
так що теми трендів нижче області чірікать.
Оскільки область є твіт Головне і на маленькому екрані,
теми трендів НЕ незалежно від того, в тій же мірі.
І так ми їх прямо під, так що вони обидва можуть отримати достатньо місця.
Зробіть почуття досі?
>> АУДИТОРІЯ: Так.
>> Нееля MEHTA: Тверде речовина.
Так от всі приклади я тут.
Давайте спробуємо і зробити виклик.
Отже, ще раз, це завдання-2.html для тих з вас, наступних разом у себе вдома.
Так що мій приятель, Марк Цукерберг, прийшов до мене в інший день.
І він, як Нееля, у мене є отримав досить добре на веб-дизайні.
Я можу зробити HTML.
Я зробив це мало, Новий редагувати в Facebook.
У мене є нова ідея про те, як ми повинні укладати Facebook.
І ось воно.
Саме тут.
Ось приклад коду.
Так це називається Fancybook.
>> У нас є деякі оновлення статусу.
У нас є Немо, Майк Kosowski, ***-- три оновлення статусу.
І тоді у нас є список друзів онлайн прямо під ним.
Таким чином, він зробив свою домашню роботу.
Він знає трохи про Bootstrap, він зробив вигляд списку,
він зробив трохи HTML.
Таким чином, він має веб-сторінку.
Але він, як Нееля, я не зрозуміти чуйний дизайн взагалі.
Чи є у вас які-небудь експертів, які може мені допомогти з цим?
І, на щастя, тепер ви Експерти в чуйного дизайну.
>> Так що він сказав мені, що він був хоче Fancybook виглядати так.
На дуже маленькому пристрої, як телефон, всі
повинні бути укладені, як тут.
Так у вас є графік авансом, нагорі, а потім
Ви повинні мати чат бар внизу.
Але таблетки або середовищі Пристрій, вона повинна бути половина на половину,
як у строки повинні бути половина і список друзів чат
повинно бути на іншій половині.
>> Тоді на ноутбуці, терміни повинні взяти на три чверті
а потім чат хедж повинен взяти ще одну чверть.
І так він, як Нееля, у мене є це Код тут, але це не реагувати.
Вона повинна вести себе, як це.
Так що мій виклик вам дається цей код here--
Якщо Ви відновите сторінку CodePens, ви побачите, що це.
Або, якщо ви просто вставити в код на виклик-2, ви побачите, що це.
>> Ось цей приклад коду.
Ви побачите деякі xxxs.
Я хочу, щоб ви змінити xxxs, наприклад, що терміни і перелік друзів
слід цим специфікації тут.
Не хвилюйтеся про те, що це всередині терміни на даний момент.
Ми отримуємо, що на наступному етапі.
Але зараз, давайте подивимося, якщо ми отримаємо ці речі, щоб розбити його, як це.
Так це сенс?
Так що якщо ви знаходитесь вдома, призупинити відео і спробуйте
щоб зробити ваш веб-сторінки шукати реагувати, як це.
Якщо ви тут, прийняти як два, три хвилини.
Не соромтеся спілкуватися з сусідом, і спробувати, і виправити пан Цукерберг
реагувати дизайн проблема.
Якщо у вас є які-небудь питання, не соромтеся, дайте мені знати.
Почуваюсь добре?
Вчинено?
Ніцца.
>> АУДИТОРІЯ: [нерозбірливо].
Нееля MEHTA: Що?
>> АУДИТОРІЯ: Я добре.
>> Нееля MEHTA: О, добре.
Ніцца.
АУДИТОРІЯ: Справа в тому, 12, це, що Bootstrap
лікує даний простір екрану як 12 блоки по горизонталі і потім ділить це вигадав?
Як саме робить дозатори роботу для цього?
>> Нееля MEHTA: Так.
Таким чином, питання в тому, як робить дозування
працювати на Bootstrap, вірно?
>> АУДИТОРІЯ: Так.
Нееля MEHTA: Тому, коли у вас є DIV клас = "рядка",
незалежно від того, наскільки великий екран, Bootstrap дасть вам 12 одиниць
такого ж розміру в взяти так багато розмірів.
Таким чином, в сідловині 1, це завжди 8,33% від розміру екрану,
що будь це широкий або це такий широкий.
І так, звичайно, в меншому екраном, кожен стовпець менше.
У вас ще є 12 стовпців Широкий, це менше.
Так що це до вас, щоб переконатися, що що речі займають більше колонку,
пропорційно, щоб компенсувати Для цього недоліку місця.
Чи має це сенс?
>> АУДИТОРІЯ: Так.
Дякую.
Нееля MEHTA: Хороший вопрос.
АУДИТОРІЯ: На великій екраном, ви можете мати
термін зайняти до трьох чвертей?
>> Нееля MEHTA: Так.
Нееля MEHTA: Як хлопці себе почуваєте?
Добре?
Прохолодний.
Отже, давайте повернемося.
І давайте спробуємо виправити цю частину сайту пана Цукерберга.
Таким чином, терміни є тут, у зверху, а список друзів
знаходиться в нижній частині.
І таким чином, ми просто повинні привласнити колони, з розмірів пропорційно,
в кожному з них.
Так цей перший ххх для шкалою.
Які класи ми покласти в тут?
Що ви, хлопці, покласти в тут?
Так що пам'ятайте, на великому екрані, він повинен взяти три чверті ширини.
І так, який стиль дасть вам це?
На великому екрані, три чверті ширини.
Який клас ми використовуємо там?
АУДИТОРІЯ: Таким чином, ми просто буде редагування, що перший екземпляр класу.
Нееля MEHTA: Зараз.
Так.
>> АУДИТОРІЯ: Ми не редагуючи кожен, індивідуальний особливістю терміни?
Нееля MEHTA: Не зараз, принаймні.
Так вся ця річ блок.
Ми просто змінюючи проектування блоку.
Так ось ми Col-LG-9, тому що це дев'ять з 12 широко на великому екрані.
А потім на середньому екрані, скільки колонок я повинен отримати?
АУДИТОРІЯ: Він повинен бути навпіл.
Нееля MEHTA: Вірно.
Так скільки ж?
>> АУДИТОРІЯ: Так шість.
Нееля MEHTA: Шість.
І тоді особливо малого повинен be-- якщо він займає всю ширину рядка,
скільки має бути?
АУДИТОРІЯ: 12.
Нееля MEHTA: 12.
Так.
А тепер ми повинні змінити інші,
тому він приймає інші простору.
Так кол-lg--
АУДИТОРІЯ: Це збирається взяти на себе весь екран?
Нееля MEHTA: Вона займає чверть екрану на великій пристрої,
як ми показали тут.
>> АУДИТОРІЯ: Три.
>> Нееля MEHTA: Три.
І тоді кол-MD-6 прийняти до іншої частини простору.
Col-XS-12.
Так що тепер у нас є графік займаючи три чверті
сторінки у великому екрані і потім одна чверть на стороні.
І потім, якщо розмір екрану вниз, він повинен змінити розмір відповідно.
Так що це складені в даний час, на дуже маленькому екрані.
І якщо ми зменшимо його розмір до небагато, вони повинні бути рівно половина, а половина.
Таким чином, ми зробили це так далеко.
Дуже круто.
І тому ми не будемо робити Інша частина проблеми.
Ви можете зробити це самостійно.
Але в принципі, ви повинні спробувати зробити це реагувати
а well-- зробити графік предмети, самі по собі, що реагують.
Так що тепер ми пройшли все, що вам потрібно знати,
про чуйний боку Bootstrap.
Будь-які питання про чуйний дизайн з Bootstrap
і як ви могли б йти про те, що робити?
Так?
>> АУДИТОРІЯ: Це схоже якщо ми мали вбудоване відео
і ми хотіли, щоб контролювати масштаб, в якому відео was--
розмір відео походить від ноутбука на телефон.
Нееля MEHTA: Так.
Більш-менш.
Ви повинні були б сказати відео на взяти стільки ж місця, як це дано,
що трохи дратує іноді.
Але основна ідея та ж.
Відео, як і будь-який інший об'єкт в сторінка, як кнопка або щось,
так довго, як ви використовуєте колони і ряди,
Ви можете дати йому певну кількість простору.
І так змусити його честь, що є Інше питання, тому що як YouTube
вбудовує мають певну, бажаний розмір.
Але теоретично в міру, вона буде працювати.
Прохолодний?
>> АУДИТОРІЯ: Я вважаю, те, для зображення, ви насправді
повинні мати різні версії те ж зображення в різних розмірах
для ноутбука в порівнянні з iPhone?
Та Питання в тому, чи потрібно нам є зображення, які реагують, як добре.
І справді, ви можете зробити це.
Я думаю, що це в CSS.
Але Bootstrap дозволяє Ви зробити це, а також.
Ви можете мати відповідні зображення.
Ви можете мати ваші зображення зміни розміру відповідно до розміру сторінки.
І є дуже нова річ HTML5, новітня версія HTML,
та CSS3, новітній версія CSS, яка
дозволить вам просити різні зображення в залежності від розміру екрану ви на.
Як правило, це досить добре, щоб просто ваш образ просто стиснути або вирости до
Однак більша вона повинна бути.
Але ви можете, якщо ви хочете щоб, є один 32 на 32
для дуже маленьких екранів, і 64 на 64 для великого екрану,
а потім служити тим, вибірково.
Ти можеш це зробити.
Це робиться шляхом деяких людей.
Це все ще досить передній край.
Але коротка відповідь, чуйний images-- Bootstrap може зберегти день там.
Прохолодний?
>> АУДИТОРІЯ: Спасибо.
>> Нееля MEHTA: Так давайте говорити дуже швидко про те, як
щоб отримати це у вашому власному веб-сторінки.
Припустимо, ви хочете зробити свій власний веб-сайт за допомогою Bootstrap.
І так давайте просто просто пройти через це разом.
Припустимо, ви зробити просто нормальний HTML-сторінка.
Не соромтеся слідувати в всі улюблене редактор.
Так що ми просто є HTML-сторінку.
Ми можемо зробити! DOCTYPE HTML.
Це також HTML, наша сторінка.
Нічого нового.
Ми зробили це раніше.
Так от у нас є HTML і ми можемо покласти речі всередині тут.
Ми можемо мати нашу кнопку.
І, як я вже говорив, це не обов'язково буде працювати.
Чому це могло б не працює?
Чому ми не отримуємо наші приємно, барвисті кнопки?
>> АУДИТОРІЯ: Тому що ми не пов'язати його до проекту Bootstrap або файл?
Нееля MEHTA: Так.
Правильно.
Тому що це Bootstrap-- просто фантазія файл CSS.
Це серія з стилів, які які прив'язані до елементів.
Тут ми розповіли, що ми хочете використовувати ці стилі.
Я буду розмір, що до небагато.
Ми сказали це, ми хочемо використовувати ці стилі, але ми ніколи не
сказав йому, що стилі.
І це те, що ваші Запитання від раніше не було.
Ось відповідь на це питання.
Ми повинні знайти спосіб, щоб отримати стилі і включити їх у нашій сторінці якимось чином.
І так Bootstrap воля показати нам, як це зробити.
>> Так що, якщо ви йдете до початку тут, Приступаємо до роботи.
Там це різні способи, щоб завантажити його.
Це, можливо, не має сенсу обов'язково.
Bootstrap-- це дозволить Ви захопити сам файл CSS.
І ви включили його в свою сторінку.
Вихідний код, якщо ви хочете зламати на нього самі.
Вам не потрібно це дійсно.
Сасс це мова що становить в CSS.
Думайте про нього, як препроцесор.
Багато чого, як PHP є Препроцесор HTML, Сасс це препроцесор для CSS.
Так що, якщо ви хочете, щоб зробити це Таким чином, ви можете зробити це.
>> Найпростіший спосіб використовує CDN, або вміст мережу доставки.
Це сайт, який просто подають копію Bootstrap
дуже швидко для вас включити в свою сторінку.
Так ось приклад.
Це дасть вам це посилання елемент.
Елемент посилання розповідає ваш браузер, прийняти всі файли зберігаються тут
і включити його в нашій веб-сторінці.
І в цьому випадку, це СМЧ файл початкового завантаження.
Таким чином, ми просто скопіювати цю адресу, або що текст, і ми кинемо його в
нашій голові.
>> І я не почне сторінку для цього, але ви можете довіряти, що це працює.
Посилання буде отримати вам CSS.
Включити його в свій сторінки, а потім ви будете
можливість використовувати всі Bootstrap класи, які ви знаєте і любите.
Якщо ви хочете, щоб тримати його на місці і є на вашому власному файлової системи
замість того, щоб перейти до Інтернет, щоб схопити його,
Наприклад, якщо ви хочете, щоб використовувати сайт в автономному режимі,
Ви можете використовувати опцію завантаження.
Але здебільшого, за допомогою CDN досить швидко, тому що таким чином,
це оновлюватися для вас, як добре.
Ви повинні вручну оновити його небудь.
Мати сенс?
>> Так багато інструментів, буде побудований цей за замовчуванням. У вашому Pset7 і Pset8,
Я вважаю, бутстрап автоматично включається.
І в CodePen, для Наприклад, це вже
включені, тому що я доданий додати цю настройку.
Так що, якщо ви коли-небудь хотіли, щоб пограти з ним, ви можете просто піти на CodePen,
або піти на ID, або щось.
І ви могли б Доступ Bootstrap там,
але це не завжди будуються , То за замовчуванням, в Інтернеті.
Мати сенс?
>> Так.
так само, як у нас є recap-- як п'ять хвилин до кінця.
Але, як Нагадаємо, в нових веб-сторінок, Ви можете вмикати Bootstrap, як це.
І як тільки ви його включали, Ви можете зробити все прикольних речей тут.
Ви можете піти на, і ви можете просто переглянути СМЧ, ви можете додати деякі цікаві стилі,
Ви можете мати компоненти як кнопки,
і столи, і список предмети, які ми згадували.
Там-то прохолодно плагіни JavaScript, які ви, можливо, хочете, щоб досліджувати.
Вони додати деяку прохолоду інтерактивність на веб-сторінці.
Як цей робить модальний діалог.
>> Так що деякі забавні речі ви можете зробити з Bootstrap.
Так що моя вам порада йти вперед і використовувати його в своїх проектах,
дотримуйтесь інструкцій ми тільки що зробив про те, як отримати його,
і щойно прочитав, бо Bootstrap Ви дізнаєтеся більше про те, що робити.
І таким чином, ми пішли більше, сьогодні, як користуватися
документація, те, що будівля блоки, і як це концептуально.
Так що тепер моє завдання, щоб вас зробити сайт, використовуючи Bootstrap.
Перейти в документації.
І використовувати ті інструменти, які ми дізнався так далеко, щоб намагатися проаналізувати їх
і зрозуміти їх.
І використовувати ці стилі та інструменти Ви бачите там, у вашому веб-сайті.
І це просто великий, експериментальний процес.
>> Спробуйте певний стиль.
Це працює?
Лі ні?
Спробуйте покласти речі разом.
Подивіться, що відбувається.
Це дуже самостійною керуючись, процес виявлення.
Але сьогодні, ми дізналися самі основи того, що початкового завантаження?
Чому це працює?
Як це працює?
Як ми починаємо використовувати це, в першу чергу?
І ось тепер, що ти протягом цього горба, ви
повинні бути в змозі зробити це досить гладко самостійно.
>> Отже, ще раз, все Код, який ми зробили тут.
Так що, якщо ви коли-небудь хотіли щоб отримати кисть на,
як те, що швидкий чит лист для всіх стилів?
Ви можете піти в цьому зразку тут.
У нас є кілька прикладів стилів тут.
Якщо ви хочете спробувати проблеми знову себе,
Ви можете спробувати їх тут та перевірити рішення.
Таким чином, це буде посилання включені на слайдах, які
буде відправлений до вас, звичайно.
Але це також тут.
Ви можете призупинити відео, якщо ви хочете.
Вся інформація вам потрібно, це буде прямо тут, на цьому сайті.
Так що якщо хтось має якісь питання, ми можемо взяти їх протягом наступних кількох хвилин.
В іншому випадку, спасибі всім дуже підходить для перегляду.