Уроки по bootstrap
Будь фронтендер або верстальник рано чи пізно приходить до того, щоб створити свій невеличкий фреймворк. Складається він зазвичай з тих правил і функцій, які доводиться повторювати в кожному проекті. Зібравши їх один раз в одній бібліотеці, починаючи роботу над наступним проектом, досить буде просто підключити її і використовувати готові рішення. Це може бути сітка для колонок з контентом, стандартні правила спрайтів, відступи, заголовки і т.д.
CSS / HTML-фреймворки
Мені доводилося стикатися з такими:
Якщо мова йде тільки про верстці, то вибір фреймворку - це скоріше справа смаку, адже в кожному з них є мінімальний набір для блокової верстки. Там, де необхідно іконочние шрифт. js-компоненти або інше, вибрати фреймворк стає простіше.
Що таке Bootstrap
Створено в катівнях компанії Twitter, спочатку використовувався для власних продуктів і називався "Twitter Bootstrap", а пізніше був випущений на волю. За це у нього забрали слово Twitter з назви.
Bootstrap - це CSS / HTML фреймворк для створення сайтів. Іншими словами, це набір інструментів для верстки. У ньому є ряд переваг, завдяки яким BS вважається найпопулярнішим з собі подібних. Переваги бутстрапа:
- Швидкість роботи - завдяки безлічі готових елементів верстка з бутстрапа займає значно менше часу;
- Масштабованість - додавання нових елементів не порушує загальну структуру;
- Легка настраиваемость - редагування стилів проводиться шляхом створення нових css-правил, які виконуються замість стандартних. При цьому не потрібно використовувати атрибути типу "! Important";
- Велика кількість шаблонів - про шаблони Bootstrap я напишу далі;
- Величезне співтовариство розробників;
- Широка сфера застосування - Bootstrap використовується в створенні тем для практично будь-який CMS (OpenCart, Prestashop, Magento, Joomla, Bitrix, WordPress і будь-які інші), в тому числі для односторінкових додатків.
Особливою популярністю користується Bootstrap для створення одностранічнік або "Лендінзі" (landing page).
шаблони Bootstrap
Шаблони в бутстрапа дозволяють змінювати вже змінені елементи під свої потреби. Безліч розробників пропонують свої шаблони (як платно, так і безкоштовно).
Підключити шаблон в Bootstrap дуже легко: після підключення бутстрапа потрібно тільки додати виклик CSS вашого шаблону.
Детально про шаблони написано в уроці про верстці шаблонів в Bootstrap.
склад фреймворка
Якщо вибрати Bootstrap, цей фреймворк може істотно заощадити час на верстку і розробку фронтенда завдяки безлічі компонентів. Я опишу основні з них, які потрібні більшості фронтенд-спеців.
Потрібно зауважити, що бутстрап - це скоріше набір з трьох фреймворків: css / html, js-компонентів і іконочние шрифту.
Блокова система в Bootstrap - основа грамотної верстки, потужний інструмент для блочного каркаса блоків контенту і будь-яких вкладених елементів. За допомогою префіксів ми можемо вказувати, як потрібно міняти відображення блоків в залежності від типу пристрою, на якому відображається сайт.
Візуально сторінка може бути представлена як завгодно:
Якщо ви вийдете за межі 12 частин, блоки будуть відображатися один під одним, тому стежте за ними. Ось приклад блоків, які будуть відображатися однаково на всіх пристроях. Ми розділимо екран на три рівні частини:
Крім оформлення блоків і структури сторінки, Bootstrap дозволяє оформити текст: абзаци, цитати, заголовки, підзаголовки, різні розміри тексту, вставки коду і так далі. У більшості випадків вам не доведеться міняти встановлені за умовчанням параметри тексту, адже все відступи, заголовки, між рядками відстані та інше прописані з точністю як в аптеці.
Чимало уваги приділено і семантиці: основний заголовок можна оформити тегом. а можна і
Стандартне оформлення для заголовків в бутстрапа виглядає так:
Якщо ви хочете спробувати верстати на бутстрапа, але не хочете копатися в чомусь складному, почніть з малого: оформите текстову сторінку з будь-якої новиною. Розмежуйте заголовок, другорядні заголовки, вставте зображення, кілька цитат, списків і оціните, як легко цей фреймворк впорається з такими завданнями.
Будь-яке повідомлення можна оформити в 4-х стандартних форматах: успіх (success), підказка (info), попередження (warning), помилка (danger). Так вони виглядають в житті:
Для оформлення такого повідомлення досить додати два атрибута класу до потрібного об'єкту:
Також бутстрап дозволяє оформляти діалогові вікна, поп-апи та підказки.
Навігація - вічний милицю, на якому зазвичай буксує верстка. Грамотно заверстані, оформити і змусити працювати елементи навігації - це зазвичай одна з найскладніших завдань верстки. У Bootstrap їй приділено окрему увагу: фреймворк містить оформлення для табів, посторінковою навігації, вкладок, бокового меню, хлібних крихт, головного меню, тулбару і т.д.
Головне меню легко оформляється в такий вигляд:
Щоб зафіксувати головне меню, досить буде додати клас navbar-fixed.
Посторінкова навігація виглядає так:
Код для неї буде потрібно такий:
Як бачите, нічого складного.
Текстові поля і блоки (textarea), кнопки, лейбли, радиокнопки, чекбокси, що випадають списки - для всіх елементів форм у бутстрапа є стилі оформлення. Можна оформити вертикальну та горизонтальну поділ елементів і назв, а також підсвічувати частини форми при виникненні помилок або попереджень.
Можна оформити горизонтальне розташування блоків, все поля в один рядок і ...
Детальна інструкція з оформлення форм є в уроці про створення форм в Bootstrap.
Тут все просто, щоб оформити кнопку, їй додається потрібний набір класів. Кнопки можуть бути різними:
Код для них такий:
Старі добрі таблиці оформляються шляхом додавання класу class = "table". Отримаємо красиво оформлену таблицю:
JS-компоненти
Крім стилів оформлення у бутстрапа є сценарії поведінки для модальних вікон, слайдера, спливаючих підказок, табів та інших інтерактивних елементів сторінки.
Для роботи цих компонентів потрібно jquery, не забудьте переконатися, що вона підключена до bootstrap.js.
Іконочние шрифт, який дозволить вам відмовитися від обридлих спрайтів для іконок і значно спростити собі життя. Єдине обмеження, яке накладає таку спосіб - кожної копії іконки можна призначити тільки один колір.
Як підключити
Заходьте на офсайт і відзначаєте ті елементи, які вам будуть потрібні в роботі. Зайве можна забрати і додавати в міру необхідності. Після вибору тиснемо "Compile and Download", отримуємо архів, який розпаковуємо.
Для базової роботи буде потрібно тільки один файл, він відзначений червоним. Переносите його в папку з вашими css і підключаєте в
сторінок.Іконочние шрифт знаходиться в папці fonts і якщо він потрібен, стежте за тим, щоб він в ній і залишався. Дотримуйтесь структуру папок, щоб все працювало як задумано.
Чи потрібно користуватися Bootstrap, кожен вирішує сам, але будь-який поважаючий себе фронтенд-фахівець повинен вміти з ним працювати. Сфера застосування цього фреймворка дуже широка і він може стати в нагоді в будь-якій ситуації. Тому приділіть пару днів тому, щоб хоча б познайомитися з його основами.
Успіхів вам у цьому. Переходьте до наступного уроку.
"Data-post_id =" 6901 "data-user_id =" 0 "data-is_need_logged =" 0 "data-lang =" en "data-decom_comment_single_translate =" коментар "data-decom_comment_twice_translate =" коментаря "data-decom_comment_plural_translate =" коментарів " data-multiple_vote = "1" data-text_lang_comment_deleted = "Коментар Відаль" data-text_lang_edited = "Відредаговано про" data-text_lang_delete = "ВИДАЛИТИ" data-text_lang_not_zero = "поле яке не NULL" data-text_lang_required = "Це обов'язкове поле. "data-text_lang_checked =" Оберіть один з пунктів "data-text_lang_completed =" Операцію завершено "data-text_lang_items_deleted =" Об'єкти Було Відаль "data-text_lang_close =" Закрити "data-text_lang_loading =" Завантаження. ">
Додати коментар
Вибачте, для коментування та патенти Войти.
58 коментарів
упс на моє запитання відповів 2 урок
Вітаю. я верстальник, заздалегідь перепрошую мож щось не розумію. якщо я скачую бутстреп повністю. підключаю його до html, і так як я багатьох стилів не знаю що там в папках, а використовую тільки знайомі. це як то впливає на вагу сайту і бистрату завантаження його браузірамі. І де можна дізнатися як правельно застосовувати ці властивості. і взагалі для чого яке властивість предназначін. Заздалегідь вдячний за відповідь. і до речі сайт дуже корисний. в загальному класний
де скачати Bootstrap.
Доброго, як думаєте, 1.) чи можна в див де знаходиться col-md-12 вставити свій клас? Або все ж краще створити новий блок поверх бутстраповского або всередині (2.) до речі де краще вставляти, або різниці немає? да наприклад той же колір бекграунду змінити .container.row.col-md-12 і в кінці вставити свій блок, або можна свій блок хоч перед col-md-12 вставити, чи є різниця?) Заздалегідь дякую!
@ Пако, блокова структура в бутстрапа змінює тільки розмір і рівняння блоку (float: left в даному випадку), тому ви можете як додавати класи, так і робити вкладені елементи.
Крім рівняння col - * - * також додає відступи, а це може бути як корисно, так і незручно, тому частіше роблять вкладені елементи, але повторююсь, робіть як зручно, це справа смаку.
Дякую за статтю, добре і доступно пишете! Додайте соц.кнопкі "поділитися" на сайт. Хотів собі зберегти в ВК, щоб потім дочитати. Гаразд, закладку зроблю))) Не припиняйте уроки!